Beginner’s Guide to Bootstrap

In this article, you’ll be introduced to what Bootstrap is, how it works and what it can be used to accomplish. For more information on the topic, consider enrolling in a Bootstrap bootcamp.

What is Bootstrap?

Originally created by Twitter and hosted on GitHub, Bootstrap is a free, open-source toolkit that incorporates CSS, HTML and JavaScript tools to help designers build webpages and applications.. 

Why Learn Bootstrap?

Bootstrap’s is versatile, user-friendly and helps create consistent designs by utilizing reusable components. The platform is designed to be responsive and compatible with a wide selection of web browsers. 

By design, Bootstrap is intuitive and easy to learn, so once you learn the basics, you’ll find it quite easy to use.

Bootstrap makes JavaScript a more productive experience by including built-in support for jQuery plugins, and it also utilizes a programmatic JavaScript API. All editors and IDEs are compatible, as are all server-side technologies and languages, so whether you prefer PHP, ASP.NET or Ruby on Rails makes no difference when using the platform.

These aspects make it easier for web designers to focus on development and create a well-designed website or application and allows them to learn how to create their own themes in the long-term.

How to Get Started

There are two versions of Bootstrap to choose from: a source code edition and a precompiled edition. While the source code edition employs the Less CSS preprocessor, an official Sass port is available to developers who prefer it. Bootstrap also uses Autoprefixer to make it easier to use CSS vendor prefixes. These traits let web designers customize all the styles when and how they like to create their own unique Bootstrap. 

For those who aren’t interested in customizing the source code, or don’t use Sass or Less, use the precompiled CSS and move on. Styles can be customized after the fact at any point.

First Steps

Once you download the precompiled version of Bootstrap (available here), uncompress the zip archive. You should see a basic file structure like the following:

bootstrap/

├── css/

│   ├── bootstrap.css

│   ├── bootstrap.css.map

│   ├── bootstrap.min.css

│   ├── bootstrap-theme.css

│   ├── bootstrap-theme.css.map

│   └── bootstrap-theme.min.css

├── js/

│   ├── bootstrap.js

│   └── bootstrap.min.js

└── fonts/

    ├── glyphicons-halflings-regular.eot

    ├── glyphicons-halflings-regular.svg

    ├── glyphicons-halflings-regular.ttf

    ├── glyphicons-halflings-regular.woff

    └── glyphicons-halflings-regular.woff2

Bootstrap’s structure is designed to be easy to understand and use. Precompiled files make it easy to get started on any web project, and from the beginning, you will have compiled and minified JS and CSS files, Glyphicons fonts and the optional starting theme. 

The Bootstrap HTML Template

The starting Bootstrap HTML template looks pretty much like this:

Start all HTML projects with the HTML5 Doctype Declaration to tell web browsers the type of document they’re about to interact with. The head has three <meta> tags that are important to declare first, with additional head tags (if needed) following. 

HTML5 Shim can be included on the head that lets HTML5 elements be used in older browsers (like IE8). You can also use Respond.js to polyfill CSS3 Media Queries in older versions of Internet Explorer. 

Take a look at the below example to get an idea of what it looks like:

Add JavaScript files to the end of the body. This lets the webpage visibly load before executing JavaScript. If you plan to use Bootstrap plugins, you’ll have to use jQuery and load it before bootstrap.js.

The above instructions will allow you to create the bare bones for getting a basic Bootstrap layout running. After that, every part of Bootstrap can be customized using CSS. 

Bootstrap’s example page is a great place for developers looking for more advanced layouts. There are innumerable free open-source and premium themes that can also be used, which can be helpful for designers who don’t want to use a default theme or aren’t interested in doing customization themselves.

UI Components and Templates

Basic CSS and HTML design templates come prepackaged with Bootstrap and include many of the more common UI components, such as Forms, Tables, Buttons, Typography, Dropdowns, Buttons and Input Groups, Glyphicons, Pagination, Navigation, Alerts, Labels and Badges, Modals, Progress Bars, Accordions, Tabs and Carousels. (Keep in mind, this is a sampling, not an exhaustive list; there are many other UI components included.) Many of these components use jQuery plugins and JavaScript extensions, too. 

Applying Bootstrap’s templates to your HTML to create different effects provides great convenience when using CSS classes because it makes it easy to reuse and extend components using semantic class names like .info or .warning. Bootstrap uses descriptive class names with meaning but is customizable in implementation, meaning classes can be overridden using your own CSS color or style without affecting the class meaning.

The Grid System

One of the significant new features of Bootstrap 3 is a mobile-first design approach, which has made for a much more responsive platform that can easily scale using a single code base from phones, tablets and desktops. 

This is accomplished with the Bootstrap grid system, which can be applied to scale up to 12 columns. The system is designed to take into account the device’s size and type and uses an intuitive structure for viewers that smoothly goes from left to right or right to left to effectively display content flow. By using grids to give structure to the layout, vertical and horizontal guidelines let you enforce margins and arrange content. 

In the days before CSS was as versatile and before the use of grids, such layouts were accomplished using tables, which involved arranging content inside table cells. As CSS evolved, numerous frameworks for grid layouts appeared and streamlined the process.

There are a few rules to follow when using Bootstrap’s grid system. For example, column elements must be inside row elements to make horizontal column groups. There is no limit to the number of rows on a page as long as columns are their immediate children. 

Column widths in full rows can be in any combination adding up to 12. However, you don’t have to use all 12 columns.

Place rows in a full-width layout wrapper or fixed-width layout wrapper. A full-width wrapper uses a .container-fluid class to enable responsive behavior in the row, and a fixed-width wrapper simply uses a .container class and width of 1170 px. 

The entire grid system uses four class tiers: lg for large desktops (>1200 px), md for regularly sized desktops (>992 px), sm for tablets (>768 px) and xs for mobile phones (<768 px). These class tiers set the sizes where columns will horizontally spread or collapse and can be used in unlimited combinations to create versatile layouts. Columns can be nested and different class tiers combined to produce different looks on different devices. 

If you prefer, you can also disable page responsiveness to remove Bootstrap’s mobile site qualities. Remember that doing this means fixed-width content will be invisible any time the display is narrower than the content (970 px, for non responsive containers). Navbars also won’t collapse when viewed on mobile devices.

Conclusion

If you want to use your web development skills to design modern websites and apps, it’s a good idea to master the fundamentals of Boostrap. If this tutorial piqued your interest, you might want to consider enrolling in a Bootstrap bootcamp to hit the ground running.

*Please note, these articles are for educational purposes and the topics covered may not be representative of the curriculum covered in our boot camp. Explore our curriculum to see what you’ll learn in our program.