Key Concepts of Bootstrap: Container, Row, and Grid System

date

Jun 20, 2023

slug

key-concepts-of-bootstrap

author

status

Public

📜 Table of Contents

📜 Table of Contents 📖 What is the Bootstrap?✅ Key Features ✅ Fundamental Concept #1: Container ✅ Fundamental Concept #2: Row ✅ Fundamental Concept #3: Grid System 📝 Summary 🐣 Pros 🐷 Cons

📖 What is the Bootstrap?

Bootstrap is one of the most popular front-end frameworks for web development, developed by Twitter. It provides pre-written HTML, CSS, and JavaScript that developers can use to speed up the process of creating web pages. It's designed to make web development faster and easier, and to help ensure that web pages are responsive and mobile-friendly.

✅ Key Features

Responsive design: Bootstrap automatically adjusts your web pages to appear correctly on all devices (desktops, tablets, and phones). This is done using a responsive grid system.

Grid system: Bootstrap uses a 12-column grid system that can be flexibly combined for various layouts. You can specify how many grid columns you want to use for each part of your layout on different devices.

Components: Bootstrap provides a number of reusable components for common web elements like navigation bars, dropdowns, carousels, modals, forms, and more. This helps keep the look and feel of these elements consistent across your site, and saves you from having to code these from scratch.

Utilities: These are utility classes that help in faster CSS development, like margin/padding helpers, text alignment, and color helpers.

Customizable: Bootstrap allows you to customize the components, grid system, and JavaScript plugins to suit your needs.

JavaScript Plugins: It comes with a handful of JQuery plugins providing additional UI features like transitions, modals, carousels, etc.

To use Bootstrap, you can link to the Bootstrap CDN (Content Delivery Network) in your HTML file, or you can download it directly from the Bootstrap website. Once it's linked or downloaded, you can start using its classes in your HTML.


<!DOCTYPE html>
<html>
<head>
  <title>My Bootstrap Page</title>
  <!-- CSS for Bootstrap -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
  <!-- Navigation Bar -->
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">My Website</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Features</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Pricing</a>
        </li>
      </ul>
    </div>
  </nav>

  <!-- Page Content -->
  <div class="container">
    <div class="row">
      <div class="col">
        <!-- Content for first column -->
        <table class="table">
          <thead>
            <tr>
              <th scope="col">#</th>
              <th scope="col">First</th>
              <th scope="col">Last</th>
              <th scope="col">Handle</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <th scope="row">1</th>
              <td>Mark</td>
              <td>Otto</td>
              <td>@mdo</td>
            </tr>
            <tr>
              <th scope="row">2</th>
              <td>Jacob</td>
              <td>Thornton</td>
              <td>@fat</td>
            </tr>
            <tr>
              <th scope="row">3</th>
              <td>Larry</td>
              <td>the Bird</td>
              <td>@twitter</td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="col">
        <!-- Content for second column -->
      </div>
    </div>
  </div>

  <!-- JS for Bootstrap -->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>

In this example, the navigation bar will automatically adjust for different screen sizes. The page content is divided into two equal columns which will stack vertically on small screens. The CSS and JS for Bootstrap are loaded from a CDN for simplicity, but in a real project, you might want to download them and serve them from your own server for better performance.

The class "table" is added to the table element to style it with Bootstrap. In the table, I have also added thead (table head) and tbody (table body) sections. The tr elements define the rows, and the th and td elements define the header and data cells, respectively.

✅ Fundamental Concept #1: Container

A container in Bootstrap is a class that is used to set the content's margins dealing with the responsive behaviors of your layout. It wraps site contents and houses everything in a centrally aligned block.

Bootstrap has two types of containers:

.container: This class provides a responsive fixed-width container (meaning its max-width changes at each breakpoint).

.container-fluid: This class provides a full-width container, spanning the entire width of the viewport.


<div class="container">
  <!-- Content here -->
</div>

In this example, the container class is used to create a responsive fixed-width container. The content you put inside this div will be automatically aligned and padded.

On the other hand, if you wanted your content to span the full width of the viewport, you could use the container-fluid class instead:


<div class="container-fluid">
  <!-- Content here -->
</div>

