Because of the responsive and mobile first nature of Bootstrap, your HTML code should also contain a responsive meta tag in the head section which looks like the following:

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

The mobile first strategy of Bootstrap means that the code is optimized for mobile devices first. CSS media queries are used to add more features for larger screen sizes.

The X-UA-Compatible is another important meta tag which should be added to the head section of your HTML template. It should look like the following:

<meta http-equiv="x-ua-compatible" content="ie=edge">

The preceding meta tag is forcing Internet Explorer to use its latest rendering mode.

Of course you should also link Bootstrap's CSS code to your HTML document, the example template above loads the CSS code from CDN. You can replace the CDN URI with your local copy found in the dist folder as follows:

<link rel="stylesheet" href="dist/css/bootstrap.min.css">

And finally, you should link the JavaScript files at the end of your HTML code for faster loading. Bootstrap's JavaScript plugin requires jQuery, so you have to load jQuery before the plugins. The popover and plugins also require the Tether library which requires jQuery too. Link Tether after jQuery and before the plugins. Your HTML should look like the following:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.1.2/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>

Of course you can link local copies of the files instead of the CDN URIs too.

As you can see in the preceding navbar example, you can construct the navbar with standard HTML elements, such as the <nav>, <a> and <ul>, and Bootstrap's CSS classes.

First inspect the classes added to the <nav> element in the following snippet:

<nav class="navbar navbar-light bg-faded" role="navigation"></nav> 
 
The .nav class sets the basic styles for the navbar.

The .navbar-light and .navbar-dark classes set the color of the texts and links in the navbar. You should use the .navbar-light classes when the background color of the navbar has a light color and the .navbar-dark class for dark colored navbars.

Finally, the .bg-* classes set the background color of the navbar; you can use one of the following classes to do this: .bg-inverse, .bg-faded, .bg-primary, .bg-success, .bg-info, .bg-warning and .bg-danger. These classes are part of Bootstrap's contextual backgrounds and can also be used for other elements and components.

The title or heading of the navbar can be an <a> or <span> element with the .navbar-brand class.

The navbar items are built with an unnumbered list (<url>), wherein each list item (<li>) gets the .nav-item tag and contains an anchor (<a>) tag with the .navbar-link class. Active items not only have the .navbar-link class but also the .active class.

Finally, notice the .sr-only class in the following snippet of the navbar HTML code:

<span class="sr-only">(current)</span> 

HTML elements with the .sr-only class are only available for screen readers.

By default, navbars have rounded corners and are statically placed on the page. Special CSS classes can be used to fix the navbar at the top (.navbar-fixed-top) or bottom (.navbar-fixed-bottom) of the page or remove the rounded corners and set the z-index of the navbar (.nav bar-full). Now, let's complete our navbar by making it responsive. As a bonus, this will test to ensure that Bootstrap's JavaScript plugins are working as they should.

Bootstrap's collapsible plugin allows you to create collapsible content by simply using a <a> and <button> tag to toggle hidden content. You can add the toggle button to your navbar too.

First create your collapsible content and wrap it in a <div class="collapse"> with a unique id as follows:

<div class="collapse" id="collapsiblecontent"> 
Collapsible content 
</div> 

Then create the button with .navbar-toggler class and data-toggle and data-target attributes like that shown in the HTML code shown as follows:

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsiblecontent">
☰;
; </button>

In the above code snippet, the data-toggle attribute should be set to collapseto trigger the collapse plugin, and the data-target attribute should refer to the unique ID set for your collapsible content. Notice that the &#9776HTML code defines the so-called hamburger sign which looks like this:

Now you can bring the preceding codes together and place the button in the navbar. Write down the following HTML in the html/pages/index.html file and inspect the results in your browser:

<header> 
  <div class="collapse" id="collapsiblecontent"> 
    Collapsible content 
  </div> 
  <nav class="navbar navbar-light bg-faded" role="navigation"> 
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsiblecontent"> 
    ☰ 
  </button> 
 </nav> 
</header> 

If you are still running the bootstrap watch command, your browser should automatically reload. The result should look like that shown in the following screenshot:

Click the hamburger and you should find that the collapsible content becomes visible. Now you can be sure that the collapse plugin works as expected. The collapse plugin is also used for a responsive navbar as discussed in the next section.

Content wrapped in the .collapse is hidden by default. By clicking the toggle button, the plugin adds the  .in class which sets the display to visible. The plugin starts with adding a temporary .collapsing class which sets a CSS animation that ensures the transition goes ahead smoothly.

Bootstrap has got four breakpoints at 544, 768, 992 and 1200 pixels by default. At these breakpoints your design may adapt to and target specific devices and viewport sizes. Bootstrap's mobile-first and responsive grid(s) also use these breakpoints. You can read more about the grids later on.

