HTML CSS and Bootstrap

HTML, CSS, and Bootstrap Primer

To best understand Bootstrap, we need to make sure we are on the same page with HTML and CSS.

HTML

HTML is easy, it is simply a document that is interpreted by your browser. The same way MS Word "interprets" your .doc files, your browser interprets .html files.

When you view a websites' source code, you are viewing the raw HTML document.

Elements & Attributes

Elements, sometimes called "tags", are the individual components that make up the HTML document.

Some common elements are:

<div>
<h1>
<p>
<strong>
<img>

Some elements are meant to be containers for content and must be closed, while others are not meant to contain content and do not. Sometimes the latter type of element is called a "self-closing" element or tag.

Container elements:

<div>...</div>
<h1>My Page Title</h1>
<span>Some content.</span>

Self-closing elements:

<img>
<hr>
<br>

Elements can have attributes. Attributes are written as key-value pairs within the element's opening tag. The value for an attribute should alway be wrapped in quotation marks.

<div id="page-wrapper"></div> - "id" is the attribute, and its value is "page-wrapper"
<img src="some.gif" alt="a cat falls down"> - "src" is an attribute with the value of "some.gif". "alt" is an attribute with the value of "a cat falls down".

The class attribute is a little special in that it is actually a collection of values, with each value separated by a space.

<div class="one two three"></div> - "class" is an attribute, and it has three values: "one", "two" and "three".

CSS

CSS is a way to add style to your HTML document. We use it for things like: changing fonts, background colors and element layout.

We can target specific HTML elements in a number of ways, but the following methods are the most common.

Assume:

<div id="page-wrapper" class="one two"></div>

Target by element type: div { border: 1px solid blue; }
Target by element id attribute: #page-wrapper { background: red; }
Target by element class attribute values: .one {} .two{}

To target an element by id we prefix it with a pound (hash) symbol: #elementID {}.

To target an element by class we use a period in front of the class name .className {}.

Note: When you write CSS, you are applying the style to everything that matches your target statement. Meaning div { background: red } will cause every div element in the document to have a red background.

Bootstrap is a CSS Framework

Generally speaking, a framework is a set of common functionality shared by developers. Frameworks come in many shapes and sizes but serve a common purpose. They allow us to write less code and benefit from others' experience.

Some of the common functionality for websites that the Bootstrap framework provides are:

Responsive Grid
Responsive Navigation
Styled
- Typography
- Forms
- Tables
- Buttons
- Images
etc.

And it is all cross-browser compatible.

Using Bootstrap

Starting with a very-simple HTML document, we're going to convert it into a Bootstrap styled page using only HTML.

This will be the starting document:

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
</head>
<body>

</body>
</html>

This is the goal:

--------------------------------------
|              Header                |
--------------------------------------
|           |            |           |
|   img     |    img     |    img    | 
|           |            |           |
--------------------------------------
| Page Title             | Sidebar   |
|                        |           |
| Content                |           |
|                        |           |
--------------------------------------
|              Footer                |
--------------------------------------

Here goes--

Create `container` and `row`s.

The first thing we need to do is provide the HTML and Bootstrap classes that the grid system provides for responsive layout.

Using the container class, using define our top-level element.
Within the container, we create a row for each major horizontal areas.

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
</head>
<body>

<!-- Container for rows -->
<div class="container">

	<!-- Header -->
	<header></header>
	
	<!-- Image row -->
	<div class="row"></div>
	
	<!-- Main -->
	<div class="row"></div>
	
	<!-- Footer -->
	<footer></footer>
</div>

</body>
</html>

Adding Columns

Bootstrap's grid system is based on a total number of 12 small columns. We can add multiple these 12 columns together to make a bigger column.

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
</head>
<body>

<!-- Container for rows -->
<div class="container">

	<!-- Header -->
	<header></header>
	
	<!-- Image row -->
	<div class="row">
		<div class="col-md-4"></div>
		<div class="col-md-4"></div>
		<div class="col-md-4"></div>
	</div>
	
	<!-- Main -->
	<div class="row">
		<div class="col-md-8"></div>
		<div class="col-md-4"></div>
	</div>
	
	<!-- Footer -->
	<footer></footer>
</div>

</body>
</html>

What did we do there?

