How-to… Bootstrap

Get Started, Learn the Grid, Components, Build Themes, etc…

Carol Skelly

Published in

WDstack

26 min readMay 28, 2018

If you are here, you’ve certainly heard about “The world’s most popular front-end component library”___ Bootstrap

I’ve worked with Bootstrap a lot since the 2013 release of Bootstrap 3.0. I’ve contributed to the Bootstrap docs, and rank first for Bootstrap on Stack Overflow. I feel more than prepared to tell you everything you need to know about it. With this article, I hope to demystify Bootstrap in a clear and understandable way.

BUT First, let’s talk about you. I hope that if you’re reading this you have a good understanding of HTML and CSS. If you haven’t built any Websites, don’t know what CSS Specificity is, or don’t know the difference between using #abc and .abc in CSS, this is NOT the article for you. Instead you should learn the basics of HTML and CSS.

“I’ve tried using Bootstrap, but it seems like getting anything to work is difficult or impossible.”

I hear ya. You’re not alone. I’ve answered over 2,000 Bootstrap related questions on Stack Overflow, have seen many frustrated Bootstrap users. Do yourself a huge favor: Read this article, the documentation, and don’t try to force things. I will show you that Bootstrap is easy, elegant and sensible.

What’s Covered in this Article:

What is Bootstrap and Why Would I Use It?
How to Get Started with Bootstrap
How to Use Bootstrap CSS including the Navbar
How to Use the Bootstrap Grid
How to Responsive Design with Bootstrap
How to Use Bootstrap JavaScript Components
How to Customize Bootstrap

From here on, this article can be read on an as-needed basis. Feel free to scroll past sections that are glaringly newbie to you, but please don’t overlook the important details that will help you utilize “Bootstrap the right way”.

What is Bootstrap? Why Would I Use It?

Bootstrap consists of CSS and JavaScript files. It’s a framework (a.k.a — “library” or “toolkit”) that makes Website development faster and easier.

Bootstrap helps with creating Websites that are…

Consistent__ Foremost, Bootstrap provides a consistent, uniform appearance and design. With very little effort, Bootstrap can be used to transform a hodgepodge site into a professional, visually appealing design.

Responsive__ Sites created with Bootstrap are designed to look & function well on any device including desktops, laptops, tablets and smartphones. Bootstrap is “mobile-first” which means the design for smaller mobile devices is considered before that of larger screen devices. Responsive-ness is based on screen width, not height. This is because Bootstrap utilizes width-based CSS Media Queries.

Compatible__ Bootstrap is a mature, tested code-base that is entirely based on standards and cross-browser compliance. Sites that properly utilize what Bootstrap offers will also benefit from this compatibility.

If you don’t understand what I’m talking about, that’s okay! Let’s look at a super simple Bootstrap example.

A Basic “before & after” Bootstrap example.

Before Bootstrap:

A web page without Bootstrap

After Bootstrap:

A Web page with Bootstrap 4

As you can see, once Bootstrap is added, the Web page instantly gets a new look. You simply reference any of Bootstrap’s reusable CSS classes in the HTML markup. In this example, I used text-center…

<div class="text-center">
   <h1>Hello World</h1>
   <p>
   There's Bootstrap 4 here.
   </p>
</div>

Of course, I could have accomplished the same thing without using Bootstrap. I could have created my own CSS classes for the same effect:

body {font-family: sans-serif;}
.text-center {text-align:center;}

This would have been fine for this simple example. But, for more complex pages would I want to keep writing CSS classes for every style change that is needed? Would that CSS be re-usable, and tested across multiple browsers? Would I want to add CSS definitions to make the design “responsive” for different device widths? The likely answer is “No”, and that’s why I’m here writing about the very popular Bootstrap.

How to Get Started with Bootstrap.

Some people will ask or explain “How to install Bootstrap”. Well, you don’t really “install” it. Using Bootstrap is a matter of referencing the appropriate CSS and/or JS files.

You might have a build process or development environment that utilizes tools such as NPM or Nuget in which case you’ll want read the docs on adding Bootstrap and its’ dependencies.

For this article, you only need to know how to reference Bootstrap on CDN. As shown in the official starter template, the Bootstrap files can be referenced on BootstrapCDN. Just add the link to Bootstrap CSS in the HTML <head> tag for you Web page(s)…

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">