You can use these breakpoints to specify and name the viewport ranges as follows; the extra small (xs) range for portrait phones with a viewport smaller than 544 pixels, the small (sm) range for landscape phones with viewports smaller than 768pixels, the medium (md) range for tablets with viewports smaller than 992pixels, the large (lg) range for desktop with viewports wider than 992pixels, and finally the extra large (xl) range for desktops with a viewport wider than 1200 pixels. The break points are in pixel values as the viewport pixel size does not depend on the font size and modern browsers have already fixed some zooming bugs.

Some people claim em values should be preferred.

Those who still prefer em values over pixel values can simply change the $grid-breakpoints variable declaration in the scss/includes/_variables.scss file. To use em values for media queries, the SCSS code should look like the following:

$grid-breakpoints: ( 
  // Extra small screen / phone 
  xs: 0, 
  // Small screen / phone 
  sm: 34em, // 544px 
  // Medium screen / tablet 
  md: 48em, // 768px 
  // Large screen / desktop 
  lg: 62em, // 992px 
  // Extra large screen / wide desktop 
  xl: 75em //1200px 
); 

Notice that you also have to change the $container-max-widths variable declaration. You should change or modify Bootstrap's variables in the local scss/includes/_variables.scss file, as explained at http://bassjobsen.weblogs.fm/preserve_settings_and_customizations_when_updating_bootstrap/. This will ensure that your changes are not overwritten when updating Bootstrap.

Bootstrap contains some predefined utility classes for faster mobile-friendly development. You can use these classes to show or hide content by device and viewport via media query.

The .hidden-*-up classes, where the asterisks can be replaced with one of the breakpoint shorthand names, hide everything for viewports wider than the given breakpoint. So for instance, the .hidden-md-up class hides an element on medium, large, and extra-large viewports. On the other hand, the .hidden-md-down classes go in the other direction and hide an element when the viewport is smaller than the breakpoint.

Bootstrap's media query ranges, or breakpoints are also available via Sass mixins. The media-breakpoint-up() mixin with one of the breakpoint shorthands as an input parameter sets the min-width value of the media query to hide content for viewports wider than the breakpoint. The max-width of the media query to hide everything for viewports smaller than the breakpoint can be set with the media-breakpoint-down() mixin.

Consider the following SCSS, which can be written down at the end of the  scss/app.scss file:

p {  
font-size: 1.2em;
   @include media-breakpoint-up(md) {
     font-size: 1em;
   }
} 
 
The preceding SCSS code compiles into static CSS code as follows: 
p { 
  font-size: 1.2em; 
} 
 
