Introduction to Bootstrap

Description

Bootstrap is an 'open source' library for Front End Web development with
interfaces "responsive" that can be made easily and quickly. During
these four parts that make up the journey through this technology, you
we will be guiding you so that you become familiar with this library, which has
converted into one of the most used free programming tools
by programmers around the world.

We begin by exploring the grids as structural support for the process of

design of Web Interfaces. Bootstrap includes a wide set of
components that are managed as classes or extended classes, which in turn
They have attributes and modifiers. We will be working with the main ones.
components of technology, such as buttons, badges,
alertas, toast, barras de navegación, menús, formularios, migajas de pan
(breadcrumbs), modals, tooltips, and popovers, so that you go
getting used to its use. For this, we provide you with a series of examples and
practical activities for you to design your own interfaces.

In addition to a strong desire to learn and commitment to your study routine,

you will need a computer or laptop where you can do your exercises and
view the material we have designed for you. Regarding the tools,
Don't worry, every time something is needed, we will let you know how.
install it and configure it.

Learning objectives

1. Describe the characteristics of Bootstrap that make it a tool

for the development of responsive Web interfaces.
2. Use the Bootstrap library to build Web interfaces
adaptive.
3. Apply the Bootstrap grid concept for layout of
basic web interfaces.
4. Develop forms for web interfaces using the defined classes in
Bootstrap appropriately.
5. Use the Bootstrap library to build tables with different
characteristics, styles, and adaptive properties.
6. Create notifications for users using the different supported formats
by Bootstrap.
 Bootstrap Configuration
Congratulations on continuing to advance your knowledge about Bootstrap!
In this case, we want you to set up Bootstrap for an HTML page.
following the steps below:

1. Create an [Link] page

2. Download or link the necessary libraries for Bootstrap 4:
o Bootstrap CSS
oJavaScript of JQuery
o Popper in JavaScript
o Bootstrap in JavaScript

Checkpoints

Check that the libraries are loaded and change the font type
browser default.

Responsive Interfaces, Mobile First

We are pleased to meet again! On this occasion, we are going to
explore Mobile First design in Bootstrap.

Bootstrap is a framework that allows you to design and create components

adaptable to different screen sizes and resolutions, which we can find
on devices such as: mobile phones, tablets, desktops, and large monitors, as well
as well as the modes: vertical and horizontal, commonly present in equipment
mobiles.
To this end, Bootstrap is based on the different 'breakpoints' that define when to
consider a size or another. The breakpoints are defined below:

Device Screen width (px) Name in Bootstrap

Cell phones less than 576 xs
Cell Phones / Tablets 576 to 768 sm
Tablets 768 to 992 md
Laptop / Desktops 992 to 1200 lg
Desktops greater than 1200 xl
Moreover, when a programmer develops a program, they usually do so
using a strategy called 'mobile first' which refers to programming
thinking first about the interface that will be displayed on a cell phone, then in
tablets and finally on desktops.

The idea is to create the interface with more restrictions (mobile) as this facilitates the
design for larger devices, instead of doing it the other way around.
The strategies that are most commonly applied to adapt the interface are:

Stack elements or change the layout, such as, moving elements from
two columns into one.
Hide / show elements, such as removing options for mobile.
Replace elements, for example, change a hamburger menu to
mobile phones, for a horizontal menu on desktop.

Learn by doing
Grids in Bootstrap
Greetings! We welcome you to apply what you've seen regarding the grids in
Bootstrap. Next, we encourage you to create a basic interface for a
web page using such grids.

Logo
Col1 Col2
Pie
You can use the classes: .border and .text-center in the columns to visualize the
diagramming.

Checkpoints

Check that the application looks as suggested.

Practical Challenge - Layout
Congratulations on making it this far! That means you have already reviewed the material
corresponding to the grids in Bootstrap. You are making great progress! With this
resource you will be able to consolidate and apply the acquired knowledge. So to
next, create an interface with the following layout:

Logo
Col1 Col2
A B C
Pie

The first section (logo+title) occupies the full width of the screen: The logo
takes up ⅓ of the width while the title takes up the rest
The internal section has two columns and the final section has three.
columns.
The footer takes up the entire width of the screen.

You can use the classes: .border and .text-center in the columns to visualize the
layout.

Interfaces with Bootstrap

Greetings! We are happy because you chose the best time to strengthen it.
studied about Bootstrap. Next, we want you to complete the
next challenge where you must create the following interface:

Title
Menu I1 I2 I3 I4
C1 C2
Checkpoints

That the elements are arranged as shown in the diagram.

Practical challenge
Congratulations! We are pleased with the work pace and interest you have shown in
discover Bootstrap. Next, we encourage you to code the following
layout, in such a way that it works for both desktop and mobile.

Vista Desktop
Title

Menu I1 I2 I3 I4

C1 C2

Cell View
Title

Menu

I1

I2

I3

I4

C1

C2
 Color Management
What a joy to be together again to continue learning about Bootstrap! In this
opportunity we will focus on the list of colors used in this tool.

