My name is Rahul P Augustine, I’m a Frontend Engineer at Logezy Infotech. I’m from Alleppey, Kerala.

This blog is about Bootstrap Basic Informations

What is Responsive Web Design?

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

What is Bootstrap?

  • Bootstrap is a free front-end framework for faster and easier web development
  • Bootstrap includes HTML and CSS based design templates for typography, forms, buttons, tables, navigation, modals, image carousels and many other, as well as optional JavaScript plugins
  • Bootstrap also gives you the ability to easily create responsive designs

Bootstrap History

Bootstrap was developed by Mark Otto and Jacob Thornton at Twitter, and released as an open-source product in August 2011 on GitHub.

How many websites are using Bootstrap?

In 2013, Bootstrap ran 1.6% 

In 2016, Bootstrap ran 15.7%.

In 2018, Bootstrap now runs 18%.

Why Use Bootstrap? Easy to use: Anybody with just basic knowledge of HTML and CSS can start using Bootstrap

Responsive features: Bootstrap’s responsive CSS adjusts to phones, tablets, and desktops

Mobile-first approach: In Bootstrap 3, mobile-first styles are part of the core framework

Browser compatibility: Bootstrap is compatible with all modern browsers (Chrome, Firefox, Internet Explorer, Edge, Safari, and Opera)

Where to Get Bootstrap?

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

Download Bootstrap from getbootstrap.com

Include Bootstrap from a CDNStarter template

Be sure to have your pages set up with the latest design and development standards.

That means using an HTML5 doctype and including a viewport meta tag for proper responsive behaviors.

Put it all together and your pages should look like this:

HTML5 doctype

Bootstrap requires the use of the HTML5 doctype. Without it, you’ll see some funky incomplete styling, but including it shouldn’t cause any considerable hiccups.

Responsive meta tag

Bootstrap is developed mobile-first, a strategy in which we optimize code for mobile devices first and then scale up components as necessary using CSS media queries. To ensure proper rendering and touch zooming for all devices, add the responsive viewport meta tag to your <head>.

The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device).

The initial-scale=1 part sets the initial zoom level when the page is first loaded by the browser.

Layout

Overview

Components and options for laying out your Bootstrap project, including wrapping containers, a powerful grid system, a flexible media object, and responsive utility classes.

Containers

Containers are the most basic layout element in Bootstrap and are required when using our default grid system. Choose from a responsive, fixed-width container (meaning its max-width changes at each breakpoint) or fluid-width (meaning it’s 100% wide all the time).

Responsive breakpoints

Since Bootstrap is developed to be mobile-first, we use a handful of media queries to create sensible breakpoints for our layouts and interfaces. These breakpoints are mostly based on minimum viewport widths and allow us to scale up elements as the viewport changes.

Bootstrap primarily uses the following media query ranges—or breakpoints—in our source Sass files for our layout, grid system, and components.

Bootstrap Grid System

Bootstrap’s grid system allows up to 12 columns across the page.

Grid options

Auto-layout columns

Utilize breakpoint-specific column classes for easy column sizing without an explicit numbered class like .col-sm-6.

Equal-width

For example, here are two grid layouts that apply to every device and viewport, from xs to xl. Add any number of unit-less classes for each breakpoint you need and every column will be the same width.

Setting one column width

Auto-layout for flexbox grid columns also means you can set the width of one column and have the sibling columns automatically resize around it. You may use predefined grid classes (as shown below), grid mixins, or inline widths. Note that the other columns will resize no matter the width of the center column.

Mix and match

Don’t want your columns to simply stack in some grid tiers? Use a combination of different classes for each tier as needed. See the example below for a better idea of how it all works.

Alignment

Use flexbox alignment utilities to vertically and horizontally align columns.

Vertical alignment

Horizontal alignment

Offsetting columns

You can offset grid columns in two ways: our responsive .offset- grid classes and our margin utilities. Grid classes are sized to match columns while margins are more useful for quick layouts where the width of the offset is variable.

Offset classes

Move columns to the right using .offset-md-* classes. These classes increase the left margin of a column by * columns. For example, .offset-md-4 moves

.col-md-4 over four columns.

Margin utilities

With the move to flexbox in v4, you can use margin utilities like .mr-auto to force sibling columns away from one another.

Thank you all for providing this opportunity to share my knowledge.