Few Mandatory Things to Know for Using Bootstrap

Introduction

Now a days, bootstrap is the one of the commonly using CSS, JS frameworks for creating websites and web applications. It is a collection of tools that contains HTML, CSS-based design templates and JavaScript. Bootstrap provides ready to use codes. So developers can save design time and coding time. One of the main features of Bootstrap is that it supports responsive design. That means the page design changes dynamically based on the device display size. Also Bootstrap is an open source. In this section, I am illustrating 5 important tips we have to know about Bootstrap.

1. Know Use of 'row', 'container' and 'container-fluid'

From the below code, you can identify the difference between 'row' and 'container':

.row {
  margin-right: -15px;
  margin-left: -15px;
}

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

For detailed article, click here.

2. Avoid Explicit Pixel Sizing

For getting the full advantage of bootstrap responsive design, avoid the pixel based component dimension styling. Instead of using pixel values, use '%' value for specifying width and height of a component. That will ensure the component responsiveness in different devices.

3. Try to Avoid the Use of <br> and &nbsp;

Web developers normally using <br> and @nbsp; for inserting line bread and space between HTML components. Normal scenario (Desktop and laptop display devices), it may work fine. But in responsive design, these 2 are the main villains. For small devices, 2,3 line break will display as a big white space on the page. So avoid the use of <br> and @nbsp; in bootstrap web designing. Instead of these, use 'row' class and 'margin' styles.

4. Use Less

Bootstrap with less stylesheet gives great coding flexibility. Fore detailed article, click here.

5. Use Customised Bootstrap Components

Almost all types of HTML components like Buttons, Navigation bar, Alert box, Icons, etc. are available on bootstrap. So if you are using Bootstrap in your project, use the build in component and customise based on your need instead of creating your own component. That will gives the full benefit of Bootstrap on your site.