bootstrap best practice

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.

Advertisements
This entry was posted in Bootstrap. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s