Top 5 Bootstrap Tips and Tricks

Learning Bootstrap can be a pain and tedious task, even for the most skilled programmers. These 5 tips and tricks will help you along your journey!

1.  Read the documentation

– No matter what language, api or plug-in you are using in your code, the most valuable and most important part of implementing said tool is by reading the documentation. Alright, sometimes the documentation is awful, but a lot of the time it is a great and is an invaluable tool. Bootstrap’s website has decent documentation to help get you started and understand the components of Bootstrap.

-I  highly recommend finding the “Getting Started”, “CSS” and “Components” pages on the Bootstrap website. The 1b. trick is to download Bootstrap before using it…

Homescreen


2.  Practice. Practice. Practice.

– Once you familiarize yourself with the features of Bootstrap the next thing you must do to use it efficiently is to practice. Wether you were tasked with a project or are making your own project, play around with the features for a little bit before tackling the project you are tasked with. This allows you to make mistakes and really explore how to change and use what Bootstrap offers to your own needs.


3.  Understanding the classes .row .col-md-x and .hidden-x

– The root of Bootstrap is the row and col-md-x classes. These two classes will help make your transition from a desktop to mobile site. The way this works in a nutshell is to use the col-md-x class you must first create a div with class row and then inside that div have columns. Here the ‘x’ can be any number 1-12 and the total number of x’s in the row must add up to 12. A div with class col-md-6 will take up half the page on the desktop site. Once the size to collapse the page into mobile version has been reached the columns will stack instead of continuing to shrink giving your site a beautiful lookclasses

– Another great class is the hidden-x class. In this case x is either lg, md, sm, or xs – standing for the different screen sizes. This is class comes in handy when you want certain aspects of the website to disappear on certain versions.

– To find out more about these classes read the documentation here


4.  Extra features

– Bootstrap offers much more than just the backbone of a collapsable website. On the Bootstrap website you will find great templates for a carousel, navbar and jumbotron. To use these features in your next website simply open the template and inspect the source code (in Chrome right-click —> inspect element or save and open in notepad or text editor). Copy the section of code you need and paste into your project file. Now you can edit just the parts you need!Extra Features


5.  Editing the css file

– Finally, editing the Bootstrap css file can be beneficial. Before modifying the bootstrap files I highly recommend making a copy in case you delete something. If you feel sufficient enough in coding and can understand what the css Bootstrap provides for you means then dive right in! Personally there were some aspects that annoyed me, yet were not fatal. For example the Bootstrap css was giving all my div’s a white background color and provided the html with a font-family I did not wish to use. For these aesthetic changes go ahead and change them. However if you do not know what the code is doing then just let it be, or you might alter the true heart of Bootstrap’s capabilities


I hope these Top 5 Bootstrap Tips and Tricks have been helpful! Feel free to comment below with questions or comment!

cout << “Happy Coding”;

Ben

Advertisements

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