@media (min-width: 768px) { 
  p { 
    font-size: 1em; 
} 

To completely make our navbar take advantage of Bootstrap's responsive navbar solution, we need to add two new elements, with appropriate classes and data attributes.

We'll begin by adding the toggle button to the navbar code we have used before. The HTML code of your button should look like the following:

 <button class="navbar-toggler hidden-md-up pull-xs-right" type="button" data-toggle="collapse" data-target="#collapsiblecontent"> 
    ☰ 
  </button> 

As you can see in the preceding HTML code, the button has the same data attributes as before, from the collapsible content example, since the responsive navbar uses the collapse plugin too. The button has a .hidden-md-up utility class, as described before, to hide the button for viewports wider than 768px. The .pull-xs-right class ensures that the button floats on the right side of the navbar.

Secondly, you have to add the classes of the element which should collapse. We collapse the <ul> that holds the navigation links. Add the .navbar-toggleable-sm that ensures that the elements do not collapse on viewports larger than the breakpoint, while the .collapse class hides the element by default. Finally, set the unique ID specified on the data-target attribute of the button before. Your HTML code should look like the following now:

 <ul class="nav navbar-nav navbar-toggleable-sm collapse" id="collapsiblecontent"></ul> 

The complete HTML code of your responsive navbar should look as follows. You can add it to the html/pages/index.html file to test it in your browser:

<header role="banner"> 
  <nav class="navbar navbar-light bg-faded" role="navigation"> 
  <a class="navbar-brand" href="index.html">Navbar</a> 
   <button class="navbar-toggler hidden-md-up pull-xs-right" type="button" data-toggle="collapse" data-target="#collapsiblecontent"> 
    ☰ 
  </button> 
  <ul class="nav navbar-nav navbar-toggleable-sm collapse" id="collapsiblecontent"> 
    <li class="nav-item"> 
      <a class="nav-link active" 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> 
    <li class="nav-item"> 
      <a class="nav-link" href="#">About</a> 
    </li> 
  </ul> 
  </nav> 
</header> 

The .navbar-brand and .nav-link classes have a float:left set by default. So that your navigation links should not float for the collapsed version of your navbar, you should undo the float. You can use the following SCSS code to remove the float for smaller viewports, and write it down at the end of the scss/app.sccs file:

.navbar { 
  @include media-breakpoint-down(sm) { 
    .navbar-brand, 
    .nav-item { 
      float: none; 
    } 
  } 
} 

If you run the bootstrap watch command your browser should automatically reload after saving the HTML or Sass code, if not, run the command again. Your browser should show the results at http://localhost:8080/. Click on and drag the edge of the browser window to make the window narrower than 768 pixels.

If all works as it should, you should see a collapsed version of the navbar, as shown in the following screenshot, with the site name or logo and a toggle button:

This is a good sign! Now click on the toggle button, and it should slide open, as shown in the following screenshot:

Success! Congratulations!

When talking about cascade in CSS, there will, no doubt, be a mention of the browser default settings getting a higher precedence than the author's preferred styling. In other words, anything that is not defined by the author will be assigned a default styling set by the browser. The default styling may differ for each browser and this behavior plays a major role in many cross-browser issues. To prevent these sorts of problems, you can perform a CSS reset CSS or HTML resets set a default author style for commonly used HTML elements to make sure that browser default styles do not mess up your pages or render your HTML elements to be different on other browsers.

Bootstrap uses Normalize.css written by Nicholas Galagher. Normalize.css is a modern, HTML5-ready alternative to CSS resets and can be downloaded from http://necolas.github.io/normalize.css/. It lets browsers render all elements more consistently and makes them adhere to modern standards. Together with some other styles, Normalize.css forms the new Reboot module of Bootstrap.

The Reboot module also sets the global box-sizing value from content-box to border-box. The box-sizing property is the one that sets the CSS-box model used for calculating the dimensions of an element. In fact, box-sizing is not new in CSS, but nonetheless, switching your code to box-sizing: border-box will make your work a lot easier. When using the border-box settings, calculation of the width of an element includes border width and padding. So, changing the border width or padding of an element won't break your layouts.

Bootstrap ships with predefined CSS classes for everything. You can build a mobile first responsive grid for your project by only using div elements and the right grid classes. CSS classes for styling other elements and components are available too. Consider the styling of a button in the following HTML code:

<button class="btn btn-warning">Warning!</button> 

Now your button will look like that shown in the preceding screenshot:

You should notice that Bootstrap uses two classes to style a single button. The first .btn class gives the button the general button layout styles. The second .btn-warning class sets the custom colors of the buttons.

You can also use these classes to style a hyperlink (<a>) like a button as follows:

<a class="btn btn-primary" href="#" role="button">Link</a>

You can change Bootstrap's default styles by changing the Sass variables in the scss/_variabels.scss file. Setting the $brand-primary variable to a different color value will change the look of the buttons with the btn-primary class in the preceding example.

You can reuse Bootstrap's Sass mixins to extend Bootstrap with your own custom classes. Sass mixins and variables are available to build your own (semantic) grid, but you can also create a custom button class by using the following SCSS code:

.btn-tomato {
   @include button-variant(white, tomato, white);
}

The preceding SCSS code compiles into the CSS code like the following:

.btn-tomato {
   color: white;
   background-color: tomato;
   border-color: white;
}
.btn-tomato:hover {
   color: white;
   background-color: #ff3814;
   border-color: #e0e0e0;
}
.btn-tomato:focus, .btn-tomato.focus {
   color: white;
   background-color: #ff3814;
   border-color: #e0e0e0;
}
.btn-tomato:active, .btn-tomato.active,
.open > .btn-tomato.dropdown-toggle {
   color: white;
   background-color: #ff3814;
   border-color: #e0e0e0;
   background-image: none;
}
.btn-tomato:active:hover, .btn-tomato:active:focus, .btn-tomato:active.focus, .btn-tomato.active:hover, .btn-tomato.active:focus, .btn-tomato.active.focus,
   .open > .btn-tomato.dropdown-toggle:hover,
   .open > .btn-tomato.dropdown-toggle:focus,
   .open > .btn-tomato.dropdown-toggle.focus {
   color: white;
   background-color: #ef2400;
   border-color: #bfbfbf;
}
.btn-tomato.disabled:focus, .btn-tomato.disabled.focus, .btn-tomato:disabled:focus, .btn-tomato:disabled.focus {
   background-color: tomato;
   border-color: white;
}
.btn-tomato.disabled:hover, .btn-tomato:disabled:hover {
   background-color: tomato;
   border-color: white;
}

Bootstrap's Sass code avoids element and nested selectors; a motivation can be found at http://markdotto.com/2015/07/20/css-nesting/.

Bootstrap itself also avoids the @extend feature of Sass. The risk of using the @extend feature is creating complex unused CSS code. See also Hugo Giraudel's article at https://www.sitepoint.com/avoid-sass-extend/.

Using selector placeholders may reduce this risk, however Bootstrap does not use placeholder selectors. This does not forbid you from customizing and extending Bootstrap by using the @extend feature. You can, for instance, use the @extend feature to make your images responsive by default.

Images are not responsive by default in Bootstrap. To make an image responsive, you'll have to add the .img-fluid class to your <img> element.

You can use the @extend feature to make your images responsive by default by adding the following SCSS code at the end of the scss/app.scss file:

img {
   @extend .img-fluid;
}

Those who think using mixins is better than the @extend feature, should realize that Bootstrap's Sass code does not contain a mixin for making fluid images at all.