Learning Bootstrap

Bootstrap, is a front-end framework that helps you build mobile responsive websites more quickly and easily. First developed by Twitter, it now powers anything from web applications to WordPress themes. The framework is completely free, versatile, and intuitive.

With Bootstrap, you can conjure complex web pages from standard HTML and customize them to your needs. It also comes with additional functionality such as carousels, buttons, popups, and more.

Last, but not least, Bootstrap gives you a lot of shortcuts for creating web pages that will save you time and energy. All you need is a basic understanding of HTML and CSS to create web pages that are responsive, mobile-first, and compatible with all modern browsers.

And just before we get started on learning this framework, for your k nowledge, the frame work is being used by companies like LinkedIn, Spotify and off-course by Interns.School as well.

Though there are number of versions available of bootstrap, but for this tutorial, we have used Bootstrap 4. The current tutorial will explore the all the basic aspects of how to use bootstrap while more can be found at getbootstrap.com

Why to use Bootstrap?

It gives user the ability to easily create responsive designs (i.e Responsive web design is about creating web sites which automatically adjust themselves to look good on all devices, from small phones to large desktops).
It is supported by all popular browsers and its responsive CSS adjusts to Desktops, Tablets and Mobiles.
With just the knowledge of HTML and CSS anyone can get started with Bootstrap.

Environment Setup

There are 2 ways through which you can start working with Bootstrap, which are listed and explained below:

Using CDN to Include Bootstrap

If you don’t want to download or host Bootstrap, you can add it from CDN(Content Delivery network).

CDN support for Bootstrap’s CSS and Javascript provided by MaxCDN is given below:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

Downloading Bootstrap

If you want to download and host Bootstrap instead of using CDN, you can do that by downloading the files from Bootstrap website. Follow the instructions given in the link.

Bootstrap Grid System

Bootstrap grid is built with flexbox and allows up to 12 columns across the page. provides responsive, mobile first fluid grid system which scales the columns as the device or viewport size increases.

Working of Grid System

Rows must be placed within a .container class for proper alignment and padding.
For responsive width use .container class and for fixed width across all viewport, use the .container-fluid class.
Use rows to create horizontal groups of columns.
Content should be placed within the columns, and only columns may be the immediate children of rows.
Columns contain padding for controlling the space between them.
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.
You can make grid system responsive by using five grid breakpoints such as extra small, small, medium, large, and extra large.
Predefined grid classes like .col-4 are available for quickly making grid layouts. LESS mixins can also be used for more semantic layouts.

Bootstrap’s Grid system allows 12 columns across the page that will rearrange according to device screen size.

Grid Classes

The Bootstrap grid system has five classes:

.col- (extra small devices – screen width less than 576px)
.col-sm- (small devices – screen width equal to or greater than 576px)
.col-md- (medium devices – screen width equal to or greater than 768px)
.col-lg- (large devices – screen width equal to or greater than 992px)
.col-xl- (xlarge devices – screen width equal to or greater than 1200px)

Class	Usage	Screen Width
.col-	extra small devices	<576px
.col-sm-	small devices	=>576px
.col-md-	medium devices	=>768px
.col-lg-	large devices	=> 992px
.col-xl-	xlarge devices	=>1200px

Note: You do not need to remember them all, just need to put into practice and you will understand it all. To make it easy, we will recall the text during the challenges as well.

Basic Grid Structure

Before proceeding further and having a look on how basic grid structure works, let’s understand few points .

While making your own grid using Bootstrap 4, you have 2 options:

Adjusting column width yourself

<div class = "container">
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
</div>

Understanding the syntax

<div class = “container”>	Rows must be placed in .container(fixed-width) or .container-fluid(full-width) .This will add proper padding and alignment to rows and cols.
<div class=”row”>	Use predefined class “row” to create horizontal columns
<div class=”col--”></div>	Only Columns should be descendants of class “row” (col is also a predefined class) Here First star represents classes (sm, md, etc.)and they provide responsiveness to columns. Second star represents a number (sum of numbers should always add up to 12) All cols under each row should belong to same class

For example:

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

Automatic Layout Handling

Bootstrap will automatically handle the column width depending upon the number of cols added., You don’t need to specify column width by numbers.

For example:

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

Now, have a look on basic Grid Structure

