Click here to Skip to main content
15,860,943 members
Articles / Web Development / HTML
Tip/Trick

Few Mandatory Things to Know for Using Bootstrap

Rate me:
Please Sign up or sign in to vote.
4.41/5 (14 votes)
1 Oct 2014CPOL2 min read 18.4K   16   7
Bootstrap Tips

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':

CSS
.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.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Software Developer (Junior)
India India
"MVC 70-486" and "OCJP" certified.
Email :- Shemeemsha@gmail.com

Comments and Discussions

 
GeneralMy vote of 1 Pin
dr.samuel.john31-Oct-14 19:30
dr.samuel.john31-Oct-14 19:30 
GeneralMy vote of 1 Pin
Member 1109231031-Oct-14 9:14
Member 1109231031-Oct-14 9:14 
QuestionNice!! Pin
19sanjeev9-Oct-14 18:37
professional19sanjeev9-Oct-14 18:37 
Questioncontainer-fluid Pin
thewazz6-Oct-14 12:00
professionalthewazz6-Oct-14 12:00 
GeneralRe: container-fluid Pin
Shemeemsha (ഷെമീംഷ)6-Oct-14 19:48
Shemeemsha (ഷെമീംഷ)6-Oct-14 19:48 
GeneralMy vote of 3 Pin
Sooraj_Singh1-Oct-14 21:00
professionalSooraj_Singh1-Oct-14 21:00 
GeneralGood Pin
Hussainp1-Oct-14 5:55
Hussainp1-Oct-14 5:55 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.