Saltar al contenido
Contact :

How to use Bootstrap Components on a Web

If you are doing something related to the web, you probably heard about Bootstrap. If at this point you still don't know what Bootstrap is. How to include Bootstrap Components on our website?

Or you simply want to get a better overview of what it is and what works best, has come to the right place.

How to include Bootstrap Components on our website?

Basic HTML Bootstrap Template
A basic Bootstrap HTML template should look like this:

Bootstrap Template

Hello world!

It is important to start any HTML with an HTML 5 Doctype declaration, so that browsers know what type of document they can expect.

The header contains three tags important to be declared first and all additional header tags must be added after these.

Bootstrap Templates and UI Components

Bootstrap comes with basic HTML and CSS design templates that include many common UI components. These include typography, tables, forms, buttons, glyphs, drop-down mens, buttons and input groups.

Navigation, page, labels and badges, alerts, progress bars, manners, tabs, accordions, carousels and many more. Many of these use JavaScript extensions and jQuery plugins.

Bootstrap Grid System

The grids provide structure to the design, defining horizontal patterns and verticals to organize the content and enforce the margins.

The grids also offer an intuitive structure for viewers, because it is easy to follow a flow of content from left to right or from right to left that moves through the page.

The Bootstrap grid system has four class levels: xs for phones (<768px), sm for tablets (768px), md for desktops (992px) and lg for larger desktops (1200px).

These basically define the sizes in which the columns will collapse or extend horizontally. Class levels can be used in any combination to obtain dynamic and flexible designs.

For example, if we want to get two rows, one with two columns and one with four, we could write:

First column
Second column
First column
Second column
Third column
Fourth column

Typography Bootstrap

Beginner developers often assume that their pure HTML and No style will look the same in all browsers.

Unfortunately, each browser has its own style sheet of “user agent”That applies to HTML and no two browsers have the same default values.

Bootstrap sets the basic global display, typography and link styles. Specifically:

  • Establish background-color: #fff; in the body
  • Use attributes @ font-family-base, @ font-size-base Y @ line-height-base as our typographic base
  • Set the color of the global link through @ link-color and apply the link underlines only in: hover
  • These styles can be found within scaffolding.less.


While HTML5 introduced a series of new form attributes, input types and other auxiliary elements, Browsers have not greatly improved the visual form.

This is an area where Bootstrap really shines, because align and stylize labels or entriesValidating forms and displaying error messages can be complicated without help.

Images and Icons

Bootstrap comes with more than 260 glyphs in font format, which is incredible. Source cones have many advantages over simple bitmap images, one of which is that they are scalable.

They can also be easily customized using only CSS, so manipulating the size or color, or even adding a shadow, is very easy.

Buttons, Button Groups and Deployable Mens

Buttons are one of the things that each browser presents in a totally different way. If you want to have a consistent design in all browsers, This is potentially a big problem.

Fortunately, Bootstrap has an elegant solution for buttons too. And in addition to making them consistent, it brings many variations to play.

You can apply the clase .btn to the elements and . You can group a series of buttons in a single line using the class.btn-group at


With a little help from JavaScript, you can create a radio style behavior and checkbox on the buttons.

Or you can turn your buttons into drop-down mens by placing them within a group .btn and providing adequate menu marking of the list of unordered items.

How to use Bootstrap Components on Our Website?

5 (100%) one vote (s)

Rate this post