Then, the optional Bootstrap Javascript is added to a <script> tag before the closing </body> tag. Bootstrap 4 also requires jQuery and Popper.js which need to be included before the Bootstrap JS.

<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.0/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>

Quick Start

For this article, I’m going use Bootstrap 4 on Codeply since the Bootstrap files are automatically included in Codeply’s editor. This is the fastest option if you’re looking to quickly get started, learn the basics, and prototype Web designs using Bootstrap.

How to Use Bootstrap CSS.

Earlier, I said “Bootstrap consists of CSS and JavaScript files”. For now I’m going to focus on the CSS part.

The CSS is the most essential part of Bootstrap. The Bootstrap CSS can be used alone, without the Bootstrap JavaScript components. Generally speaking, Bootstrap’s CSS provides two things…

Element Styles
Buttons, fonts, colors, badges, typography, progress bars, alerts, etc…
The Bootstrap Grid
Layout helpers with “rows” and “columns”.

Reminder: If you don’t know what “CSS Specificity” means, or don’t know the difference between using #abc and .abc in CSS, this is NOT the article for you. Instead you should go back to basics. This article will show you “How-to Bootstrap”, but isn’t meant to teach you basic HTML and CSS.

Now I’ll explore all of the “tools” that Bootstrap provides to “make Website development faster and easier”.

How to Use Bootstrap CSS “Styles”.

Remember that simple Bootstrap example I showed you earlier?

Let’s understand what Bootstrap really does to the Web page...

Reboot

First of all, the Bootstrap CSS includes Reboot which “normalizes” the Web page styles. Web browsers have different, somewhat ugly, styles that are applied to Web pages by default.

Since each browser’s defaults are a little different, Bootstrap uses Reboot to override the browser defaults, and provide the same “elegant, consistent baseline” to build upon, regardless of the browser.

This means that if the Web page is viewed on Safari, Chrome, Firefox or IE it will start out with the same baseline CSS styles.

Fonts (Typeface)

Text readability and scale are an important consideration in Web design. Bootstrap took this into consideration when selecting the native font stack for Bootstrap 4:

$font-family-sans-serif:
  // Safari for OS X and iOS (San Francisco)
  -apple-system,
  // Chrome < 56 for OS X (San Francisco)
  BlinkMacSystemFont,
  // Windows
  "Segoe UI",
  // Android
  "Roboto",
  // Basic web fallback
  "Helvetica Neue", Arial, sans-serif,
  // Emoji fonts
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;

The Bootstrap CSS makes the text look like this…

Colors

No one gets too excited about a Web page that lacks color. Color is often used to convey meaning, and highlight specific page content. Bootstrap provides 8 contextual colors that can be easily applied to HTML elements. You’ll see that colors are named to convey meaning.

Additionally, Bootstrap CSS can be used to style and format any page content such as Tables, Forms, Images and Figures.

Components

Take a quick look at the following examples of the Bootstrap Components. These are all the “things” that can be easily “plugged-in” to your Web pages when using Bootstrap…

Badges

Buttons

Usage

Using any of these Bootstrap Components is very easy. It’s just a matter of referencing the appropriate Bootstrap CSS class in the HTML markup. For example, here’s how we use Bootstrap’s primary colored button on a Web page…

The Relationship Between HTML & Bootstrap CSS

As you can see in the picture above, the “Primary” button has a different color than the normal Bootstrap blue color. That’s because this Web page also includes a “theme.css” stylesheet after the “bootstrap.min.css”.

The CSS styles (or rules) defined in “theme.css” are overriding the default Bootstrap CSS styles, such as the definition of the .btn-primary color. I will explain Bootstrap theming and customization a little later in this article.

Let’s look a little closer at how I used Bootstrap’s “Primary” button.
The HTML markup is…

<button type="button" class="btn btn-primary">Primary</button>

So, the buttons’ style comes from the CSS “rules” for the .btn and .btn-primary CSS selectors. Here are the relevant rules in the Bootstrap CSS…

.btn {
  display: inline-block;
  font-weight: 400;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border: 1px solid transparent;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  line-height: 1.5;
  border-radius: 0.25rem;
  transition: color 0.15s ease-in-out, background-color 0.15s ease- in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}.btn-primary {
  color: #fff;
  background-color: #007bff;
  border-color: #007bff;
}

You might be wondering…

_Why does the button have 2 classes: .`btn` + .`btn-primary`?

