Concepts of Bootstrap-4

Image for post
Image for post

📄 Table of contents

  • What is Bootstrap
  • Get Started with Bootstrap
  • Bootstrap CSS
  • Bootstrap v3.0 vs v4.0
  • Rules of the Grid

Bootstrap

Bootstrap is a powerful and popular mobile first front-end framework for building responsive mobile first sites on the web by using HTML, CSS and JS framework.

It contains mobile first styles throughout the entire library, instead of using them in the separate files.

The last stable release of Bootstrap v3.3.7 was in July 2016 and in August 2017, Bootstrap 4.0.0 beta version released.

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 in below order:

<!-- Bootstrap CSS -->
<!-- jQuery first -->
<!-- Popper.js -->
<!-- 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>

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…

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

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.

Difference between Bootstrap 3 & 4.0 version:

The following table shows differences in Bootstrap 3 and Bootstrap 4

Image for post
Image for post
  • Simply adding col means it is defined for extra small (xs) devices and above…such as <div class= “col adiv”> </div>
  • while nesting of rows is possible…it is mandatory that any column (col-md-*) parent must be of class=”row”.
  • Bootstrap 4 grid system built with flexbox which is fully responsive and scales up to 12 columns (according to the size of device) by creating layout with rows and columns across the page. If you place more than 12 columns in a row, then the columns will be placed in a new line.
  • Columns create gaps between column content via padding. Therefore, you can remove the margin from rows and padding from columns with .no-gutters class on the row.

display: flex

flexbox is the foundation of Bootstrap 3/4 grid system.

converts all block level elements (which are stacked from top to bottom) to side by side (left to right in a row) …means kinda converting block to inline level layout.

Simply put, display: flex is basically saying display: flex && flex-direction: row;

display: flex && flex-direction: column will again stack from top to bottom.

_____________________________________________

The Rules of the Grid:

  1. Rows should be placed inside a Container.

2. Rows are only used to contain Columns, nothing else.

3. Columns must be the immediate child of a Row.

The Rules of the Nested-Grid:

Image for post
Image for post
Image for post
Image for post

clear the floats:

Elements after a floating element will flow around it. Use the “clearfix” hack to fix the problem:

Without Clearfix

Image for post
Image for post

With Clearfix

Image for post
Image for post
  • clear: both (traditional way before bootstrap 3/4)
  • <div class=”clearfix”></div>

___________________________________________________________________

How to Use the Bootstrap Grid __The Right Way.

When utilizing the Grid, one or more Rows will be placed inside the Container i.e., you can have multiple Rows in a Container, and you can have multiple Containers on one page.

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>

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

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

Think of the Row as a group of Columns and not a horizontal line.

The space between the columns is called the “gutter.

The classic Bootstrap grid has 12 column units. 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.

DON’T PUT CONTENT DIRECTLY INSIDE THE ROW!

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>

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

Grid Options

The following table summarizes aspects of how Bootstrap 4 grid system works across multiple devices −

xs => Extra small devices (<576px)  => .col-sm => Small devices (≥576px) => .col-sm-md => Medium devices (≥768px) => .col-md-lg => Large devices (≥992px) => .col-lg-xl => Extra Large devices (≥1200px) => .col-xl-

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.

Also, the order of the these classes: col-sm , col-lg ,col-md & col-xs don’t matter.

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.

xl > overrides lg > overrides md > overrides sm > overrides (xs)

For example:

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

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

Also, 3 columns wide on sm, and 4 columns wide on md-and-up:

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

Img-responsive

  • using Bootstrap 3 => img-responsive
  • using Bootstrap 4 => img-fluid / img-thumbnail

The .img-fluid class applies max-width: 100%; and height: auto; to the image.

The .img-thumbnail class shapes the image to a thumbnail (bordered):

  • using CSS =>

→ If you want the image to scale both up and down on responsiveness, set the CSS width property to 100% and height to auto:

.responsive {
width: 100%;
height: auto;
}

However, If you want an image to scale down if it has to, but never scale up to be larger than its original size, use max-width: 100%:

.responsive {
max-width: 100%;
height: auto;
}

To center an image, set left and right margin to auto and make it into a block element:

.center {
display: block;
margin: auto;
width: 50%;
}

Note that it CANNOT be centered if the width is set to 100% (full-width).

1 rem = 16px
3 rem = 48px

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.

Experience with Front-end Technologies and MERN / MEAN Stack. Working on all Major UI Frameworks like React, Angular.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store