Limited Time Offer!

For Less Than the Cost of a Starbucks Coffee, Access All DevOpsSchool Videos on YouTube Unlimitedly.
Master DevOps, SRE, DevSecOps Skills!

Enroll Now
Bootstrap

Bootstrap Tutorial

November 1, 2019 comments off

What is Bootstrap?

Bootstrap is a open-source framework for building websites and web applications. That means the bootstrap is fully responsive framework and support any devices which contains HTML, CSS and JavaScript. With the help of bootstrap we can create a forms, buttons,navigation and other interface components.

Why Use Bootstrap?

  • Advantages of using bootstrap
  • Supports responsible design
  • Saves lot of development time
  • Consistency
  • Customization
  • Support

There are two ways to start using Bootstrap 4 on your own web site.

You can:

  • Include Bootstrap 4 from a CDN
  • Download Bootstrap 4 from getbootstrap.com

How to download and setup

If you want to download and host Bootstrap 4 yourself, go to https://getbootstrap.com/, and follow the instructions there.

What is Responsive Web Design?

Responsive web design is about creating web sites which automatically adjust themselves to look good on all devices, from small phones to large desktops.

What is Container and container-fluid

  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

Container Example:

<div class=”container”>
  <h1>My First Bootstrap Page</h1>
  <p>This is some text.</p>
</div>

Container Fluid Example:

<div class=”container-fluid”>
  <h1>My First Bootstrap Page</h1>
  <p>This is some text.</p>
</div>

Bootstrap 4 Grid System

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 together to create wider columns.

Example

Three equal width columns

Responsive Columns

Two Unequal Responsive Columns

Bootstrap 4 Text/Typography

Bootstrap Heading

Bootstrap 4 styles HTML headings (h1 to h6) with a bolder font-weight and an increased font-size.

Display Headings

Display headings are used to stand out more than normal headings (larger font-size and lighter font-weight), and there are four classes to choose from: .display-1, .display-2, .display-3, .display-4.

Small heading

The small element is used to create a lighter, secondary text in any heading.

<Mark>

Bootstrap 4 will style the HTML element with a yellow background color and some padding.

<abbr>

The abbr element is used to mark up an abbreviation or acronym.

<blockquote>

The blockquote element is used to present content from another source.

<dl>

The dl element indicates a description list.

<code>

The following HTML elements: span, section, and div defines a section in a document.

<kkd>

To indicate input that is typically entered via the keyboard, use the kbd element.

<pre>

For multiple lines of code, use the pre element.

Rajesh Kumar
Follow me
Latest posts by Rajesh Kumar (see all)