Getting Started with Bootstrap

Home >Shield UI Blogs > Getting Started with Bootstrap

Over the past months Bootstrap has gained enormous popularity. There is little surprise in this, given that it saves a lot of headache, when one aims to deliver a visually appealing, responsive site, which works on all browsers.

Introduction

The Bootstrap framework relies on html, css and JavaScript to provide the fluid layout, as well as include a ton of options, such as custom widgets, animation effects and interactivity.
When working with it, however, one does not have to worry about the thousands of lines of css and JavaScript, which power the magic. Bootstrap exposes a neat set of classes and an intuitive layout system, which makes learning it easy. This blog entry will outline some useful resources, regardless of whether you are just getting started with Bootstrap, or want to check out the latest trends.
devices

Getting Started

In order to setup Bootstrap locally, you first need to download it from here. The basic structure of the files is shown to the right.
The css folder contains all the css files, needed by the framework. You will be using the class names specified there, in order to style your pages.
The fonts folder contains the glyph icons resources, which are not obligatory, but may be used occasionally in your application for enhanced visual effects.
The js folder contains the all JavaScript resources, which may be used when including jquery widgets.
devices

Customizing the download

The Bootstrap download page exposes a useful feature, which allows you to customize your download. It allows you to choose which Less files to compile into your custom build. Its first section specifies a large number of CSS and components to choose from. In addition, it also includes some jQuery plugins which may or may not be needed, depending on the specific application you are going to build. Following it, is a large number of field settings, which relate to the complete set of css elements - components, tables, borders, grid layout, etc.
When looking at these options, you may find yourself overwhelmed at first. Getting to know all the different elements and class names is indeed a daunting task. To get a more meaningful presentation, with a visual of each element, as well as the value you are choosing (such as a color value), you may want to use an editor, such as the bootstrap magic one. This not only includes the names of all classes, but also includes many visual elements, to which the changes are applied. This allows choosing uniform fonts and color schemes, for building a solid theme.

Bootsrap Grid System explained

One of the most important aspects of bootstrap is its layout system. The new Bootstrap grid system applies to mobile first. This is little surprise, since many websites have a growing number of mobile visitors.
Bootstrap 3 focuses on designing for mobile right from the start. Bootstrap 3 is mobile first because it now starts by targeting smaller screens, and then “expands” sizes and grids for larger screens.

With Bootstrap 3, the span classes have been removed, and replaced with a combination of col-x classes: col-xs-x, col-sm-x, col-md-x, and col-lg-x. When declaring your layout, you can set the sizes for the smaller dimensions first, and then the distribution over larger devices. 




  
.col-xs-12 .col-md-8

  
.col-xs-6 .col-md-4







  
.col-xs-6 .col-md-4

  
.col-xs-6 .col-md-4

  
.col-xs-6 .col-md-4







  
.col-xs-6

  
.col-xs-6
Although these dimensions may be confusing at first, they are very handy once you get used to them. The xs classes target mobile devices, sm is for tablets,md or medium, targets laptops and smaller desktop screens, and lg targets large desktop screens. The most important thing to remember here is the difference between Bootstrap 3 and 2, in the sense that Bootstrap 3 takes mobile/smaller dimensions first, and then the column settings for larger ones.
devices

Additionally, Bootstrap 3 provides dynamic utilities for hiding or showing elements, based on the browser size. This gives a lot of extra flexibility when defining our grid layouts. Given that you are already familiar with tha size abbreviations, all you need to to is add the visible/hidden property and apply the resulting class. These are listed below:

  • visible-xs
  • visible-sm
  • visible-md
  • visible-lg
  • hidden-xs
  • hidden-sm
  • hidden-md
  • hidden-lg

There is virtually no limitation to the layout that you can come up with, using Bootstrap. However intuitive, Bootstrap has a large number of elements, rules and combinations to offer. This may turn out to be a steep learning curve. Because of this, it is a good idea to start by looking at some demos, before you decide which layout to choose for your next project. Happily, there is a wealth of information available, as well we fully functional samples. These are usually divided into to categories: Bootstrap templates and Bootstrap themes.
Templates are usually smaller html entities, which may include just a few Bootstrap elements, or a simple page, such as a log-in page.
Themes, on the other hand, tend to be more complex. These may be only color schemes, which are in essence custom css builds, or a color/style palettes, or complex page collections, which include dashboard setups, custom widgets, and js code.
Below is a short list of resources, which you may find useful, when looking for bootstrap themes and templates - free and commercial:

WrapBootstrap is a marketplace for commercial themes. You have a large selection of themes to choose from, as well as a smaller selection of custom logos. Most of the themes are very rich, and many include additional widgets for visualization purposes.
Bootsnipp offers a very large selection of free Bootstrap templates. Each one exposes the code used to generate the template. The templates range from simple ones, to more advanced ones with additional JavaScript code.
Prepbootstrap offers free templates and themes. Some of the themes are very advanced, and all themes and templates expose their code and are available for download. Some of the templates and themes use JavaScript widgets for their data visualization.
Bootstrapzero is a repository for templates and themes. It also contains links to other popular resources, where one can find additional style variations or custom themes.
Tags: 
Bootstrap, CSS, HTML5