What is Bootstrap and how to install it in WordPress successfully

What is Bootstrap?


Bootstrap is a framework based on HTML, CSS and JavaScript to create responsive webs that is, 100% adaptable to all types of mobile devices.

In the field of web design and development a framework is a set of tools based on web languages ​​such as PHP, JavaScript and CSS whose main objective is to make the design process of your pages as easy as possible.

Bootstrap was developed by Twitter in 2011 and due simplicity of use, utility and zero cost has been positioned as one of the frameworks of reference.

Main features of Bootstrap

 Features Bootstrap

Bootstrap has many different functionalities that make it a tool very valuable for anyone who wants to design a fully responsive web and which in turn is optimized to preserve good load times.

Its main features are:

  • Open source: is an open source framework and therefore accessible to everyone without this implying any cost or limitation.
  • Grid : thanks to its grid system based on a 12-column design, we managed to adapt our content to the different screen sizes. [19659013] HTML5 and CSS3 : supports the latest versions of HTML and CSS .
  • Optimization: has a clean and optimized code for your web to load as fast as possible.
  • ] Use : it has a moderate learning curve and has enough documentation to get results from the first day.
  • Components : apart from the Grid it has elements of easy installation like for example icons, buttons, drop-down menus, etc …
  • Compatibility: the framework is compatible in such important browsers as:
    • Google Chore
    • Mozilla Firefox
    • Safari
    • Internet Explorer
    • ] Opera
  • LESS: works perfectly with LESS a preprocessor that will allow you to write CSS much faster and with many more options.
  • Guarantees : has been created by Twitter, a world-renowned company that will ensure proper operation as well as continuous updates.

Prerequisites for using Bootstrap

 Requirements for using Bootstrap

] Before you start using the tool you will need previous knowledge in HTML and CSS since the framework is based entirely on these languages.

While JavaScript [ 1 9459015] is also involved to activate and deactivate different elements as is the case with the Bootstrap drop-down menus you do not need to have any prior knowledge.

To start with these resources you will have more than enough:

How Bootstrap works [19659034] Grid grid system ” width=”835″ height=”397″ />

Grid system (Grid)

The most important thing about Bootstrap is its grid system (also known as Grid) by which through a series of CSS classes you will be able to position your content based on a 12-column system adapting perfectly to 4 different resolutions .

As you can see in the documentation each resolution has a CSS class associated with it :

  • Extra small devices – Phones (<768px): .col-xs-
  • Small devices – Tablets (≥ 768px):. col-sm
  • Medi um devices – Desktops (≥992px): .col-md-d
  • Large devices – Desktops (≥1200px):. col-lg

For determine the number of columns that each element will take him we will add to the classes a number that will go from 1 to 12 being 1 the space it will take for a column and 12 the one corresponding to the 12 columns, that is, the entire width of the grid.

For example, in the following case we have a div with 4 classes: