Bootstrap 3 – Using the Bootstrap Grid

Grids help you achieve consistency in your designs by offering you a structure to put your design elements in. Prior to Bootstrap 3, you had to add mobile styles explicitly. Bootstrap 3 has changed all that by adapting a mobile-first approach with mobile styles baked-in to the core. All the columns are stacked on small mobile phone screens, with the grid scaling up to 12 columns on the large screen. The Grid system in Bootstrap helps you add CSS classes to block elements such as <div> in your HTML documents.

The new Bootstrap Grid system adapts a mobile-first approach, and therefore, when you declare a specific grid size, it becomes the grid for that size and higher. In other words, if you define a size at sm (small-screen-sized devices), then it will be that grid size for sm, md (medium-screen-sized devices), and lg (large-screen-sized devices). We will get to this later in the chapter, so please do not get overwhelmed with the overload of description at this stage.

Alternatively, you can use LESS variables and mixins for greater customization and flexibility. In Bootstrap 3, you use Normalize.css for cross-browser rendering.

Note

The Normalize.css file makes browsers render all elements more consistently and in line with modern standards. It precisely targets only the styles that need normalizing.

In this chapter, we will cover the following topics:

  • Using the Bootstrap Grid classes
  • Adding rows and columns
  • Adding offsets to columns
  • Reversing the order of columns
  • Nesting columns
  • Using the Bootstrap variables and mixins
  • Creating a blog layout with the Bootstrap Grid mixins and variables

Using the Bootstrap Grid classes

You can create a page layout through a series of rows and columns that house your content. To set the maximum width of the page content according to the screen width, you have to use the .container class.

Note

Containers help define the space to be used by the Grid system.

The container width is set as follows:

  • Phone screens (less than 768 px resolution): The width of the container is the same width as the width of the screen
  • Tablet screens (between 768 px and 992 px resolution): The maximum width of the container is 750 px
  • Small desktop screens (between 992 px and 1200 px resolution): The maximum width of the container is 970 px
  • Large desktop screens (more than 1200 px resolution): The maximum width of the container is 1170 px

The class prefixes used for small phone screens, tablets, small desktop screens, and large desktop screens are .col-xs-, .col-sm-, .col-md-, and .col-lg-, respectively. The default gutter width is 30 px.

Note

Gutters are usually desirable because the white space between columns makes for better legibility, so it makes sense to include them as part of the automation for the layout. As for Bootstrap, the gutter width of 30 px is ingrained in it.

While the column width for small devices is automatic, the column widths for tablets, small desktops, and large screens are 62 px, 81 px, and 97 px, respectively.

In order to understand this better, take a look at the following code:

<!DOCTYPE html>
<html>
  <head>
    <title>Using the Bootstrap Grid classes</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
  </head>
  <body>
    <div >
    </div>
  </body>
</html>

The <!DOCTYPE html> doctype is used so that HTML5 tags are properly displayed by the browsers. The viewport meta tag is used to make mobile devices display the page responsively instead of trying to display them at desktop sizes. The <div> tag referenced by the container class will contain the page content. The container class is for a responsive fixed width container, whereas for a full width container spanning the entire width of the viewport, we use the container-fluid class.

Adding rows and columns

You can create rows and columns on the page using the row and column CSS classes. You have to use rows to create a horizontal group of columns, and only columns can be immediate children of rows. Usually, you can use the .col-md- Grid classes to develop a system that is displayed as stacked in small devices; they turn horizontal on the desktop and large screens. The col class should be used in conjunction with the .col-md-X class (where X is the grid unit width that the block element should have) to add a width to the columns. The total number of columns in a row should not be greater than 12, which is the default for the maximum number of columns in a single row on desktops and large screens.

Take a look at the following code to understand this better:

<!DOCTYPE html>
<html>
  <head>
    <title>Using the Bootstrap Grid classes</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
  </head>
  <body>
    <div class="container">
      <h1> Welcome to Packt Publishing </h1>
      <p>An example to showcase the Bootstrap Grid classes</p>

      <div class="row">
        <div class="col-md-4">
          <h2>PacktPub</h2>
            <p>Packt is one of the most prolific and fast-growing tech book publishers in the world. Originally focused on open source software, Packt pays a royalty on relevant books directly to open source projects. These projects have received over $400,000 as part of Packt's Open Source Royalty Scheme to date.
          </p>
        </div>
        <div class="col-md-4">
          <h2>PacktLib: The Packt Online Library</h2>
          <p>
            PacktLib is Packt's online digital book library. Launched in August 2010, it allows you to access and search almost 100,000 pages of book content, to find the solutions you need.
          </p>
        </div>
        <div >
          <h2>Work for Packt Birmingham</h2>
          <p>
            Packt Publishing is a young, ground-breaking computer book publishing company with a large and fast-growing online customer base. With a highly ranked website and innovating constantly into new business areas, we are 
            at the cutting-edge of digital publishing, web marketing and e-commerce development. Our unique strategy of publishing highly-focused and practical technical books on new and ground-breaking technologies has driven rapid growth and we are now poised for expansion. This can be seen from our recent move to new offices in the heart of Birmingham.
          </p>
        </div>
      </div>
    </div>
  </body>
</html>

The output of the code upon the execution will be as follows:

If you observe the code and the output, you will see a grid with three columns, each with a width of 4. If you observe the <h1> and <p> tags, you will see that they have been declared before the row was defined. However, the three columns with the PacktPub, PacktLib: The Packt Online Library and Work for Packt Birmingham headings have been defined with a width of 4 per column. Thus, the 12 columns get divided into three parts with a width of 4 each. However, this format will only define the layout on the desktop or a large screen. The entire grid will be stacked in small devices and will be horizontally aligned on a desktop or a large screen.

Note

If you want the content to span the full width of the container, you don’t have to define it between a row or a column, meaning the CSS class col-md-12 to create full width columns is not mandatory. Also, if you have more than 12 columns in a single row, the extra columns will get wrapped as a unit on the next line.

Customizing the grid for small devices

As already mentioned, columns will be displayed one after the other on a small screen. Suppose that you want a column-based format for small devices as well. In such a scenario, you have to include the col-sm-X CSS class in the code.

Take a look at the following code to understand it better:

<!DOCTYPE html>
<html>
  <head>
    <title>Using the Bootstrap Grid classes</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
  </head>
  <body>
    <div class="container">
      <h1> Welcome to Packt Publishing </h1>
      <p>An example to showcase the Bootstrap Grid classes</p>

      <div class="row">
        <div class="col-md-4 col-sm-6">
          <h2>PacktPub</h2>
          <p>Packt is one of the most prolific and fast-growing tech book publishers in the world. Originally focused on open source software, Packt pays a royalty on relevant books directly to open source projects. These projects have received over $400,000 as part of Packt's Open Source Royalty Scheme to date.</p>
        </div>
        <div class="col-md-4 col-sm-6">
          <h2>PacktLib: Online </h2>
          <p>
            PacktLib is Packt's online digital book library. Launched in August 2010, it allows you to access and search almost 100,000 pages of book content, to find the solutions you need.
          </p>
        </div>
        <div >
          <h2>Packt Birmingham</h2>
          <p>
            Packt Publishing is a young, ground-breaking computer book publishing company with a large and fast-growing online customer base. With a highly ranked website and innovating constantly into new business areas, we are at the cutting-edge of digital publishing, web marketing and e-commerce development. Our unique strategy of publishing highly-focused and practical technical books on new and ground-breaking technologies has driven rapid growth and we are now poised for expansion. This can be seen from our recent move to new offices in the heart of Birmingham.
          </p>
        </div>
      </div>
    </div>
  </body>
</html>

The output of the code on the desktop and large screens upon execution will be as follows:

On a small screen such as a mobile phone or tablet, the output will be as follows:

If you observe the output of the code on a small screen, you can see that since the first two columns were assigned the col-sm-6 class, each of them occupied half the screen width. The third column, which was assigned the col-sm-12 class, occupies the entire screen width below the first two columns.

Adding offsets to columns

In order to add a left margin to columns, you can use the col-offset-X class, where X is the number of columns by which a block element should be moved to the right.

Take a look at the following code to understand this better:

<!DOCTYPE html>
<html>
  <head>
    <title>Using the Bootstrap Grid classes</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
  </head>
  <body>
    <div class="container">
      <h1>The Offset feature in Bootstrap</h1>
      <h2>PacktPub</h2>
      <div class="row">
        <div >Packt is one of the most prolific and fast-growing tech book publishers in the world. Originally focused on open source software, Packt pays a royalty on relevant books directly to open source projects. These projects have received over $400,000 as part of Packt's Open Source Royalty Scheme to date.
        </div>
      </div>
    </div>
  </body>
</html>