“Bootstrap’s components are built with a base-modifier class approach. This means the bulk of the styling is contained to a base class (e.g., .btn) while style variations are confined to modifier classes (e.g., .btn-danger).”
— Bootstrap Documentation

This base-modifier approach in Bootstrap’s CSS makes customizing Bootstrap much easier which I will explain later in this article.

Now let’s look at more examples using the Bootstrap Components:

Badges

<span class="badge badge-primary">Badge</span>
<span class="badge badge-pill badge-primary">Rounded Badge</span>

Breadcrumbs

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item"><a href="#">Library</a></li>
    <li class="breadcrumb-item active">Breadcrumb</li>
  </ol>
</nav>

Buttons

<button type="button" class="btn btn-primary btn-lg">Large</button>
<button type="button" class="btn btn-primary btn-sm">Small</button>

Cards

<div class="card">
 <div class="card-body d-flex flex-column align-items-start">
  <h4 class="card-title text-primary">Card Outline</h4>
  <p class="card-text">With supporting text.</p>
  <a href="#" class="btn btn-primary mt-auto">Button</a>
 </div>
</div>

Forms & Inputs

<form role="form">
    <div class="form-group row">
        <label class="col-md-2 col-form-label form-control-label">
            First
        </label>
        <div class="col-md-4">
            <input class="form-control" type="text" value="Jane">
        </div>
        <label class="col-md-1 col-form-label form-control-label">
            Last
        </label>
        <div class="col-md-5">
            <input class="form-control" type="text" value="Bishop">
        </div>
    </div>
    <div class="form-group row">
        <label class="col-lg-2 col-form-label form-control-label">
            Address
        </label>
        <div class="col-lg-10">
            <input class="form-control" type="text">
        </div>
    </div>
    <div class="form-group row">
        <div class="col-lg-12 text-right">
           <input type="button" class="btn btn-primary" value="Submit">
        </div>
    </div>
</form>

Jumbotron

<div class="jumbotron py-4">
    <h1 class="display-3">Hello, world!</h1>
    <p class="lead">
    This is simple jumbotron component...
    </p>
</div>

Pagination

<nav>
  <ul class="pagination">
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
  </ul>
</nav>

Progress

<div class="progress">
  <div class="progress-bar w-25">
  </div>
</div>

_How do I know the correct HTML markup & structure to use for Bootstrap Components?

This is where developing with Bootstrap does require some “leg work”. The CSS toolkit is there at your finger tips, but you do need to know and use the correct HTML structure when utilizing any of the Bootstrap Components.

When using Components like the Button (.btn .btn-primary) shown earlier, the HTML markup is straight-forward.

But, for other Components like the Navbar, Modal or Carousel, determining the correct HTML structure is more complex, and will vary according to use-case and the desired implementation.

When using these more complex Bootstrap Components, you must start with examples. The best resource is the Official Bootstrap Documentation. The docs have many examples, and a “How it Works” section for each Component.

There are also tools like Codeply (that’s the one I wrote), and Bootstrap.build that include example Bootstrap code snippets that you can easily drop in an editor and play around with. For example, here’s the Navbar picked from the Codeply’s Bootstrap 4 Components list…

An easy way to get the Bootstrap example markup

Navbar

While most of the Bootstrap Components are self-explanatory and well-documented, I think the Navbar requires a full explanation. Along with the Grid, the Navbar is one of the most popular Bootstrap Components.

Content, Structure and Alignment

Only use supported content inside the Navbar. The Navbar can contain:

Logo/brand
Nav links, buttons, or dropdowns
Inline forms
Text

Don’t use Grid Rows/Columns inside the Navbar. There’s really no reason to since Utility classes can be used to align Navbar content. For example, here the ml-auto (left auto margin) class is used to align the 2nd Nav to the right:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" 
     data-toggle="collapse" 
     data-target="#nb">
     <span class="navbar-toggler-icon"></span>
 </button>
 <div id="nb" class="navbar-collapse collapse">
   <ul class="navbar-nav">
     <li class="nav-item">
      <a class="nav-link" href="#">Left aligned</a>
     </li>
   </ul>
   <ul class="navbar-nav ml-auto">
     <li class="nav-item">
      <a class="nav-link" href="#">Right aligned</a>
     </li>
  </ul>
 </div>
</nav>

Breakpoints

By default, the Navbar is designed for smaller screen widths on Mobile devices. Therefore the Navbar will stack vertically in a column, unless overridden with a “expand” class make the Navbar to remain horizontal above specified breakpoint widths. There are 5 breakpoints…

navbar-expand = always expanded (remains horizontal)
navbar-expand-sm = expands on sm widths >576px
navbar-expand-md = expands on md widths >768px
navbar-expand-lg = expands on lg widths >992px
navbar-expand-xl = expands on xl widths >1200px

Check out this Codeply to see the different Navbar breakpoints.

Light or Dark Background Color

The Navbar uses the navbar-light and navbar-dark classes to determine the foreground colors of the brand, links and toggler (hamburger) icon. Make sure you use the appropriate classes to make the Navbar content display.

Use navbar-dark to for darker colored backgrounds
Use navbar-light to for lighter colored backgrounds

To give the Navbar a background color, use one of the contextual colors (e.g. bg-primary) otherwise the Navbar is transparent.

Utility Classes

Of course, Bootstrap is the Swiss army knife of the Web design & development world. Bootstrap encompasses many widely used CSS properties in handy “utility” classes. This eliminates the need to write the same CSS over-and-over again to apply styles to different HTML elements. You many know it as D.R.Y.

So instead of writing this…

<style>#mydiv { text-alignment: center }</style>
<div id="mydiv" class="text-center">Centered text</div>

You simply utilize Bootstrap’s text-center alignment class wherever it’s needed…

<div id="mydiv" class="text-center">Centered text</div>

Now that you understand the basics of using Bootstrap’s styling Components, next I will explain Bootstrap’s powerful, responsive Layout Component__ the Grid system.

What’s the Bootstrap “Grid”?

The Bootstrap Grid System is used for layout, specifically Responsive Layouts. Understanding how it works is vital to understanding Bootstrap. The Grid is made up of groupings of Rows & Columns inside 1 or more Containers.

The Bootstrap Grid can be used alone, without the Bootstrap JavaScript and other CSS Components. You just need to download and reference the “bootstrap-grid.css” which contains the Grid and Flexbox classes. More info on only using the Bootstrap Grid CSS is here in the docs.

Here’s the most basic example of using the Grid:

<div class="container"> 
   <div class="row"> 
      <div class="col">I'm your content inside the grid!</div> 
   </div> 
</div>

Which gives us one big “column” horizontally across the viewport…

2 Columns…

<div class="container"> 
   <div class="row"> 
      <div class="col">Left column</div>
      <div class="col">Right column</div> 
   </div> 
</div>

3 Columns…

<div class="container"> 
   <div class="row"> 
      <div class="col">Left column</div>
      <div class="col">Center column</div>
      <div class="col">Right column</div> 
   </div> 
</div>

Note: The light gray border lines around the columns in the examples above were added so that you can visualize the outline of each column. See the working layouts on Codeply.

Basic Grid concepts are quickly understood, but you may be wondering why all of this HTML markup is necessary. You might have some questions like…

__Why do I need a Container?

__Can I make one Column wider than the others?

I will address Grid questions like these in a little while. But, first I want to take a step back to explain something very important about using the Grid. Do you remember the frustrated Bootstrap user earlier that said…

“I’ve tried using Bootstrap, but it seems like getting anything to work is difficult or impossible.”

Trust me. Understanding the “Rules of the Grid” will save you a lot of time and frustration. Read them carefully…

The Rules of the Grid:

Columns must be the immediate child of a Row.
Rows are only used to contain Columns, nothing else.
Rows should be placed inside a Container.

Those rules are very IMPORTANT. The Rows & Columns always work together, and you should never have one without the other.

Bad stuff will happen if you don’t follow those 3 simple Grid rules, exactly. I’ve answered countless Bootstrap questions on Stack Overflow by simply applying those rules. At first this might sound complicated, but it’s really easy once you understand how the Grid works.

How to Use the Bootstrap Grid __The Right Way.

Container

In the basic example before you may have noticed that I used the .container to wrap the .row. The Container is the root (a.k.a: top-level, outermost) element of the Bootstrap Grid.

<div class="container"> 
   <div class="row"> 
      <div class="col">I'm content inside the grid!</div> 
   </div> 
</div>

The Container can be used to hold any elements and content. It’s not only used for the Grid Rows & Columns. For example, this is perfectly valid Bootstrap markup:

<div class="container">
   <h2>My Heading</h2> 
   <div class="row"> 
      <div class="col">I'm content inside the grid!</div> 
   </div> 
</div>

