What is Bootstrap?

• Front-end framework for UIs and Themes.

• Specifically used for User Interfaces

• Bootstrap includes HTML, CSS, Javascript

• Used for building responsive, mobile-first web applications and websites.

• Most popular framework for front-end development.

Bootstrap is a sleek, intuitive, and powerful, mobile-first front-end framework for faster and easier web development. It uses HTML, CSS, and Javascript. Bootstrap was developed by Mark Otto and Jacob Thornton on Twitter. It was released as an open-source product in August 2011 on GitHub.

Why use Bootstrap?

• Increase Development speed.

• Responsiveness, Mobile Friendly.

• Completely customizable.

• Very good documentation and support.

Mobile first approach: Bootstrap 4 framework consists of Mobile first styles throughout the entire library instead of them in separate files.  

Browser Support: It is supported by all popular browsers.  Easy to get started: With just the knowledge of HTML and CSS anyone can get started with Bootstrap. Also, the Bootstrap official site has good documentation.  

Responsive design: Bootstrap's responsive CSS adjusts to Desktops, Tablets, and Mobiles.

• Provides a clean and uniform solution for building an interface for developers.  

• It contains beautiful and functional built-in components which are easy to customize.  

• It also provides web-based customization.  

• And best of all it is an open source.

HTML CSS Components & Helpers

Javascript Widgets & Helpers

Containers Class

Containers are used to pad the content inside of them, and there are two container classes available:

1. The .container class provides a responsive fixed-width container

2. The .container-fluid class provides a full-width container, spanning the entire width of the viewport

Fixed Container

Use the .container class to create a responsive, fixed-width container.

Example:

<div class="container">

<h1>My First Bootstrap Page</h1>

<p>This is some text.</p>

</div>

Fluid Container

Use the .container-fluid class to create a full-width container, that will always span the entire width of the screen (width is always 100%):

Example:

<div class="container-fluid">

  <h1>My First Bootstrap Page</h1>

  <p>This is some text.</p>

</div>

Container Padding

By default, containers have 15px left and right padding, with no top or bottom padding. Therefore, we often use spacing utilities, such as extra padding and margins to make them look even better. For example, .pt-3 means "add a top padding of 16px":

<div class="container pt-3"></div>

Container Border and Color

Other utilities, such as borders and colors, are also often used together with containers:

   <div class="container p-3 my-3 border"></div>

   <div class="container p-3 my-3 bg-dark text-white"></div>

   <div class="container p-3 my-3 bg-primary text-white"></div>

What is Grid?

Bootstrap's grid system is built with Flexbox and allows up to 12 columns across the page.

• If you do not want to use all 12 columns individually, you can group the columns to create wider columns:

• The grid system is responsive, and the columns will re-arrange automatically depending on the screen size.

Grid Classes

The Bootstrap 4 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- (large devices - screen width equal to or greater than 1200px)

 Basic Structure of a Bootstrap 4 Grid

<div class="row">

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

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

</div>

<div class="row">

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

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

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

</div>

<div class="row">

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

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

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

</div>

Three Equal Columns

example shows how to create three equal-width columns, on all devices and screen widths:

<div class="row">

  <div class="col">.col</div>

  <div class="col">.col</div>

  <div class="col">.col</div>

</div>

Responsive Columns

example shows how to create four equal-width columns starting at tablets and scaling to extra-large desktops. 

On mobile phones or screens that are less than 576px wide, the columns will automatically stack on top of each other:

<div class="row">

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

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

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

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

</div>

Two Unequal Responsive Columns

shows how to get two various-width columns starting at tablets and scaling to large extra desktops:

<div class="row">

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

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

</div>

Text Colors

• Bootstrap 4 has some contextual classes that can be used to provide "meaning through colors".

• The classes for text colors are: .text-muted, .text-primary, .text-success, .text-info, .text-warning, .text-danger, .text-secondary, .text-white, .text-dark, .text-body (default body color/often black) and .text-light:

Example

• Contextual text classes can also be used on links, which will add a darker hover color

• You can also add 50% opacity for black or white text with the .text-black-50 or .text-white-50 classes

Background Colors

• The classes for background colors are: .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark and .bg-light.