See the Pen <a href="https://codepen.io/internsch/pen/oNwXqjW"> Basic Grid Structure</a> by Interns School (<a href="https://codepen.io/internsch">@internsch</a>) on <a href="https://codepen.io">CodePen</a>.

CSS Overview

Some key element of BootStrap infrastructure (HTML and CSS) are listed below:

For using Bootstrap, you have to use HTML5-doctype as Bootstrap uses HTML and CSS basic properties.
Since Bootstrap is Mobile first, in order to have proper rendering and touch zooming on mobile devices, add the following metatag in <head> of your HTML document.

<meta name = "viewport" content = "width = device-width, initial-scale = 1.0">

To disable zooming, add user-scalable = no in the content of metatag. But it’s not recommended as it gives user more of a native app experience.
In order to have better cross-browser consistency in default styling of HTML elements, Bootstrap uses Normalize.css – a more advanced alternative to CSS resets.
In Bootstrap, page content is wrapped in .container class. If you check .container class in Bootstrap.css file, it will be as follows:

.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

Note: Containers are not nestable

To add responsiveness and to modify container class accordingly to render the grid system properly, bootstrap uses media queries for containers with width. If you check bootstrap.css file, you will find the below code snippet to ensure this functionality:

@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}

Bootstrap Content

Bootstrap 4 uses collection of content methods for displaying the text, blocks of code, responsive images, data in a tabular format etc. on the web page. In the current section, we will touch in base typography and for easiness have separate sections for table, images and forms.

Typography

The typography feature creates headings, paragraphs, lists and other inline elements. It specifies how text elements should be rendered on the web page.

Let’s look at how some of the HTML elements can be twisted using bootstrap.

Default Settings

The Bootstrap 4 uses a default font-size of 16px and the line-height of 1.5. The default font-family is “Helvetica Neue”, Helvetica, Arial, sans-serif. In addition, all elements have margin-top: 0 and margin-bottom: 1rem (16px by default). To summarize the Bootstrap 4 default settings:

font-size: 16px
line-height: 1.5
font-family : “Helvetica Neue”, Helvetica, Arial, sans-serif.
elements have margin-top: 0 and margin-bottom: 1rem (16px by default)

HTML Headings <h1>..<h6>

Bootstrap 4 headings are styled with bolder font-weight and increased font-size as shown below:
 See the Pen <a href="https://codepen.io/internsch/pen/mdwJxOx"> Bootstrap 4 Headings</a> by Interns School (<a href="https://codepen.io/internsch">@internsch</a>) on <a href="https://codepen.io">CodePen</a>.

Display Headings

Bootstrap Display headings have larger font-size and lighter font-weight. There are 4 display classes .display-1, .display-2, .display-3, .display-4 to select from. All the 4 classes Display Headings are shown below:
 See the Pen <a href="https://codepen.io/internsch/pen/VwWLXWy"> Bootstrap 4 – Display Headings</a> by Interns School (<a href="https://codepen.io/internsch">@internsch</a>) on <a href="https://codepen.io">CodePen</a>.

Code Snippet

Code element is used to add inline code segments and Bootstrap 4 styles code element in following way:
 See the Pen <a href="https://codepen.io/internsch/pen/yLXNjLa"> Bootstrap 4 – Code Element</a> by Interns School (<a href="https://codepen.io/internsch">@internsch</a>) on <a href="https://codepen.io">CodePen</a>.

Tables

In Bootstrap .table class is used to add basic styles to table i.e. light padding and horizontal dividers as shown below:

See the Pen <a href="https://codepen.io/internsch/pen/OJgVZbJ"> Bootstrap 4 – Class Table</a> by Interns School (<a href="https://codepen.io/internsch">@internsch</a>) on <a href="https://codepen.io">CodePen</a>.

Other properties of class table are defined in following table:

Class Property	Usage
.table-striped	To add zebra-stripes to a table
.table-bordered	To add borders on all sides of the table and cells
.table-hover	To add a hover effect (grey background color) on table rows
.table-dark	To add a black background to the table
.table-borderless	To remove borders from the table
.thead-dark	To add a black background to table headers
.thead-light	To add a grey background to table headers
.table-sm	To make the table smaller by cutting cell padding in half
.table-responsive	To add a scrollbar to the table when table width is larger than screen width
.table-responsive-sm	To add a scrollbar to the table when screen width is < 576px
.table-responsive-md	To add a scrollbar to the table when screen width is < 768px
.table-responsive-lg	To add a scrollbar to the table when screen width is < 992px
.table-responsive-xl	To add a scrollbar to the table when screen width is < 1200px

