Bootstrap Grid W3schools

Posted onby admin
  1. Bootstrap Grid System W3schools
  2. Bootstrap Image Grid W3schools
  3. Bootstrap Page Layout Examples
  4. Bootstrap 4 Tutorials

Bootstrap Grid System

Grid in bootstrap w3schools

Upgrade your Clever Techie learning experience:(9/13/19) New features and improvements for Clever Techie Patreons. The grid system in Bootstrap is built with a flexbox broken down into twelve column-like segments across the page. But there are situations where users do not want to use the 12 column structure, and so the column grouping, i.e., the grid structure, can be formed in various other ways. Here is the diagram which shows the various other formations of these Bootstrap grids. View Bootstrap 4 Grid Basic.pdf from COMPUTER S PR 308 at University of Ghana. W3schools.com HTML CSS Bootstrap 4 Tutorial BS4 HOME BS4 Get Started BS4 Containers BS4 Grid Basic LOG IN. W3Schools' Bootstrap Templates. We have used Bootstrap's grid system to create some responsive HTML templates. They are completely free - Click on 'Try.

Bootstrap's grid system allows up to 12 columns across the page.

If you do not want to use all 12 columns individually, you can group the columns together to create wider columns:

span 1span 1span 1span 1span 1span 1span 1span 1span 1span 1span 1span 1
span 4 span 4 span 4
span 4span 8
span 6span 6
span 12

Bootstrap's grid system is responsive, and the columns will re-arrange automatically depending on the screen size.

Grid Classes

The Bootstrap grid system has four classes:

  • xs (for phones - screens less than 768px wide)
  • sm (for tablets - screens equal to or greater than 768px wide)
  • md (for small laptops - screens equal to or greater than 992px wide)
  • lg (for laptops and desktops - screens equal to or greater than 1200px wide)

The classes above can be combined to create more dynamic and flexible layouts.

Basic Structure of a Bootstrap Grid

The following is a basic structure of a Bootstrap grid:

<div>
<div></div>
<div></div>
</div>
<div>
<div></div>
<div></div>
<div></div>
</div>
<div>
...
</div>

First; create a row (<div>). Then, add the desired number of columns (tags with appropriate .col-*-* classes). Note that numbers in .col-*-* should always add up to 12 for each row.

Below we have collected some examples of basic Bootstrap grid layouts.

Three Equal Columns

.col-sm-4

The following example shows how to get a three equal-width columns starting at tablets and scaling to large desktops. On mobile phones or screens that are less than 768px wide,the columns will automatically stack:

Example

<div>
<div>.col-sm-4</div>
<div>.col-sm-4</div>
<div>.col-sm-4</div>
</div>
Try it Yourself »

Two Unequal Columns

.col-sm-8

The following example shows how to get two various-width columns starting at tablets and scaling to large desktops:

Example

<div>
<div>.col-sm-4</div>
<div>.col-sm-8</div>
</div>
Try it Yourself »

Tip: You will learn more about Bootstrap grids later in this tutorial.


Navigation Bars

A navigation bar is a navigation header that is placed at the top of the page:

With Bootstrap, a navigation bar can extend or collapse, depending on the screen size.

A standard navigation bar is created with <nav>.

The following example shows how to add a navigation bar to the top of the page:

Bootstrap

Example

<body>
<nav>
<div>
<div>
<a href='#'>WebSiteName</a>
</div>
<ul>
<li><a href='#'>Home</a></li>
<li><a href='#'>Page 1</a></li>
<li><a href='#'>Page 2</a></li>
<li><a href='#'>Page 3</a></li>
</ul>
</div>
</nav>
...
Try it Yourself »
All of the examples on this page will show a navigation bar that takes up too much space on small screens (however, the navigation bar will be on one single line on large screens - because Bootstrap is responsive). This problem (with the small screens) will be solved in the last example on this page!

Inverted Navigation Bar

If you don't like the style of the default navigation bar, Bootstrap provides an alternative, black navbar:

