Bootstrap — The essential parts
Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.
Few reasons behind its immense popularity being
1. Easy to use
2. Highly adaptable
3. Customizable
4. Makes development expeditious
5. One of the best documentations present on the web
If you are into front end development then it is necessary to have knowledge of at least one front end development framework. Foundation, Material, YAML are some more additions to the list of CSS frameworks which are worth giving a try.
But if you have decided to go with bootstrap, here I list some important components and concepts to master which are used most frequently while development:
1. Installation — Before you can use bootstrap, you need to install it. On the getbootstrap.com website you can see 3–4 different ways using which this can be done. But if you are a beginner and want to avoid tedious and confusing npm and bower installs then I recommend you to go with one of the following two methods:
a. Download source code — If you are developing offline, then downloading the bootstrap source files and importing bootstrap CSS and JS files is the best option to go with which is similar to importing any CSS and JS into your project. To download follow: https://github.com/twbs/bootstrap/releases/download/v3.3.7/bootstrap-3.3.7-dist.zip
b. Using Bootstrap CDN provided by MaxCDN — CDN stands for Content Delivery Network. The goal of CDN is to serve content to end users. So, we can use Bootstrap CDN for using Bootstrap in our projects. This is even simpler than the above method. You just need to copy the code to import CDN from http://getbootstrap.com/getting-started/#download given under the heading Bootstrap CDN and paste it in your HTML. And you are ready to roll.
*If you are using CDN, you must have an active internet connection.
*When going live it is often considered a good practice to use CDNs as they might improve the loading time of the website as the chances are those files are already cached in user’s browser.
#To start with just copy the basic template and replace the lines
<link href="css/bootstrap.min.css" rel="stylesheet">And<script src="js/bootstrap.min.js"></script>With Bootstrap CDN found under http://getbootstrap.com/getting-started/#download
2. Bootstrap Grid System — The first thing to understand when you are starting with bootstrap is the 12 column bootstrap grid system which is responsible for the responsiveness and mobile friendly interfaces. As a developer you need to remember the predefined classes used for different screen sizes which are listed on http://getbootstrap.com/css/#grid. Once you are well versed with bootstrap grid system you can easily imagine how websites scale up and down when viewed in different devices.
3. Navbar — Refers to Navigation bar, which is one of the most commonly used components of bootstrap. Creating navigation bar using bootstrap is as easy as clicking the heart button at the bottom of this page :D. You just need to go to http://getbootstrap.com/components/#navbar, copy the code for navbar from http://getbootstrap.com/components/#navbar-default and paste it in your HTML. That’s it. BUT it is highly recommended that you read about it before using, which will make your life easier when you try to customize it according to your requirements. You need to go through the structure of code that you copied and read about the tags and predefined classes used in the making. Learning about the functionality of each class gives you more power to modify it as needed.
4. Buttons — Buttons are essential parts of any website. Bootstrap enables creating a styled button easily by using the predefined classes. Refer http://getbootstrap.com/css/#buttons to get a view of how to create a button using bootstrap and styling it by just changing the predefined classes.
5. Forms — It is super easy to create professional looking forms using bootstrap. Forms which are used to take user inputs are an important aspects of any website. To know about how to create forms follow the link http://getbootstrap.com/css/#forms
6. Images — Using bootstrap is to make sure that your website is responsive and mobile friendly, thus to create a fully responsive website it is necessary to use images in your website which are responsive. It is again a child’s play to make an image responsive using bootstrap. Track this path http://getbootstrap.com/css/#images
7. Dropdowns — If you have used navbar then you might have come across a dropdown which is a toggle-able menu of links. How to create a dropdown and its variations can be seen here http://getbootstrap.com/components/#dropdowns.
8. Responsive embed — To embed responsive videos or slideshows in a webpage, bootstrap provides some predefined classes which are very useful and easy to use. This can also be specified as per the aspect ratio of the screen. Example can be seen here http://getbootstrap.com/components/#responsive-embed.
9. Carousel — A carousel is a slide show for cycling through a series of images/content. Bootstrap provides an efficient and quick way to create a carousel which can be easily customized as per the requirements. The example code for carousel and its variations can be seen here http://getbootstrap.com/javascript/#carousel.
10. ScrollSpy — It is used to automatically update navbar elements based on the content on the screen. It requires bootstrap navbar. The usage and details can be seen at http://getbootstrap.com/javascript/#scrollspy.
There are numerous other components which can be added to the list, but above ten components and concepts are the most commonly used ones which if mastered can make the development smooth.
Some other important components to look upon are:
11. Glyphicons — The bootstrap icon library which might come handy while designing stuff http://getbootstrap.com/components/#glyphicons. If you cannot find what you want in this, then you can go to http://fontawesome.io/ which is a font icon library similar to bootstrap glyphicons but has huge number of icons.
12. Wells — Looking for a simple inset effect for elements, bootstrap wells are the solution http://getbootstrap.com/components/#wells.
13. Thumbnails — To easily display grids of images and videos with/without caption, go for bootstrap thumbnails http://getbootstrap.com/components/#thumbnails.
This covers the most frequently used components while developing a fairly professional website.
Comment down if you feel like there are some other components which can be added to the list.
If you liked these tips, be sure to see more on my Medium profile.
To know more about me or connect with me, find me at http://www.pratiksingh.xyz/
Thanks for reading! :) If you found it useful, hit that heart button below. Would mean a lot to me and it helps other people see the story.