At first, the Container may seem trivial or unnecessary, but it’s very important to control width of the layout. The Container is also used to evenly align the left and right edges of the layout within the browser’s viewport.

FYI: Viewport — The visible area inside the browser window.

Bootstrap 4 has 2 types of Containers. In my examples I used .container, but there is also the full-width .container-fluid. You can use either one:

1 — Fixed-width container to center your layout in the middle:

<div class="container"></div>

2 — Full-width container for a layout the spans the entire width:

<div class="container-fluid"></div>

The .container scales down in width responsively (as the screen width narrows) so that eventually it becomes full-width like the .container-fluid on smaller devices.

Reminder: A Container can be used to contain any content, not just the Grid Rows & Columns. But, if you do utilize the Grid Rows & Columns, the Rows should be placed inside a Container. Try the Container demo on Codeply

When utilizing the Grid, one more Rows will be placed inside the Container. You can have multiple Rows in a Container, and you can have multiple Containers on one page. It all depends on what layout you’re trying to accomplish, but don’t get too concerned with that yet.

It’s important that a Container is used to contain grid Rows (.row).

Rows have a negative left/right margins of -15px. The Container padding of 15px is used to counteract the negative margins of the Row. If you don’t put a Row in a Container, the Row will overflow it’s container, causing an undesirable horizontal scroll.

Rows & Columns

For a while now I’ve wished that the Bootstrap .row wasn’t actually named “row”. The name “row” is often misleading, and obscures the actual purpose of the .row.

When you think “row”, you probably think horizontal line, which is okay, BUT, it’s better to think of the .row simply as a parent of columns.

Think of the Row as a group of Columns

This is because columns inside the .row aren’t always laid-out horizontally across the viewport. Some times we want the column layout to be horizontal, while other times we want the columns to layout vertically down the viewport. The concept of horizontal vs. vertical layout is the essence of Responsive Design. The sole purpose of the “row” is to contain 1 or more “columns”.

DON’T PUT CONTENT DIRECTLY INSIDE THE ROW!

⛔
<div class="row">
   This is very bad, wrong way, no bueno!!
</div><div class="row">
   <p>This is also very bad, the wrong way!!</p>
</div><div class="row">
   <h2>No headings either! This is the wrong way!!</h2>
</div>

Columns, and only columns, are placed inside the Row.

Content is placed inside the Columns.

✅
<div class="row">
   <div class="col">Happy :-) This is the right way.</div>
</div>

It’s also important to mention that the .row is display:flex. As Flexbox children, the Columns in each row are the same height. Because of Flexbox, horizontal and vertical alignment (align right, center, bottom, etc..) is easily accomplished using Bootstrap 4’s Flex and Auto-margin Utility classes.

Now it’s time to look deeper at Rows & Columns, and exactly how they work together. There are different “types” of Columns, and different ways to use them in your layout. They are like magic.

Happiness is, Columns…

Create horizontal divisions across the viewport.
Can have different defined widths.
Can change in width at different screen widths.
Layout horizontally left-to-right, then vertically up-and-down.
Can change position (re-order) relative to siblings in the same row.
Are the same height as other siblings in the same row.
Can “grow” or “shrink” in width.
Can automatically “wrap” or “stack” vertically as needed, or at different screen widths.
Can contain more Rows & Columns__ nesting.

All you need to know about Bootstrap Columns.

Just dont’ forget that columns must be the direct child of a Row.

Columns create horizontal divisions across the viewport. The space between the columns is called the “gutter”.

The classic Bootstrap grid has 12 column units:

Note for Dummies: Columns aren’t actually light pink. That is only used for you to see the left/right boundaries of the Columns. In most cases you’re not going to use all 12 individual columns as illustrated above. Instead you’ll be using some combination of the 12 to contain page content…

So, the columns can be evenly divided up into factors of 12. For example, 6 columns (12/6 = 2):

And, you can do the math…

The columns can be split-up using any part of the 12 units. And, it’s okay to use less than 12. It’s also okay to use more than 12 which I’ll show you later.

With all of this flexibility, the layout possibilities are seemingly endless…

But, the Grid is not always about 12. Thanks to Flexbox, Bootstrap 4 has a new “Auto-layout” Columns. These unit-less columns give you even more flexibility when it comes to designing layouts.

Bootstrap 4 Auto-layout Grid

Now you know how to use Columns to create a horizontal layout. But wait, there’s more! Let’s talk about some fancier things Columns can do.