Bootstrap manages a list of colors that can be used in our

application. The most important ones are shown below:
These colors can be used to set the text color with the
classes:<color>

They can also be used as background colors with the classes:.bg-<color>o

in other elements like buttons and borders.
Learn by doing
Tables in Bootstrap
Congratulations! We are pleased with the work pace and interest you have put into
discover Bootstrap. Next, we encourage you to code the following
layout, in such a way that it serves both for desktop and for mobile.

Desktop View
Title
Paragraph

Column Column Column Column

Column 1 Column 2 Column 3 Column 4

Pie

Checkpoints

Verify that the elements look like the sketch. The table must be responsive.
Practical challenge
Greetings! We welcome you to apply what you have studied regarding tables,
typography and images in Bootstrap. Next, we encourage you to create the
next interface:

For cell phones

For Desktop
Note that the image and the table must be responsive.
 Jumbotron
Greetings! Excellent time to continue discovering the classes, attributes and
options offered by Bootstrap. On this occasion we will explain two
components that the tool offers to be used on the pages
main features to highlight: Jumbotrons and Cards.

Jumbotron

The Jumbotrons are a component designed to occupy the width of the page and its
The intention is to present highlighted content (it is used to display the
product).

My product
This great product will provide you with a high quality of life.

Start using it

See more
In general, it is a box to highlight a content.

To use it, you must add the class..jumbotronand place a title and its content. A
continuation an example:

<div class="jumbotron">
<h1 class="display-4">My product</h1>
<p class="lead">
This grand product will provide you with a great quality of life.
</p><hr class="my-4" />
<p>
Start using it

<aclass="btn btn-primary btn-lg"> href="#" View

more</a>

The code for a box is shown below:

<div class="card">
<div class="card-header">
Offer

<div class="card-body">
<h5 class="card-title">Product 1</h5>
The description of this product
<ahref="#"> Detail
translatedText
</div>
and this can fit into any grid according to our convenience.

Medical article
We welcome you! It's great that you are already applying what you've learned about
Bootstrap! Based on that, we encourage you to create a page that represents a
medical article with the following elements:

Title
Subtitle
Breadcrumb
Article text
An image

Checkpoints

Check that your article has all the elements and that it is responsive.
Practical challenge
We welcome you to apply your first knowledge about
Bootstrap! Next, we encourage you to build an interface that meets the
following requirements.

A company has an administrative system and a section to manage the

users; you have been requested to create an interface like the following. Remember to take
in mind:

The word user with h3

The badge that indicates the number of users
The table
The action buttons
The add user button
 Carousel
Greetings! With this resource, you will continue to delve into the most important aspects.
important features of Bootstrap; in this regard, we are going to highlight the carousel, which is
an element that is used to display slides that rotate content. In
generally, the content rotates automatically through controls of the
same carousel.

Travel

PreviousNext
An example of controls are the arrows that allow us to move to the next slide.
or the previous one. We also have the indicators that show shortcuts for
any slide in the carousel.

To build a carousel, we must create a div with the class .carousel and .slide,
which can have indicators (optional), slides, and buttons (optional).

<div id="ejemploCarrusel" class="carousel slide" data-

ride="carousel"
<--here van the indicators -->
here van the laminates -->
here van the buttons -->
The indicators have the following structure:

<ol class="carousel-indicators">
<lidata-target="#exampleCarousel" data-slide-to="0"></li>
<lidata-target="#exampleCarousel" data-slide-to="1"></li>
...

The sheets have the following format:

<div class="carousel-inner">
<div class="carousel-item active">
<img src="./[Link]"> class="d-block w-100" />

<div class="carousel-item">
Invalid input: The provided text does not contain translatable content. class="d-block w-100" />
</div>
...

The buttons have the following structure:

<aclass="carousel-control-prev" href="#exampleCarousel"
role="button" data-slide="prev"
<span class="carousel-control-prev-icon"> aria-
hidden="true"></span>
Previous
</a>
<aclass="carousel-control-next"> #exampleCarousel
role="button" data-slide="next"
<span class="carousel-control-next-icon"> aria-hidden="true"
></span> Next </a>
We hope this content about carousels in Bootstrap is useful to you.
utility for growing in the resources that facilitate the construction of interfaces
usables.
 Registration form
Congratulations! We are pleased with the work pace and interest you have shown in
discover forms in Bootstrap. Next, we present to you a
Company that needs to create a registration form with the following fields:

name
email
(male or female)
hobbies (fútbol, leer, cine, música)
description

We invite you to create the form using Bootstrap.

Checkpoints

Check that all the mentioned fields are on your page and that it is
responsive.

Practical challenge
Congratulations on getting this far! That means you have already reviewed the material.
corresponding to complex forms and entries in Bootstrap. You are
advancing very well! With this activity you will be able to consolidate and apply the
acquired knowledge.
A friend has a travel agency and has asked you to create a carousel of
images for travel. This carousel must meet the following
requirements:

