contador javascript 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.