The most basic intro to Twitter Bootstrap

The most basic intro to Twitter Bootstrap

Twitter bootstrap has been a very popular framework since the day of its release. I have personally loved Bootstrap from the day I have known about it. When it comes to web design, speed and clean structures are very important. Designers around the world crave for clean coding techniques so that web pages do not have structural issues.

If you are interested in web designing and still do not know much about Bootstrap; do not worry. I have prepared this short and compact write-up to give a basic overview of the Twitter Bootstrap and how we can add customized style options along with the bootstrap inbuilt templates.

Beginning with the bootstrap ideologies

If you are a web designer, you must be well aware of making web page structures and adding individual style options to specific elements. There are styles for input elements, for div tags, for forms, and so on.

The bootstrap framework is nothing but a pre-developed template structure of your webpage. A bootstrap development bundle consists of all necessary styles, structures and even icons that might be required during the process of creating a webpage.

So, where to start from? Start off by getting a copy of the Bootstrap bundle from the official bootstrap website – here.

When you visit the official link, you will see there are a variety of options on the top.

The Getting started option will show you instantly where to place your Bootstrap bundle in the development server and how to include the required files in the meta description. Also, this section details all the path and file hierarchy of the bundle (if in case you need to understand).

Of the rest, the Components option will detail you all the available sections of Bootstrap. This section has the details of the various “structure definitions” of bootstrap. So, it has a list of items on the left with its details on the right.

Next is the CSS section. Here, you will learn the actual mechanism of coding using Bootstrap. We’ll discuss that in the later half.

For the moment, we leave the JavaScript option because it requires a bit more depth. Finally, the Customize section allows you to customize your bootstrap bundle. Here, you can define your default LESS variables, colors, font-sizes, line-heights, change the default width of inbuilt classes; and accordingly your personalized bundle will be produced. Well, I know that is just so awesome and useful!

 Starting a Bootstrap development

So, basically when you start making a webpage, just include the Bootstrap bundle – the CSS and the JavaScript files and you’re all armed up. Now what you do is create a structure according to your requirement and add CSS classes that are already defined in the bootstrap.css file.

Each of these classes has specific styling done already. You just need to add offsets, floats and widths accordingly.

Confused? Okay. Let’s have a look at some of the examples.

The grid system of Bootstrap is very important. Each structure (a component or a row or a column) has 12 breakable sections. So, whatever is its size, it can be broken into equal 12 divisions. This is the base foundation of your HTML structure. Under the CSS section, head on to Grid system and you’ll get a detailed idea.

the-basics-of-bootstrap

What Bootstrap suggests is that you have a .container as the wrapper and then have .row and .col-xs-* or .col-md-* (The * here suggests a number from 1 to 12, since each structure has 12 equal parts).

Depending on what layout you need, adaptive or responsive, you can use either a stacked-to-horizontal or for mobile, tablets and desktops. In case you use the former, your website chunks would get stacked one after the other in case it is viewed in mobile devices. So, it is suggested that you use both .col-md and .col-xs in your class definition.

 the-basics-of-bootstrap

P.S. Always remember that Bootstrap classes are applicable to screens greater or equal to breakpoints and a higher width class will override a lower width class. So, for example, if you are using only .col-md-*, your styles will be applicable to all sizes including very large devices. In that case, you must also use a .col-lg-*.

Images, buttons, icons and other extensions

The components section offers extensive markup for developers. There are exquisite styling options available for media objects, badges, labels and pagination.

You can actually have stylized input groups and input elements like checkbox and radios.

Buttons in Bootstrap are highly specific and super designed. Each button carries a different purpose and you need not customize the look and feel of these buttons. The default color and texture says what each button is made for.

 the-basics-of-bootstrap

The glyphicons, as mentioned earlier, has 200 glyphs. Each icon is dedicated to a particular web requirement and is sleek and modern. You just need to add the mentioned class names to a particular image item and the glyph is fetched automatically.

Images in Bootstrap can also be stylized specifically. You might have noticed that certain websites have circular and thumbnail styles for images. Well, previous to CSS3, we did not have an option to make this effective without a bit of Photoshop on the image itself. But, now web masters apply CSS3 rounded corners. Bootstrap already has these inbuilt classes. Just add the classes and you’re done. Of course, this isn’t supported for older browsers like IE8.

 the-basics-of-bootstrap

Wrapping it up

So, I guess that’s that. If you are well acquainted with HTML and CSS coding, then this tutorial can be a stepping stone to implement Bootstrap successfully. Bootstrap has quite a lot of advantages and I would always suggest using it. Why work hard on creating style schema when you already such a beautiful framework ready.

Just to mention some important points to remember – do not forget to check the “getting started section” for the meta includes. Without them your Bootstrap would not work. Also, you can create fantastic responsive websites using the Bootstrap Responsive classes. So, go for it!

Comments are closed.