These containers are always required when using Bootstrap's grid system, as the rows and columns should be housed in a container.

✅ Fundamental Concept #2: Row

The 'row' is a fundamental part of Bootstrap's grid system, serving as a wrapper for columns.

Role of 'row': Rows are used in Bootstrap to contain and manage the layout of columns. You can think of a 'row' as a horizontal slice of the page. Rows are designed to house columns, and by default, they allow content to be arranged into a maximum of 12 columns.

Importance of 'row': Using rows is important due to the way Bootstrap's grid system works. Each row acts as a flex container, allowing its columns to automatically adjust their widths and heights to fit content.

Behavior of 'row': When you put 'col' classes directly within a 'container', they would all line up in a row, but without the use of the 'row' class, you lose certain behaviors. For example, a key feature of rows is that they negate the horizontal padding of the columns they contain, keeping the content properly aligned within the container.


<container>
  <row>
    <col></col>
    <col></col>
  </row>
  <row>
    <col></col>
    <col></col>
    <col></col>
  </row>
</container>

Each 'row' is a horizontal grouping of columns, and they sit within a 'container' that aligns everything nicely. Each 'col' represents a column within that row. In this way, the layout of a webpage can be easily managed and adjusted for different screen sizes.

✅ Fundamental Concept #3: Grid System

Bootstrap's grid system is one of its key features. It allows you to easily create complex layouts that are responsive, meaning they adjust for different screen sizes.

Bootstrap's grid system is built with flexbox and allows up to 12 columns across the page. This 12-unit scale is flexible and can be divided into different kinds of arrangements: you could have twelve 1-column elements, six 2-column elements, four 3-column elements, three 4-column elements, two 6-column elements, or one 12-column element, and so forth.


<div class="container">
  <div class="row">
    <div class="col-md-4">
      <!-- Content here will take up 4 of 12 columns when the screen is medium or larger -->
    </div>
    <div class="col-md-8">
      <!-- Content here will take up 8 of 12 columns when the screen is medium or larger -->
    </div>
  </div>
</div>

In the example above, the page is split into two columns. The first column is 4 units wide and the second column is 8 units wide, making a total of 12. The 'md' in the class name stands for 'medium', which means these column widths will apply when the screen is medium-sized or larger. For smaller screens, the two columns will stack vertically, each taking up the full width of the screen.

The breakpoints provided by Bootstrap as of version 4 are:

xs (extra small screens, less than 576px) - This is the default, and doesn't need a breakpoint abbreviation in the class name.

sm (small screens, 576px and up)

md (medium screens, 768px and up)

lg (large screens, 992px and up)

xl (extra large screens, 1200px and up)

The number of columns you want your content to occupy on any particular device can be specified by using the relevant class. For instance, to make a layout with two columns of equal width, you would use .col-md-6 for each column on medium devices and above.

Bootstrap grid system provides a lot of flexibility and makes creating responsive designs much easier. For a deeper understanding, it would be beneficial to explore the official Bootstrap documentation which provides more comprehensive and detailed examples and explanations.

📝 Summary

Bootstrap is a popular front-end framework for web development that provides pre-written HTML, CSS, and JavaScript to speed up the process of creating web pages. Its key features include a responsive design, a 12-column grid system, reusable components, utility classes, and customizable JavaScript plugins. The fundamental concepts of Bootstrap are the container, row, and grid system, which allow for easy layout management and responsiveness. The grid system is built with flexbox and allows up to 12 columns across the page, with breakpoints for different screen sizes.

🐣 Pros

Bootstrap provides pre-written HTML, CSS, and JavaScript that speeds up web development.

Its responsive design automatically adjusts web pages to appear correctly on all devices.

Bootstrap's 12-column grid system can be flexibly combined for various layouts.

The framework provides a number of reusable components for common web elements, saving developers from coding these from scratch.

Bootstrap's utility classes help in faster CSS development.

🐷 Cons

Using Bootstrap can make web pages look similar to others that also use Bootstrap.

As Bootstrap is a framework, it can be harder to customize the design of web pages.

The large number of classes and components can make it challenging to learn and navigate the framework.

Bootstrap's reliance on JavaScript can slow down page load times.

The framework may not be suitable for all types of projects, especially those with specific design requirements.