Top Concepts Of Bootstrap

Posted By Rudhishthir Prakash | 29-Apr-2018
What is Bootstrap?
At its core, Bootstrap is an open source, Javascript framework that was developed by some folks at Twitter. It is essentially a combined HTML, CSS, and Javascript in order to create this framework that makes building of user interfaces easier. It is often called the front-end framework because it deals almost exclusively with UI and UX elements of your design. It's free and you can download it or use it whenever to create your website. One of the most important things about Bootstrap is how easy it is to get started. Essentially, all you have to do is download a package, include the CSS in your HTML file, and then you are good to go. Another reason that a lot of people use it is that it includes a really good list of plugins or components. So, if you want to add a navigation bar to the top of your website, or if you want to easily create a grid layout that organizes all the information in your page in a clear and concise way, these all are very easy things to do in Bootstrap. The last thing that it includes is base styling for HTML elements. So essentially, buttons, tables, forms, images, all sort of these things are sort of homogenized in their design to create something that is cohesive and easy to read. 
 
How to center an element vertically and horizontally?
Centering elements have always been a bit of rough point for web developers, especially vertical centering. But bootstrap makes it pretty easy.
Example:

<head>
     <link ref="stylesheet" type="text/css" href="css\bootstrap.css">
     <style>
          .center-block{
               float:none !important;
               display: block;
               margin: 0 auto;
          }
     </style>
</head>
<body class="container">
     <div class="row">
          <div class="center-block"> Horizontal Center </div>
     </div>
     <div class="container d-flex h-100">
          <div class="row justify-content-center align-self-center">
               vertical center
          </div>
     </div>
     <div class="container d-flex h-100">
          <div class="row center-block justify-content-center align-self-center">
               true center
          </div>
     </div>
</body>
 
How to maintain a consistent height between all the different columns in bootstrap rows?
Bootstrap implements something called the grid, which makes it very easy to create a grid of content and organize all that content in a very nice, grid-like environment. But sometimes, it does not look as great as we would like it to. That can be done using some styles in our CSS file which are:
.row{
     overflow: hidden;
}
[class *= "col-"]{
     margin-bottom : -99999px;
     margin-bottom : 99999px;
}
What is sr-only?
This tag stands for screen reader only. And this means that that particular piece of content will only display for users that have a screen reader. A screen reader is a technology used to access websites without the use of their vision.

 

Request for Proposal

Recaptcha is required.

Sending message..