Skip to content
This article is meant to educate web developers on using the basic principles of the Bootstrap Framework to create responsive websites quickly and effectively. This reduces the cost of the production and allows companies to empower their developers to manage and build websites and pages with ease. I am going to be going through the process of downloading the Bootstrap framework and the advantages of using this framework for your web development endeavors.
What is Bootstrap?
According to the official Bootstrap website (getbootstrap.com), “Bootstrap is the most popular HTML, CSS and JavaScript framework for development responsive and mobile first project on the web”. In simpler terms, Bootstrap is an exceptionally simple framework to help make front-end web development faster as well as appealing to developers of varying skill levels.
Why use Bootstrap?
The potential for designing web sites for various mediums including large displays, regular displays, phones and tablets, make Bootstrap incredibly appealing and a smart choice for producing web content. A framework such as Bootstrap provides generic functionality that can be changed easily to optimize the website for a variety of functions and responsiveness that does not require hard coding. It is in short, one of the simplest ways to build a website and still have the ability to customize, unlike a WordPress site.
How to Get Started
In order to get started with Bootstrap, you must visit the official Bootstrap website (https://getbootstrap.com/). Bootstrap is an open source project and it is hosted, developed and maintained on GitHub; this allows users to have access to the source code and understand the full scope of the framework as a tool for building websites.
There are three ways to download the current version of Bootstrap (v3.3.6): you can download a complied version of Bootstrap, you can download the Bootstrap source code, and you can port the Bootstrap framework from Less to Sass. In this case, if you are a beginner I suggest just downloading the complied version of Bootstrap. If you want to integrate the Bootstrap framework in Rails, Compass or Sass-only projects that is when you should port the download from Less to Sass.
Once you download the Boostrap file, you should unzip the compressed folder to see the structure of the complied Bootstrap framework. Look below to see the file structure:
Now you can just drop these files into the file system of any web project you are working on and start working with the Bootstrap to design and build your desired project. For more information about Bootstrap’s functionality, which we will go over in Part 2 of this post more, please feel free to visit the getboostrap.com website to view the components, CSS features and JavaScript functions that are accessible with framework.
Responsive Design
Responsive design is one of the hallmark features of the Bootstrap framework; the ability to develop responsively with Bootstrap allows developers to be able to develop a single website that can be properly formatting on all viewing platforms. Often times, a website can be designed well and the user experience is optimal on only one specific platform or screen size. Bootstrap does an amazing job to combat these problems by allowing developers to assign certain columns of the web page to be certain sizes when read on a screen that is smaller. There are four types of devices that Bootstrap accounts for when making responsive websites:
- Extra Small Devices (Smart phones <768px)
- Small Devices (Tablets >= 768px)
- Medium Devices (Desktops >= 992px)
- Large Devices (Desktops >= 1200px)
The developer can add tags to these above classes to set certain web content to shrink, expand, hide or be visible on certain platforms. This is extremely helpful for simplifying the process of building the look and feel of the website.
Grid System
Bootstrap has a grid system which is the main feature that allows the framework to be used to design responsive websites. All rows in Bootstrap must be placed in a container class, and then subsequent rows can be defined as certain sizes.
Here is an example of a notation for the grid system:
- The predefined row class produces a row
- Within that row, the second class specifies “col-md-6”
- This means that the class is producing a column that spans 6 columns across the web page
- The “md” specifies that this will only occur on medium devices or desktops that are less than or equal to 768 px.
- The “offset” class means that those columns will be left blank. In this case the offset is 3, so three columns will be left with blank space to pad some of the content.
This grid system allows developers to quickly define sections of content and have the appropriate spacing between content to have a clean, responsive design.
Challenges with Bootstrap
The sizes of the JavaScript and CSS files are large when directly downloading all Bootstrap files. This can lead to some challenges when creating a fast page. This is because all files within the Bootstrap files are not completely used and this can mean that downloading unnecessary data can be a problem. This can affect the user experience, so feel free to check about this more in depth by visiting the post, How to Use Bootstrap Basics to Enhance User Experience (https://moz.com/ugc/how-to-use-bootstrap-basics-to-enhance-user-experience).
I hope you will all give Bootstrap a try, as it a fantastic framework to build responsive and clean website designs. Stay tuned for the next post in the series addressing more beginning concepts about Bootstrap.
Author: Esme Vazquez, Junior Web Developer
A maker, artist, gamer, coder, web-developer, and blogger; Esme is the creator of the recent blog publication Indiellect on the content management blog site, Medium. Her current experience lies in web development and game development; she is currently working and being trained in SEO at That! Company in Leesburg, FL as their Junior Web Developer. She aspires to make video games in the future that portray the beauty of humanity. If there are any questions, feel free to tweet at her at @EsmeVazquez18 and/or add her on LinkedIn.