The col-md-* bootstrap class means, "this div should take up * columns on screensizes medium and up".

Okay, but what does That mean?

By default, Bootstrap has 4 responsive breakpoints: Extra-small, Small, Medium, and Large.

Aside: Default Bootstrap Breakpoints

<768px - Extra small devices (Phones)
≥768px - Small devices (Tablets)
≥992px - Medium devices (Desktops)
≥1200px - Large devices (Desktops)

We can take advantage of those breakpoints by using the desired column classes.

Column classes:

col-xs-* - extra small
col-sm-* - small
col-md-* - medium
col-lg-* - large and up

The asterisk * is how many of Bootstrap's columns this element should take up.

Back to the code

Let's look at each row we created individually:

Both the header and the footer take up the entire width of the container, so we do not need to use any special Bootstrap classes. But do notice that these elements are within the container div.

<!-- Container for rows -->
<div class="container">
	<!-- Header -->
	<header></header>

...

	<!-- Footer -->
	<footer></footer>
</div>

The row of images is divided into three equal sections. Since Bootstrap works on a twelve column layout, our sections need to be 4 Bootstrap columns wide.

12 columns / 3 sections = 4 columns per section

	<!-- Image row -->
	<div class="row">
		<div class="col-md-4"></div>
		<div class="col-md-4"></div>
		<div class="col-md-4"></div>
	</div>

The main content area is divided into two sections. the content section is 2/3rds of the container, and the sidebar section is 1/3rd of the container width.

Content: 12 columns * 2/3 = 8 columns for the content

Sidebar: 12 columns * 1/3 = 4 columns for the sidebar

	<!-- Main -->
	<div class="row">
		<div class="col-md-8"></div>
		<div class="col-md-4"></div>
	</div>

In two previous examples of rows and columns, we used the medium Bootstrap classes (col-md-*.) This means that any screen size equal to or wider than the medium breakpoint will see these sections as columns. While any screen smaller than the medium breakpoint will see only rows.

How this code looks on a small screen:

-------------
|  Header   |
-------------
|           |
|   img     |
|           |
-------------
|           |
|   img     |
|           |
-------------
|           |
|   img     |
|           |
-------------
| Page Title|
|           |
| Content   |
|           |
-------------
|  Sidebar  |
|           |
-------------
|  Footer   |
-------------

One more time with content

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
</head>
<body>

<!-- Container for rows -->
<div class="container">

	<!-- Header -->
	<header>
		<a href="/">Awesome Website</a>
	</header>
	
	<!-- Image row -->
	<div class="row">
		<div class="col-md-4">
			<img src="awesome-1.jpeg">
		</div>
		<div class="col-md-4">
			<img src="awesome-2.jpeg">
		</div>
		<div class="col-md-4">
			<img src="awesome-3.jpeg">
		</div>
	</div>
	
	<!-- Main -->
	<div class="row">
		<div class="col-md-8">
			<h1>This is my homepage. Marvel.</h1>
			<p>Welcome to my webzone.</p>
		</div>
		<div class="col-md-4">
			<h2>This is my sidebar</h2>
			<p>Here is where I put useful links or something.</p>
		</div>
	</div>
	
	<!-- Footer -->
	<footer></footer>
</div>

</body>
</html>

We've just made our first Bootstrap page. It is completely responsive, and we only used HTML.

Continued Reading...

Bootstrap Grids - The fundamentals of the grid system.
Bootstrap Responsive Utilities - Additional grid-related utility classes.

Next Page >> Creating a Bootstrap Navbar in WordPress

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

HTML CSS and Bootstrap

HTML, CSS, and Bootstrap Primer

HTML

Elements & Attributes

CSS

Bootstrap is a CSS Framework

Using Bootstrap

Create `container` and `row`s.

Adding Columns

Aside: Default Bootstrap Breakpoints

Back to the code

One more time with content

Continued Reading...

Table of Contents

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Clone this wiki locally

HTML CSS and Bootstrap

HTML, CSS, and Bootstrap Primer

HTML

Elements & Attributes

CSS

Bootstrap is a CSS Framework

Using Bootstrap

Create container and rows.

Adding Columns

Aside: Default Bootstrap Breakpoints

Back to the code

One more time with content

Continued Reading...

Table of Contents

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Clone this wiki locally

Create `container` and `row`s.