The carousel should automatically rotate the images when it

load the page.
Three square images must be rotated.
The controls to move forward or backward in the carousel should appear.
It must be responsive:
Occupy 11 grid spaces centered on small devices.
2. Occupy 7 grid spaces centered on medium devices or
big.

Conclusion
Introduction to Bootstrap
Bootstrap is a library for creating web interfaces that adapt to devices.
with various screen sizes (responsive design). This technology arises from
an internal project of Twitter and over time it became available to the
developers around the world, as an open source tool.

Bootstrap is based on JavaScript, CSS, HTML, and jQuery, and is developed

in SASS which allows writing CSS styles in a more compact way and with
more functionalities.

After successfully completing the Introduction to course

Bootstrap has developed the following capabilities:

Describe the characteristics of Bootstrap that make it a tool

for the development of responsive Web interfaces.
Use the Bootstrap library to build web interfaces.
adaptive.
Apply the Bootstrap grid concept for the layout of
basic web interfaces.
Develop forms for web interfaces using the classes defined in
Properly bootstrap.
Use the Bootstrap library to build tables with different
characteristics, styles and adaptive properties.
Create notifications for users using the different supported formats
by Bootstrap.

Among the features of Bootstrap, we find that it provides conveniences.

for the development of responsive interfaces, it streamlines the interoperability of the
web interfaces that can work in different browsers, without the need for
changes in the code, provides a set of pre-made interfaces that shorten the
time for designing a webpage, supports design based on the
layout using grids and has become a standard for
Front End developments.

To install Bootstrap we must go to the official site of this library, and we have the
option to download the local version or the version that is in the cloud.
As part of the installation, three necessary libraries are downloaded to get started.
Bootstrap: JQuery, Popper, and JavaScript.

The breakpoints in Bootstrap are based on the specification of various widths and
highs which are adapted to the sizes of device screens
mobiles, which allows us to move from one screen dimension to another when
we are programming in an easier way. They are part of the sustenance of what
what is known as Mobile First, which refers to programming with a focus on the
interface that will be displayed on a cellphone, then on tablets and finally on
desktops.

Grids are an important part of the process of building interfaces.

adaptive. As their name indicates, they represent a kind of
grid to design the look of our interface, and in particular to make it
adaptable or responsive. Basically, the grids include columns whose
sizes can be configured according to the appearance we want to give to
our interface.

Exploring the Components

By default, browsers render interface elements in a way

default. Bootstrap overrides these styles to allow a way
homogeneous in drawing these elements, regardless of the browser being used
employing.

Another important aspect of this tool is table handling. Bootstrap

provides support to make them adapt to the screen sizes
of the devices, through the use of size modifiers (e.g. sm and
and be easier to navigate through the use of the bar
browser displacement.

Another relevant aspect of Bootstrap is the color nomenclature. This streamlines the
assignment of colors to various components of our interface, such as to the
texts. In this nomenclature we find that, for example, the success color
(success) we can assign the green color.

Bootstrap is characterized by having a series of attributes and modifiers.

that can be applied to the structural components of an interface, such as
the grids and the tables. These are used to alter margins and spacings of
the columns on the screen in an adaptive way.
Using Bootstrap we can insert images into an interface. The appearance of the
The image on the screen can be changed by using modifiers.
that makes it adaptive, or that has rounded edges among many others
options.

Breadcrumbs are components that indicate where we are.

we are positioned within the navigation hierarchy of our page, for
for example, we can be on the books page, within categories, within
History. Another widely used navigation element is the button. There is
various types of buttons, such as the simplest button that we can change
the appearance, the fill color, and the border. There is another option that makes a link
look like a button or vice versa, that is, a button is a link. Several
buttons can also be grouped to form a group button.

Next, we learn that there are a series of Bootstrap components.

to work with tags and notifications. The first of them is the Alert that
display a message for the user; the second is the badge that acts
like a tag that can be attached to some element in our interface.
Finally, we found the toasts that are used to define notifications.
more elaborate than the alert and are displayed as a result of some event, such
like the creation of a user.

Through Bootstrap, it is also possible to design forms with various layouts.

and aspects. The fields of a form can be displayed one below the other,
In such a way that each field has a localized label above it. Another way
to present a form is organizing the fields in a grid (or matrix).
Additionally, the fields can be drawn in a line, one after the other.
of the other. The fields of the form can also be organized in such a way that
the labels should be in one column and the fields in another, which is a form
horizontal.

In addition, Bootstrap makes our work with form fields easier.

through the use of prefixes, such as a symbol @ that precedes the content
from the field, or the suffixes like measurement units (e.g. cm, mm) that can
follow a value entered in a numeric field. The suffix can also be a
button. Bootstrap also customizes other fields, such as the range field,
employee to select a value in a range of determined values.
Additionally, it provides a way to customize some types of checkboxes, such as
like the switch that we usually find in the configuration interfaces of the
mobile devices, and file selection using a separate interface
from the browser.