An Example using some of the class table properties(Together) is shown below:

See the Pen <a href="https://codepen.io/internsch/pen/oNwXMVq"> Bootstrap 4 – Class Table Properties Example</a> by Interns School (<a href="https://codepen.io/internsch">@internsch</a>) on <a href="https://codepen.io">CodePen</a>.

Contextual Classes

If you want to color the table cells, rows or whole table depending on certain criteria contextual class usage, you can use contextual classes.

Class Property	Color	Description
.table-primary	Blue	To Indicate an important action
.table-success	Green	To Indicate a successful or positive action
.table-danger	Red	To Indicate a dangerous or potentially negative action
.table-info	Light blue	To Indicate a neutral informative change or action
.table-warning	Orange	To Indicate a warning that might need attention
.table-active	Grey	It applies the hover color to the table row or table cell
.table-secondary	Grey	To Indicate a slightly less important action
.table-light	Light Grey	Light grey table or table row background

An example of contextual classes is shown below:
 See the Pen <a href="https://codepen.io/internsch/pen/mdwJGMN"> Contextual Classes Example</a> by Interns School (<a href="https://codepen.io/internsch">@internsch</a>) on <a href="https://codepen.io">CodePen</a>.

Forms

In Bootstrap 4, there are 2 types of forms:

Stacked form (full-width) – All elements are stacked one above other in a vertical manner
Inline form – All elements are left-aligned and are in-lined horizontally

Note:

All textual <input>, <textarea>, and <select> elements with class .form-control have a width of 100%.

Some important points of Bootstrap forms are mentioned below:

To ensure proper margins in stacked form, you can add wrapper element with .form-group around each from control
You have to add class .form-inline to the <form> element in order to have an inline form.
To get a better look of inline form (not a compressed form), then you can use space utilities provided by Bootstrap.
- To add a right margin to each input element on all devices, use .mr-sm-2
- To not let the input break down in an irregular fashion, in case of less screen width , You can add margin-bottom class .mb-2 to style it.
To control the width and alignment of form input , you can use .col added in .row container OR you can override default margins by using .from-row container instead of .row.
Forms validation can be done in 2 ways i.e. using .needs-validation (To provide validation feedback before submitting the form) or .was-validated (To provide validation feedback after submitting the form). For the second one you need to add some jQuery.
You can also add some lines for valid and invalid feedback to tell users what’s missing using .valid-feedback or .invalid-feedback

Example

Stacked form (full-width)

See the Pen <a href="https://codepen.io/internsch/pen/RwgWGgd"> Stacked Form with Validation</a> by Interns School (<a href="https://codepen.io/internsch">@internsch</a>) on <a href="https://codepen.io">CodePen</a>.

Inline form

See the Pen <a href="https://codepen.io/internsch/pen/dyRYOVo"> In-line Form </a> by Interns School (<a href="https://codepen.io/internsch">@internsch</a>) on <a href="https://codepen.io">CodePen</a>.

Buttons

Different features of Buttons provided by Bootstrap 4 are discussed below:

Button Styles

Bootstrap 4 provides different styles of Buttons as shown below:

Class Property	Button Name – Color
.btn	Basic – No Color
.btn btn-primary	Primary – Blue
.btn btn-success	Success – Green
.btn btn-danger	Danger – Red
.btn btn-info	Info – Light blue
.btn btn-warning	Warning – Orange
.btn btn-dark	Dark – Black
.btn btn-secondary	Secondary – Grey
.btn btn-light	Light – Light Grey
.btn btn-link	Link Button – No color(Link is Colored Blue)

Note: Button classes can also be used in <a> and <input elements>

Button Outline

Bootstrap 4 also provides different border outlined buttons as shown below:

Class Property	Button Name – Border Color
.btn btn-outline-primary	Primary – Blue
.btn btn-outline-success	Success – Green
.btn btn-outline-danger	Danger – Red
.btn btn-outline-info	Info – Light blue
.btn btn-outline-warning	Warning – Orange
.btn btn-outline-dark	Dark – Black
.btn btn-outline-secondary	Secondary – Grey
.btn btn-outline-light	Light – Light Grey

Other Features of Bootstrap 4 Buttons

