Introduction to Bootstrap

Bootstrap is a CSS, mobile-first framework that allows you to build dynamic sites with ease that are responsive and will scale according to the size of the user's device. Its ease of use and extensive library of templates, classes, and attributes make it a reliable way to quickly build great-looking, mobile-friendly websites or apps. This article will talk about a few of the fundamental features that Bootstrap offers.

The Grid System

The core feature of this framework is its grid system layout which defines the layout of a UI. The structure of each component is a container that includes columns with nested rows inside of them. Each container can contain up to 12 columns.

<div class="container text-center">
  <div class="row row-cols-1 row-cols-sm-2 row-cols-md-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

source

When a container is loaded with divs that all have a class of "col", the columns default to the same width. Below another row is added and the sizes of the columns are changed in the second row.

<div class="container text-center">
  <div class="row">
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
  </div>
  <div class="row">
    <div class="col-8">col-8</div>
    <div class="col-4">col-4</div>
  </div>
</div>

source

Column width can be defined for any number of columns, if the size is defined for some but not all, the elements with undefined width will all default to equal width that occupies the remainder of the page. If the sum of the sizes exceeds twelve, the columns will wrap and sit on top of one another. This simple system allows any combination of nested rows and columns, which are all given functionality to render responsive HTML, depending on the type of device that receives it.

Breakpoints

Bootstrap layouts will always default to a layout that is best for a phone. When the page is rendered on a larger screen it will adjust the layout to fit the size of the user's screen. Adding breakpoints ('sm', 'med', 'lg', 'xl', or 'xxl') enables you to add conditionals to define the layout based on the screen size. When a breakpoint is set, it will apply to all screens of that size and larger. If you wanted to have three different displays you could set 2 breakpoints, one at medium and one at extra large. Any screen smaller than medium would get the default layout. When a breakpoint is given the defined state applies to that screen size and larger.

Breakpoints can be applied to any container, column, or row inside the grid system. Go here to learn all about breakpoints then here to implement them on the grid system and see the unlimited possible layouts to create your project with.

Customize

Bootstrap is a flexible framework, the components all come with default values, but are fully customizable. Their library is filled with invaluable tools that work with both CSS and Javascript. They also have specific frameworks to use with React, Vue and Angular.

Conclusion

Bootstrap's huge library of classes and templates along with its 12-column layout system is could be a huge help if you are on a time crunch to get a project launched quickly. A little bit of playing with the framework's tool kit now could have huge benefits in the future. Whether you just the grid functions to set the layout, or you choose to use a full template bootstrap can be a huge asset to your product.