As you just saw above, Columns can be different widths:

Did you know that, Column width can change depending on screen width?

This is called Responsive Design, and I will tell you exactly how it works a very soon. But, first things first, I need to finish telling you about Columns. Remember before when I said “It’s okay to use more than 12 Columns in a Row”?

Columns in the same Row layout horizontally across, and then stack vertically down. This vertical “stacking” or “wrapping” occurs when the Column units in a single Row exceed 12. This is known as “Column Wrapping”…

Columns in the same Row wrap to the next line every 12 units:

Column width and “wrapping” can be controlled using different Responsive Grid Tiers (a.k.a “Grid Breakpoints”):

Columns can change position (re-order) relative to siblings in the same Row:

Columns can contain baby Rows & Columns. This is called “Nesting”:

Columns can “grow” or “shrink” in width. These are Auto-layout Columns:

How to Responsive Design with Bootstrap.

Grid Tiers, Media Queries and Breakpoints, Oh My!

I’m not done talking about Rows & Columns yet, because they’re the star of the show when it comes to Responsive Design.

It’s all about width.

Bootstrap 4 has 5 Responsive Tiers (a.k.a. “Breakpoints”) that you may have noticed in some of the previous Column examples (ie; col-lg-4, col-md).

**Responsive Breakpoints, based on screen width:**

(xs) — screen width < 576px (This is the “default” tier)
sm — screen width ≥ 576px
md — screen width ≥ 768px
lg— screen width ≥ 992px
xl — screen width ≥ 1200px

Aside: Why did I put (xs) in parenthesis, and not the other breakpoints? Since xs (extra-small) is the default breakpoint, the -xs infix that was used for Bootstrap 3.x is longer used in Bootstrap 4.x. So instead of using col-xs-6, it’s simply col-6.

Bootstrap uses CSS media queries to establish these Responsive Breakpoints. They enable you to control Column behavior at different screen widths.

For example: here are 2 columns, each 50% width:

<div class="container"> 
   <div class="row"> 
      <div class="col-sm-6">Column 1</div>
      <div class="col-sm-6">Column 2</div> 
   </div> 
</div>

The col-sm-6 means use 6 of 12 columns wide (50%), on a typical small device width (greater than or equal to 768 px):

On less than 768px, the 2 columns become 100% width and stack vertically:

This is because (xs) is the default or implied breakpoint. Since I didn’t specify a default Column width, the 50% width was only applied on 768px and wider for the sm breakpoint.

Mobile-first!

Since (xs) is the default breakpoint, the col-12 is implied. So, this:

<div class="col-12 col-sm-6">Column</div>

Works the same way as this:

<div class="col-sm-6">Column</div>

`Larger` breakpoints, override Smaller breakpoints.

xs(default) >
overridden by sm >
overridden by md >
overridden by lg >
overridden by xl

Or, in reverse…
xl > overrides lg > overrides md > overrides sm > overrides (xs)

Therefore, col-sm-6 really means 50% width on small-and-up. For the same column width on all tiers, just set the width for the smallest tier that’s desired. For example:

<div class="col-lg-3 col-md-3 col-sm-3">..</div> is the same as,

<div class="col-sm-3">..</div>

For a different column width on a larger tier, use the appropriate larger breakpoint to override the smaller breakpoint. For example, 3 columns wide on sm, and 4 columns wide on md-and-up:

<div class="col-sm-3 col-md-4">..</div>

The Bootstrap 4 auto-layout columns also work responsively. Because of their simplicity, I prefer them over the classic 12-unit columns. The auto-layout columns are perfect for any layout scenarios where equal-width columns are required. But, don’t forget, the 12-unit columns can be mixed-in as needed.

Take a look at a few auto-layout Grid examples…

3 equal-width columns. The `cols` remain horizontal at all widths, and don’t stack vertically because the xs breakpoint is the default:

<div class="container"> 
   <div class="row"> 
      <div class="col">1</div>
      <div class="col">2</div> 
      <div class="col">3</div>
   </div> 
</div>

3 equal-width columns (responsive). In this example, the `cols` remain horizontal until the sm breakpoint of 576px, and then stack vertically:

<div class="container"> 
   <div class="row"> 
      <div class="col-sm">1</div>
      <div class="col-sm">2</div> 
      <div class="col-sm">3</div>
   </div> 
</div>

