Home / Articles / Programming languages / Markup languages / HTML & CSS / Configuring Bootstrap: which components to choose

Configuring Bootstrap: which components to choose

Configuring Bootstrap: which components to choose
 
Configuring Bootstrap: which components to choose
  • Currently 0 out of 5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5
Rating: 0/5 (0 votes cast)

Thank you for rating!

You have already rated this page, you can only rate it once!

Your rating has been changed, thanks for rating!

Log in or create a user account to rate this page.


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.

Bootstrap: which components to choose

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:

Content without and with Bootstrap

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:

Bootstrap: grid

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:

Default appearance of table in HTML

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

Bootstrap styles for table

Forms

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

Bootstrap: example of form

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:

Bootstrap: buttons

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.

  1. Glyphicons. Icon font. Weighs about 250 KB and isn't used frequently. Therefore, if not needed - disconnect it.
  2. Button groups. Blocks that combine a couple of buttons.
  3. Input groups. Extension for text blocks and fields, for example (Username):
    Bootstrap: username field
  4. Navs. Navigation with tabs, needs js-module to be connected.
  5. Navbar. Main menu navigation; can be fixed, light or dark.
  6. Breadcrumbs. It allows users to keep track of their locations.
    Bootstrap: breadcrumbs
  7. Pagination. Shows the number of pages on a website, especially useful for blogs.
  8. Pager. Buttons "forward" and "backward".
  9. Labels. 6 types of labels:
    Bootstrap: labels
  10. Badges. Signs. For example, to mark unread messages.
  11. Jumbotron. A large block of text which contains a greeting. Typically used on promotional websites as a brief description of a project.
  12. Thumbnails. Responsible for smaller versions of an image.
  13. Alerts. Success, error, information and tip.
  14. Progress bars. Progress is indicated in percentage, additionally you can make some sorts of animation and a striped background.
  15. Media items. Formatting blocks with comments, tweets and so on. These are usually lists with nested elements, which differ by left side indentation, as in conventional branch comments.
  16. List groups. Formatting lists with additional features: footnotes, list of references, notifications (see "labels").
  17. Panels. Blocks with a header, main content and footer. Can be used for advanced notifications, as well as, for control elements or forms.
  18. 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.
  19. Wells. Blocks with tips, alternative quote designs and so on.
  20. 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:

  1. Component animations (for JS). Smooth transitions, animation.
  2. Dropdowns. Dropdown lists.
  3. Tooltips. Small pop-up tips.
    Bootstrap: tooltips
  4. Popovers. Tooltips to which you can add dynamic content, header and main text:
    Bootstrap: popovers
  5. 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:
    Bootstrap: modals
  6. 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:

  1. Create your style.css and in it specify styles which "will override" the default ones.
  2. 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.


 

Read also

Post comment

basicuse.net
html5_css
106160485398655174790

Quick navigation

General navigation