Just change the .navbar-default class into .navbar-inverse:

Grid

Example

<nav>
<div>
<div>
<a href='#'>WebSiteName</a>
</div>
<ul>
<li><a href='#'>Home</a></li>
<li><a href='#'>Page 1</a></li>
<li><a href='#'>Page 2</a></li>
<li><a href='#'>Page 3</a></li>
</ul>
</div>
</nav>
Try it Yourself »

Fixed Navigation Bar

W3schools

The navigation bar can also be fixed at the top or at the bottom of the page.

A fixed navigation bar stays visible in a fixed position (top or bottom) independent of the page scroll.

The .navbar-fixed-top class makes the navigation bar fixed at the top:

Example

<nav>
<div>
<div>
<a href='#'>WebSiteName</a>
</div>
<ul>
<li><a href='#'>Home</a></li>
<li><a href='#'>Page 1</a></li>
<li><a href='#'>Page 2</a></li>
<li><a href='#'>Page 3</a></li>
</ul>
</div>
</nav>
Try it Yourself »

The .navbar-fixed-bottom class makes the navigation bar stay at the bottom:

Example

<nav>
<div>
<div>
<a href='#'>WebSiteName</a>
</div>
<ul>
<li><a href='#'>Home</a></li>
<li><a href='#'>Page 1</a></li>
<li><a href='#'>Page 2</a></li>
<li><a href='#'>Page 3</a></li>
</ul>
</div>
</nav>
Try it Yourself »

Navigation Bar With Dropdown

Navigation bars can also hold dropdown menus.

The following example adds a dropdown menu for the 'Page 1' button:

Example

<nav>
<div>
<div>
<a href='#'>WebSiteName</a>
</div>
<ul>
<li><a href='#'>Home</a></li>
<li>
<a href='#'>Page 1
<span></span></a>
<ul>
<li><a href='#'>Page 1-1</a></li>
<li><a href='#'>Page 1-2</a></li>
<li><a href='#'>Page 1-3</a></li>
</ul>
</li>
<li><a href='#'>Page 2</a></li>
<li><a href='#'>Page 3</a></li>
</ul>
</div>
</nav>
Try it Yourself »

Right-Aligned Navigation Bar

The .navbar-right class is used to right-align navigation bar buttons.

In the following example we insert a 'Sign Up' button and a 'Login' button to the right in the navigation bar. We also add a glyphicon on each of the two new buttons:

Example

<nav>
<div>
<div>
<a href='#'>WebSiteName</a>
</div>
<ul>
<li><a href='#'>Home</a></li>
<li><a href='#'>Page 1</a></li>
<li><a href='#'>Page 2</a></li>
<li><a href='#'>Page 3</a></li>
</ul>
<ul>
<li><a href='#'><span></span> Sign Up</a></li>
<li><a href='#'><span></span> Login</a></li>
</ul>
</div>
</nav>
Try it Yourself »Examples

Bootstrap Grid System W3schools

Collapsing The Navigation Bar

Bootstrap Image Grid W3schools

The navigation bar takes up too much space on a small screen.

Bootstrap Page Layout Examples

We should hide the navigation bar; and only show it when it is needed.

In the following example the navigation bar is replaced by a button in the top right corner. Only when the button is clicked, the navigation bar will be displayed:

Example

<nav>
<div>
<div>
<button type='button'>
<span></span>
<span></span>
<span></span>
</button>
<a href='#'>WebSiteName</a>
</div>
<div>
<ul>
<li><a href='#'>Home</a></li>
<li><a href='#'>Page 1</a></li>
<li><a href='#'>Page 2</a></li>
<li><a href='#'>Page 3</a></li>
</ul>
<ul>
<li><a href='#'><span></span> Sign Up</a></li>
<li><a href='#'><span></span> Login</a></li>
</ul>
</div>
</div>
</nav>
Try it Yourself »

Test Yourself with Exercises!

Bootstrap 4 Tutorials