This article tells you how to configure the appearance of the Bootstrap before you download it and some facts about component selection. You will learn what features you need and the ones you don't, depending on your requirements.

From the previous article you know about Bootstrap, when it should be used, and what it's made of. This article explains how to select components for the project and set up the framework to fit your needs, to remove the unnecessary and avoid being confused.

This is the start of practical work with Bootstrap and any other basic project based on it.

Why configure Bootstrap

That's a very good question, after all, you can download a complete archive without setting it up and work with it.

There are two reasons: firstly, most likely you won't need all the Bootstrap components, and secondly, the weight of this pattern even if compressed isn't negligible - 525 KB. Plus 95 KB of jQuery, because without its components it refuses to work. This luxury, no front-end developer can afford, so you need to remove all the unnecessary.

By the way, always remove the excess components.

Component selection

On the Bootstrap download page you will see a form with checkboxes. Here you need to check the ones that will be useful while working on your project.

And now let's have a look at some parts of the Bootstrap and their purposes.

Common CSS

This is a set of basic elements that are needed for a basic layout. It is always recommended to keep them checked.

Print media styles

These are the styles that are used by browsers before printing out pages. You can customize them, according to your liking, with special styles in the following format:

@media print {
/* your styles */
}

Typography

The basic design of the text: indentations, paragraphs, quotes, code highlight, formatted text, headings, subscript and superscript text - all of this design is set with these styles.

Even if you won't use the classes on the page, its contents will be processed in a Bootstrap-style. This is useful for those who can't or don't want to sift through the old code. Just connect the library to make the text more readable.

Here's how to change plain text without any additional styles:

Code

Formatting the code in the pages. Of course, there is no syntax highlighting, you will have to use a separate plug-in (in no way associated with Bootstrap), but it will be possible to distinguish the code from normal text by enclosing it in tags code, pre or kdb.

Grid system

The magic of any CSS-framework still brings awe to older programmers, who worked 10 years ago and before commencing their layout they had to make a choice between tables and blocks. Whereas today, simply by adding the necessary classes you get an adaptive (responsive) layout for your website in 10 minutes.

Let's see an example of how it might look like:

Tables

Table layout is a long-gone past, but the table data must be displayed accordingly, unless otherwise stated. Without a proper table design it looks very unattractive. Try to avoid this:

After simply adding Bootstrap without making any changes in HTML, the table will look like this:

Forms

If you need to create forms, you can use Bootstrap:

Check the item "Form", if you have to create a form.

Buttons

Buttons in the Bootstrap is a topic for another discussion: by default there are 4 sizes and 7 types of buttons. In addition, there is a button with a drop-down menu, block buttons, and so on. By default buttons in Bootstrap look like this:

Responsive utilities

Bootstrap has a set of handy tools to quickly and easily create a layout for mobile devices. Thanks these tools, you can hide and display some components on different devices and change their sizes, individually for large, small and medium sized screens.

This component significantly saves the code and consist of the following components:

Extra small devicesPhones (<768px)

Small devicesTablets (≥768px)

Medium devicesDesktops (≥992px)

Large devicesDesktops (≥1200px)

.visible-xs-*

Visible

Hidden

Hidden

Hidden

.visible-sm-*

Hidden

Visible

Hidden

Hidden

.visible-md-*

Hidden

Hidden

Visible

Hidden

.visible-lg-*

Hidden

Hidden

Hidden

Visible

.hidden-xs

Hidden

Visible

Visible

Visible

.hidden-sm

Visible

Hidden

Visible

Visible

.hidden-md

Visible

Visible

Hidden

Visible

.hidden-lg

Visible

Visible

Visible

Hidden

As you can see, the same block can be hidden on a tablet but displayed on desktop or a mobile.

Components

Here they are explained in short, since these components are small and easy to understand from their names.

Panels. Blocks with a header, main content and footer. Can be used for advanced notifications, as well as, for control elements or forms.

Responsive embed. The "responsive" objects are able to expand to different screen sizes to display the video in the correct aspect ratio and without explicitly indicating the size.

Wells. Blocks with tips, alternative quote designs and so on.

Close icon. Seems clear by the name.

JavaScript components

Bootstrap extends the functionality of dynamic functions. This part of the framework is working based on jQuery and demands that it is connected to bootstrap.min.js. Consists of the following components:

Component animations (for JS). Smooth transitions, animation.

Dropdowns. Dropdown lists.

Tooltips. Small pop-up tips.

Popovers. Tooltips to which you can add dynamic content, header and main text:

Modals. Pop-up windows. You can resize, add title, main text and a footer, modify them in any way you wish. By default looks like this:

Carousel. A simple slider with multiple-choice animation.

Setting variables

You can modify the default settings according to your needs. You can create your own theme of Bootstrap in two ways:

Create your style.css and in it specify styles which "will override" the default ones.

In Less Variables block you can change the parameters with ones you really need and download the archive with the Bootstrap, customized just for you.

Downloading

After we have finished changing the settings, click at the bottom "Compile and download", in the received archive we will have only the chosen elements. If we compare, the small project uses only a fraction of the functionality, the weight of the framework is easily to reduce from 600 KB to 100 KB. The resulting files we can save in the folder with the project, now connect bootstrap.min.css and (if needed) bootstrap.min.js.