Bootstrap Features

In this second article in the series let's deal with Bootstrap features. It is a complete library of resources for the design of web sites and applications, including templates and elements for forms, fonts and menus, among others.

At previous article we argued that there are times when content managers are not the best option and that writing code from scratch for a website is the right alternative. However, it does not mean that we have to reinvent the wheel. Using frameworks like Bootstrap greatly reduces design time and makes it easier to get results.

Bootstrap Features

To understand the features of Bootstrap, we need to understand the paradigm shift in website design.

when they appeared websites just had to adapt to the different sizes of monitors. But, over time, mobile phones and tablets have increasingly become the preferred means of access for users. the challenge was to make the pages adapt to the different screens without the user having to enlarge, shrink or move the content to be able to see it.

In principle the following approaches were adopted:

• Responsive design: The design is the same but automatically adapted to the size of the screen. This approach has some problems such as the user may be forced to zoom in on certain sections of the page in order to see them.
• Progressive advance: It begins by designing the site for the device with fewer resources (generally the mobile phone because it has a smaller screen, a browser with less compatibility for advanced features, and often requires the use of a data plan to connect). Once finished, based on this design, features are added to obtain the version for tablets, notebooks and desktop computers.
• Gradual degradation: It is the reverse path. The desktop site is created first and features are removed until a mobile-friendly version is obtained.

As it is always easier to add than to remove, the progressive advance is the trend that managed to prevail. B.ootstrap for example takes the “mobile first” approach, that is to say that the base of the design is always the version that is going to be shown in the smallest screen size and, then, the modifications that will be made as it is passed to the sizes that follow are established.

An extra advantage of using Bootstrap has to do with the fact that Google prioritizes mobile-friendly sites in its searches.

Another concept that we must take into account is the difference between frontend and backend design. Front-end design takes care of everything the user sees and everything they interact with. Backend groups what is done on the server. An example of the former is that of a web form. Showing a series of options is shown as a drop-down menu is frontend design, that the chosen option is sent by mail or added to a database is backend design.

Bootstrap is a framework that combines elements of CSS style and Javascript programming to control the rendering and give interactivity to all the components of a page developed in HTML5.

Among the things we can control with Bootstrap are:

• Accessibility: Components such as menus or dialogs are compatible with screen readers or suitable for use by people with reduced mobility.
• Buttons: Including measures, styles, states and grouping.
• Forms:  Including rendering, types of controls, and input validation.
• Images: Controls the origin, alignment, and screen size of inserted images.
• Navigation elements: For example, hideable sidebars or vertical or horizontal menus depending on the device.
• Typography: Control how different parts of the text are displayed.
• Layout: Adjusting content rendering depending on the device

In the next article we will see some practical examples of its use.