Take your web development skills to a whole new level with BOOTSTRAP

Bootstrap Logo

Bootstrap is a free and open-source CSS framework authored by Mark Otto and Jacob Thornton in 2011. It is directed at responsive, mobile-first front-end web development.

It contains CSS- and (optionally) JavaScript-based design templates for typography, forms, buttons, navigation, and other interface components which reduces your workload hugely.

Bootstrap is starred more than 140,000 times on Github!, so what more will convince you to use Bootstrap than this.

Another cool thing about Bootstrap is it is free to download and use!.

What is Bootstrap?

• Bootstrap is a free, faster, and simpler front-end framework for web development.
• Bootstrap gives users the ability to create responsive designs easily.
• Bootstrap has many HTML and CSS based templates for typography, image carousels, tables, forms, buttons, navigation, modals, etc., and optional JavaScript plugins.

Why use Bootstrap?

• Browser Compatible; compatible with all commonly used browsers like Chrome, Firefox, Internet Explorer, Microsoft Edge, Safari, and Opera.
• Easy to use; can use with a basic knowledge of HTML and CSS.
• Responsive; adjusts to smartphones, tablets, and Desktops.

Where to get Bootstrap?

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

Bootstrap 4 is the newest version of Bootstrap. It comes with new components, faster stylesheet and more responsiveness.

Now let’s take a look at basic operations done through Bootstrap.

How to create a basic Web page using Bootstrap

• First of all, you need to remember to include HTML5 doctype at the beginning of the code. This is because Bootstrap uses HTML elements and CSS properties.
• You need to add the following code snippet to make the web page responsive to all mobile devices.

Code snippet to make the web page mobile-responsive

• Bootstrap requires containers to wrap site contents. There are two kinds of containers.

Container type

.container class provides with a responsive fixed width container.

Container type

.container-fluid class provides with a full width container.

Now let’s take a look at special features in Bootstrap. I will here describe a few of them.

Bootstrap Text/Typography

Bootstrap uses a default font-size of 16px, and its line-height is 1.5.

The default font-family is “Helvetica Neue”, Helvetica, Arial, sans-serif.

In addition, all <p> elements have margin-top: 0 and margin-bottom: 1rem (16px by default).

Headings

Bootstrap styles the HTML h tags (<h1> to <h6>). This style includes a bold font-weight and increase the font-size.

Display Headings

These headings stand out more than normal headings. Threr are 4 display heading classes.

1. .display-1
2. .display-2
3. .display-3
4. .display-4

Other

<small> — This will add a lighter, second text in any heading to the HTML element.

<mark> — This will add a yellow background color and some padding to the HTML element.

<abbr> — This will style the HTML element with a dotted border to bottom.

<blockqoute> — If you add a .blockquote class to a <blockquote> when quoting blocks from other contents.

There are many other components that will style typologies in Bootstrap. Some of them are <dl>, <code>, <kbd>, <pre>, etc.

Bootstrap Grid system

Bootstrap’s grid system is made with 12 columns across the page.

You can use all the 12 columns or you can use a few of them. However, you should make sure that the sum of the columns adds up to 12 or less, not more than 12.

As this grid system is responsive, when the screen size is changed it will adjust to the screen size automatically.

Ex: How 12 columns can be used.

Bootstrap grids have five classes considering device size. They are as follows,

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

These classes can be combined to create more flexible layouts.

Also, you can create equal-sized columns, responsive columns, etc. using Bootstrap.

Bootstrap Images

Image Shapes

1. .rounded — This class adds rounded corners to the image.
2. .rounded-circle — This class shapes the image into a circle.
3. .img-thumbnail — This class will shape the image into a thumbnail.

Image Aligning

1. .float-right — This class float the image to the right.
2. .float-left — This class float the image to the left.

In addition to these, you can create centered images, responsive images, etc. using Bootstrap.

Bootstrap Jumbotron

Jumbotron is a big grey colored box used to call extra attention to a certain content.

To include a jumbotron you can do as follows.

Code snippet to include a jumbotron.

If you want a full-width jumbotron without rounded borders, add the .jumbotron-fluid class and a .container or .container-fluid inside of it.

There are many specifications in Bootstrap like Colors, Tables, Badges, Alerts, Buttons, Carousels, Modals, etc.

Let’s discuss these topics in my upcoming publications.

Hope you enjoyed this.