Some other features of Button provided by bootstrap 4 are listed below:

You can use .btn-lg and .btn-sm to have large and small buttons other than default-size buttons.
You can use btn.block to create a block level button that spans the entire width of the parent element.
You can have active(Button will appear Pressed) and disabled button(Button will be unclickable) by using .active and .disabled attributes.
You can also add spinners to buttons by spanning .spinner class attributes in the button element.

Example: An example showing different features of .btn class is shown below:
 See the Pen <a href="https://codepen.io/internsch/pen/powjPmQ"> Bootstrap Buttons</a> by Interns School (<a href="https://codepen.io/internsch">@internsch</a>) on <a href="https://codepen.io">CodePen</a>.

Images

Different features of Images provided by Bootstrap 4 are discussed below:

Image shapes

Bootstrap 4 provides 3 different shapes of images:

Image with Rounded Corner: To add rounded corners to the image, use .rounded class.
Shape Image to Circle: To have an image in circle shape, use .rounded-circle class.
Thumbnail Image: To have an image in Thumbnail format, use .img-thumbnail class.

Image Alignment

Images can be aligned in 3 ways:

Left Alignment: For Left alignment, use .float-left class.
Right Alignment: For Right alignment, use .float-right class.
Centre Alignment: For center alignment, use .mx-auto and .d-block class.

Responsive Images

If you want to automatically adjust images according to screen size i.e. making an image responsive, use .img-fluid class. It will apply an image width of 100% and auto height.

See the Pen <a href="https://codepen.io/internsch/pen/PojPxMX"> Bootstrap 4 -Images</a> by Interns School (<a href="https://codepen.io/internsch">@internsch</a>) on <a href="https://codepen.io">CodePen</a>.

Helper Classes

There are many helper classes available in Bootstrap 4 that can be used in different scenarios so they are worth mentioning.

Text

These are the available classes that can be used to make your text look in a certain way. Here is the visualization of available classes.

Class Property	Text Appearance
.text-left	Left aligned text on all viewport sizes.
.text-center	Center aligned text on all viewport sizes.
.text-right	Right aligned text on all viewport sizes.
.text-sm-left	Left aligned text on viewports sized SM (small) or wider.
.text-md-left	Left aligned text on viewports sized MD (medium) or wider.
.text-lg-left	Left aligned text on viewports sized LG (large) or wider.
.text-xl-left	Left aligned text on viewports sized XL (extra-large) or wider.
.text-lowercase	Lowercased text.
.text-uppercase	Uppercased text.
.text-capitalize	Capitalized text.
.font-weight-bold	Bold text.
.font-weight-normal	Normal weight text.
.font-weight-light	Light weight text.
.font-italic	Italic text.

Some Other Helper Classes

Class	Description
.pull-left	To float an element to the left
.pull-right	To float an element to the right
.center-block	Sets an element to: *display:block* *margin-right:auto* *margin-left:auto*
.clearfix	To clear float
.show	To force an element to get show by setting: *display:block*
.hidden	Forces an element to be hidden by setting: *display:none*
.invisible	To force an element to be invisible by setting: *visibility:hidden* (Space taken by this element will still be shown, even if it’s invisible)
.sr-only	Element is only shown to screen readers and is hidden from all other devices
.sr-only-focusable	To show the element (After Combine with .sr-only )again when it is focused (e.g. by a keyboard-only user)
.text-hide	To replace an element’s text content with a background image
.close	To Indicate a close icon
.caret	Indicates dropdown functionality (will reverse automatically in drop up menus)

Responsive Utilities

Apart from the above Helper classes, Bootstrap 4 provides some other utilities for showing and hiding content by device via media query, listed in table below:

Classes	Function
.visible-xs	Extra small (<768px) visible
.visible-sm	Small (>=768 px) visible
.visible-md	Medium (>=992 px) visible
.visible-lg	Larger (>=1200 px) visible
.hidden-xs	Extra small (<768px) hidden
.hidden-sm	Small (>=768 px) hidden
.hidden-md	Medium (>=992 px) hidden
.hidden-lg	Medium (>=1200 px) hidden
.visible-print	Yes Visible
.hidden-print	Visible only to browsers, not to print.

Want more?

Bootstrap Website – https://getbootstrap.com/
Learn Bootstrap in 5 minutes – https://www.youtube.com/watch?v=yalxT0PEx8c