Remember, you can switch out sm for whatever breakpoint (md,lg,xl) is needed.

2 columns, left sidebar & right. Here’s an example of combining the classic defined-width columns, with the auto-layout columns. The right column will automatically grow to fill the width. The sidebar will stack on top at the sm breakpoint of 576px:

<div class="container"> 
   <div class="row"> 
      <div class="col-sm-2">sidebar</div>
      <div class="col">main content</div> 
   </div> 
</div>

Key points on Breakpoints and Columns:

Columns will stack vertically (and become full-width) at the smaller screen widths unless you use a specific col-* class in your HTML markup. Use a specific col-* to prevent that vertical stacking.
The smaller grid classes also apply to larger screens unless overridden specifically for larger screen width. So, <div class=”col-md-6"></div> is effectively the same as <div class=”col-md-6 col-lg-6"></div>. Therefore, you only need to use the class for the smallest width you want to support.
Rows are display:flex, and therefore Columns are equal height in the same row. Use auto-margins or Flexbox align-items and justify-content for horizontal or vertical alignment (centering, bottom, right, etc..).

How to Use Bootstrap’s JavaScript.

Next I will focus on the JavaScript part of Bootstrap.

The Bootstrap documentation, has a very large “Components” section that includes most of the stylized CSS Components that I explained before. However, there’s overlap between the Bootstrap CSS and JavaScript Components. CSS is used to style Components, while JavaScript is used to make Components functional.

Some Bootstrap Components only provide CSS-driven formatting and style so they don’t utilize JavaScript. These CSS-only Components were explored earlier in the Bootstrap CSS section: Badges, Breadcrumbs, Buttons, Cards, Form inputs, Jumbotron, Pagination.

But, most Components have JavaScript-driven behaviors:

You might also know that Bootstrap requires jQuery. This is because all of the Bootstrap JavaScript Components are implemented as jQuery Plugins. There are 2 ways to set options for (configure) any of the Bootstrap JavaScript Components.

Data Attributes

The preferred method is using Data Attributes. This method doesn’t require you to add additional JavaScript/jQuery code since the data- attribute can be used directly in the HTML markup. For example,

<div id="myModal" class="modal" data-backdrop="false">
    <div class="modal-dialog">...</div>
</div>

jQuery

The other way to use Bootstrap’s JavaScript Components is jQuery. Use the appropriate jQuery selector the element, and an Object containing the appropriate Options for the Component. The Options for each Component are described in the Bootstrap docs.

$("#myModal").modal({backdrop:false})

As you can see the Component Options align with the data-attributes. Most Components are automatically initialized by simply using the appropriate Bootstrap data-toggle=”…” attribute and classes. Two exceptions are the Popover and Tooltip which must be manually initialized with jQuery. For example:

$(function () {
  $('[data-toggle="popover"]').popover()
  $('[data-toggle="tooltip"]').tooltip()
})

JavaScript Component Usage is clearly described in the Documentation which is the best reference and constantly maintained. Don’t rely on 3rd party tutorials and sites like W3Schools are they tend to get outdated quickly, and you’ll end-up wondering “Why is my Bootstrap not working?”.

____________________

How to Customize Bootstrap.

First I want to address why, you’d want to customize Bootstrap. Developers want to customize Bootstrap for one or all of these reasons:

Change some aspect of the look or styles__ color palette, fonts, border widths, etc..
Change some functional aspect__ change breakpoints, increase the gutter width, or add more grid columns.
Extend Bootstrap__ add new colors, breakpoints and extend other existing Bootstrap classes.

In general, there are 2 methods used to customize Bootstrap:

1. Simple CSS Overrides

For maintainability, CSS customizations should be put in a separate custom.css file, so that the bootstrap.css remains unmodified. The reference to the custom.css follows after the bootstrap.css for the overrides to work...

<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/custom.css">

Just add whatever changes are needed in the custom CSS. For example, say I wanted to remove rounded borders from Cards, Buttons and Form Inputs. I add the CSS rule in the custom.css …

/* remove rounding from cards, buttons and inputs */
.card, .btn, .form-control {
   border-radius: 0;
}

With this simple CSS change, the Cards, Buttons and Form Inputs now have square corners…

Rounded borders are now removed from the buttons

Note: There’s no need to use !important in the custom CSS, unless you're overriding one of the Bootstrap Utility classes. CSS specificity always works for one CSS class to override another.

2. Customize using SASS