The output of the code upon the execution will be as follows:

If you observe the code and the output, you can see that the block element has moved eight column units to the right. If you look at the highlighted code, which is <div >, you can see that we have defined the offset as 8, due to which we get the desired output wherein the .col-md-offset-8 class will be applied to medium device screen resolutions.

Note

You can add independent offsets based on the mobile device screen resolution.

Pulling and pushing columns

At times, you might want to display the columns on the screen in a different order than the way in which they are defined in the HTML code. Bootstrap provides the col-push-X and col-pull-X classes for this. While col-push-X will move the column to the right by X units, col-pull-x will move the column to the left by X units, where X is the number of units by which you want to move the columns. This feature helps you reverse the order of columns.

Take a look at the following code to understand this better:

<!DOCTYPE html>
<html>
  <head>
    <title>Using the Bootstrap Grid classes</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
  </head>
  <body>
    <div class="container">
      <h1>Welcome to Packt</h1>
      <p>We will look at the concept of Grid Layouts now</p>
      <div class="row">
        <div class="col-md-9 col-md-push-3">
          <h2>PacktPub</h2>
          <p>
            Packt is one of the most prolific and fast-growing tech book publishers in the world. Originally focused on open source software, Packt pays a royalty on relevant books directly to open source projects. These projects have received over $400,000 as part of Packt's Open Source Royalty Scheme to date.Our books focus on practicality, recognising that readers are ultimately concerned with getting the job done. Packt's digitally-focused business model allows us to publish up-to-date books in very specific areas.
          </p>
        </div>
        <div >
          <h2>PacktLib: Online</h2>
          <p>PacktLib is Packt's online digital book library. Launched in August 2010, it allows you to access and search almost 100,000 pages of book content, to find the solutions you need.</p>
        </div>
      </div>
    </div>
  </body>
</html>

The output of the code upon the execution will be as follows:

If you take a look at the preceding code and output, you’ll realize that the column with a width of 9 units was pushed to the right by 3 units, whereas the column with a width of 3 units was moved to the left by 9 units. Thus, you can change the output using the push and pull attributes that override the hierarchy of the HTML code.

Nesting columns

You can nest columns by putting rows and columns within an existing column. The nested columns collectively take the width of the existing parent column.

Take a look at the following code to understand this better:

<!DOCTYPE html>
<html>
  <head>
    <title>Using the Bootstrap Grid classes</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
    <style>
      #packt {
        border-style: solid;
        border-color: black;
        color: #FF00FF;
      }
      #pub {
        border-style: solid;
        border-color: black;
        color: #FF00FF;
      }

      #packtlib {
        border-style: dotted;
        border-color: lime;

      }
    </style>

  </head>
  <body>
    <div class="container">
      <h1>Hello, world!</h1>
      <p>This is an example to show how to nest columns within the allocated parent space</p>

      <div class="row ">
        <div class="col-lg-6" id="packtlib">
          <h2>Columns can be nested within the space.</h2>
          <div class="row"  >
            <div class="col-lg-6" id="packt">
              <p>PacktLib is Packt's online digital book library. Launched in August 2010, it allows you to access and search almost 100,000 pages of book content, to find the solutions you need. As part of the Open Source community, Packt aims to help sustain the projects which it publishes books on. Open Source projects have received over $400,000 through this scheme to date.
              </p>
            </div>
            <div  >
              <p>Our books focus on practicality, recognising that readers are ultimately concerned with getting the job done. Packt's digitally-focused business model allows us to publish up-to-date books in very specific areas.With over 1000 books published, Packt now offers a subscription service. This app and a PacktLib subscription now makes finding the information you need easier than ever before.
              </p>
            </div>
          </div>
        </div>
      </div> <!-- the row class div -->
    </div> <!-- the container div -->
  </body>
</html>

The output of the code upon the execution will be as follows:

If you take a look at the preceding code and the subsequent output, you can see that we have nested two columns with the col-lg-6 class within an existing parent column, which has also been assigned a class of col-lg-6. The parent column occupies half of the screen width on a desktop or a large screen. The nested columns—each of which has been assigned a col-lg-6 class—will take half the width of the parent column. You can also see the CSS styles (defined in the <style> tag) being applied to the borders of the parent and nested columns. The parent column has a dotted lime-colored border, whereas the child columns nested in the parent column have been assigned a solid black border. From the borders, you can clearly see that the child columns have occupied half the width of the parent column.

Comments are closed.