Bootstrap | CSS | Grid | Example

What is Bootstrap?

Bootstrap is an open source toolkit for developing with HTML, CSS, and JavaScript. It is world’s most popular front-end component library use to build responsive, mobile-first projects on the web.

BootstrapCSS is a free and open-source front-end framework. It is used for designing websites and web applications. It uses design templates for typography, forms, buttons, navigation, tables, models and many more. It also has optional JavaScript plugins. Design templates are based on HTML and CSS. It is used for the purpose of front-end development only.

It provides us the ability to responsive design with ease. Bootstrap4 is the latest version of BootstrapCSS Framework.

bootstrap-png-MSA-Technosoft

Why Bootstrap? | Advantages

Although there are so many UI development frameworks available in market, Bootstrap is most popular now-a-days. There are several benefits that makes this CSS framework so esteemed. Here are the noticeable points:

  • Mobile-First approach
  • Responsiveness
  • Cross-Browser Compatibility
  • Ease of Use
  • Open-Source
  • Sass and flexbox support

History

Bootstrap was developed by Mark Otto and Jacob Thornton at Twitter. It was developed as a framework to encourage consistency across internal tools. So many libraries were used for interface development earlier, which led to inconsistencies and a high maintenance burden. The initial name of this esteemed front-end framework was Twitter Blueprint. It was renamed and released as an open source project on August 19, 2011.

Bootstrap2 was released on January 30, 2012 with a twelve-column responsive grid layout system, inbuilt support for Glyphicons and several new components.

Bootstrap3 was released on August 19, 2013 with flat-design and mobile-first approach.

Bootstrap4 was announced on October 29, 2014. Its alpha version was released on August 19, 2015. Stable version was released on January 18, 2018.

Bootstrap CSS

BootstrapCSS also has a set of style sheets that defines basic styles for all key HTML components. These are used to provide a uniform, modern appearance to text formatting, tables and form elements.

BootstrapCSS makes use of certain HTML elements and CSS properties that require the use of the HTML5 doctype.

As it uses mobile-first approach, add the viewport meta tag to the <head> element, to ensure proper rendering and touch zooming on mobile devices.

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

Add user-scalable = no to the content attribute to disable zooming capabilities on mobile devices.

<meta name = "viewport" content = "width = device-width, initial-scale = 1.0, maximum-scale = 1.0, user-scalable = no">

to make the images responsive by adding a class .img-responsive to the <img> tag. This class applies max-width: 100%; and height: auto; to the image so that it scales nicely to the parent element.

<img src = "MyImagePath" class = "img-responsive" alt = "Responsive image">

Sets background-color: #fff; on the <body> element. For Basic global display. Uses the @font-family-base, @font-size-base, and @line-height-base attributes as the typographic base. Sets the global link color via attribute @link-color and apply link underlines only on :hover for Link style.

Normalize.css is a small CSS file that provides better cross-browser consistency in the default styling of HTML elements.

Use class .container to wrap a page’s content.

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

Bootstrap Grid System

BootstrapCSS includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options, as well as powerful mixins for generating more semantic layouts.

Grid system here allows up to 12 columns across the page. If you do not want to use all 12 column individually, you can group the columns together to create wider columns. Grid system is responsive so, the columns will get re-arranged according to screen size.

bootstrap-grid-system-MSA-Technosoft

The Bootstrap4 grid system supports five different Grid 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)

[NOTE: Each grid class in Bootstrap4 scales up. So, if you wish to set the same widths for col-sm and col-md, you only need to specify col-sm.]

Basic structure of the grid:

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

What’s new in Bootstrap4?

As we all know Bootstrap4 was announced by Mark Otto on October 29, 2014 and the stable version was released in January, 2018. There must be so many changes in Bootstrap4. Let us focus on the new things of this latest version of Bootstrap:

  • Switched to Sass. Bootstrap 3 was using Less.
  • Dropped support for IE8, IE9, and iOS 6.
  • Added flexbox support and then dropped non-flexbox support.
  • Switched from pixels to root ems.
  • Increased global font-size from 14px to 16px.
  • Dropped the panel, thumbnail, and well components in favour of cards.
  • Dropped the Glyphicons icon font.
  • Dropped the pager component.
  • Rewrote almost all components, jQuery plugins and documentation.

Get Started with Bootstrap

Add Bootstrap CDN to quickly add bootstrap to your project. Copy CSS link to head section of your page:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

Many bootstrap components require JavaScript. Use the following code within <script> tag under <body> section:

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>

Use HTML5 doctype and viewport Meta tag for proper responsive behaviours.

Example

<!doctype html>
<html lang="en">
<head>

 <!-- Required meta tags -->

 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

 <!-- Bootstrap CSS -->

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
 <title>My First Bootstrap</title>
</head>

<body>
 <h1>Hello, world! This is my first Bootstrap page.</h1>

 <!-- Optional JavaScript -->
 <!-- jQuery first, then Popper.js, then Bootstrap JS -->

 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
</body>
</html>

For more updated technology related blogs, don’t forget to visit our Tech-Blogs.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.