If you’re familiar with SASS (and you should be to use this method), you can customize Bootstrap with your own custom.scss. There is a section in the Bootstrap docs that explains this, however the docs don't explain how to utilize existing variables in your custom.scss.

The overrides and “customization” are defined in a custom.scss file (you can name it whatever you want) that is separate from the Bootstrap SASS source files. This way any changes you make don't impact the Bootstrap source, which makes future changes and upgrades much easier.

1. Consider Bootstrap’s SASS folder structure, alongside your custom.scss...

|-- \bootstrap
|   |-- \scss
|   |   |-- \mixins
|   |   |-- \utilities
|   |   |-- bootstrap.scss
|   |   |-- variables.scss
|   |   |-- functions.scss
|   |   |-- ...more bootstrap scss files
|   custom.scss

2. In your custom.scss, import the Bootstrap files that are needed for the overrides. (Usually, this is just variables.scss. In some cases, with more complex cutomizations, you may also need the functions, mixins, and other Bootstrap files.). Make the changes, then @import "bootstrap". It's important to import Bootstrap after the changes.

For example, let’s change the body background-color to light-gray #eeeeee, and change the blue primary contextual color to Bootstrap's $purple variable...

/* custom.scss */    

/* import the necessary Bootstrap files */
@import "bootstrap/functions";
@import "bootstrap/variables";

/* -------begin customization-------- */   

/* simply assign the value */ 
$body-bg: #eeeeee;

/* or, use an existing variable */
$theme-colors: (
  primary: $purple
);/* -------end customization-------- */  

/* finally, import Bootstrap to set the changes! */
@import "bootstrap";

2a (optional). Also, you can extend existing Bootstrap classes after the @import "bootstrap"; to create new custom classes. For example, here is a new .row-dark class that extends (inherits from) the Bootstrap .row class and then add a background-color…

/* optionally create new custom classes from existing classes */
 .row-dark {
    @extend .row;
    background-color: #333333;
    color: #ffffff;
 }

3. Build with SASS. The CSS output will contain the custom overrides! Don’t forget to check the includePaths if your @imports fail. For a full list of variables you can override, see the variables.scss file. There are also these global variables.

Remember, with SASS you must @import “bootstrap” after the customizations in custom.scss to make them work! Once the SASS is compiled to CSS (this is done using a server-side SASS compiler/processor), the resulting CSS is the customized Bootstrap.

In summary, here’s how the SASS customizations work:

1_ First, when the custom.scss file is processed using SASS, the !default values defined in the bootstrap/variables.scss.

2_ Next, our custom values are set, which will override any of the variables that had !default values set in bootstrap/variables.scss.

3_ Finally, Bootstrap is imported (@import "bootstrap") which enables the SASS processor (A.K.A. compiler) to generate all the appropriate CSS using both the Bootstrap defaults and the custom overrides. Customization is important since not everyone wants that overly recognizable Bootstrap look.

____________

How to Create Custom Bootstrap Themes.

As I explained before, customizing Bootstrap is a matter of finding the correct Bootstrap SASS variables to override, and re-building Bootstrap with a SASS processor.

To make Bootstrap customizations easier, I built Themestr.app__ a custom theme builder for Bootstrap 4. If you want to create your own Bootstrap themes, but don’t know SASS, try it.

The whole idea of Themestr.app is to make the Bootstrap customization process easier, and allow you to visualize changes along the way. It includes starter themes to instantly give your projects a unique, “non-Bootstrap” look. You can change the fonts, colors and many other custom variables based on Bootstrap SASS.

When you’re done, download the custom SASS, or the complete CSS for the custom theme. If you choose to use the SASS customization method explained above, what Themestr.app produces is the custom.scss with all of the appropriate SASS variable customizations.

Watch a video: https://www.youtube.com/watch?v=9XVGnyKTDwY

Video: How to create a custom Bootstrap 4 theme

________________

Helpful Bootstrap Tools & Resources

Here are the Bootstrap tools mentioned in the article. You’ll want to bookmark this list of must-have Bootstrap resources.

Official Bootstrap Documentation

Bootstrap 4 Cheatsheet

Bootstrap 4 Customizer

Bootstrap 4 on WDStack

Bootstrap 4 Example Snippets

Take Away

You made it here! Thank you for taking the time to read this. I hope you learned more about “How to” Bootstrap. I really look forward to reading your comments. This article is also published at: bootstrap.themes.guide