Bootstrap tutorial

<< Prev
Next >>

Introduction

Bootstrap is a free, open-source library for designing web sites and web applications. It contains HTML and CSS design templates for anything from navigation menus, buttons, images, fonts, forms and other interface components, as well as JavaScript extensions.

To use bootstrap technology, it can be downloaded for free. It contains many .css and .js files. Basically, we only need the file: bootstrap.min.css and bootstrap.min.js.
Then, in the <head> from the web page, to use them, we will write:


<link rel="stylesheet" href="bootstrap.min.css">
<script src="bootstrap.min.js"></script>


Additionally, to use all bootstrap facilities, we also need:


<script src="jquery.min.js"></script>
<script src="popper.min.js"></script>


And last but not least, the use of awesome fonts creates great visual effects:


<link rel="stylesheet" href="font-awesome.min.css">


But it is recommended not to use the downloaded files, but to include the <head> from the web page, direct links to these files on the internet (to benefit from all the updates).


Head bootstrap

Responsive websites

For our site to be responsive (that is, to display the pages correctly for any resolution of any viewing device), in the <head> we have to put the instruction:


<meta name="viewport" content="width=device-width, initial-scale=1">


Let's talk about the bootstrap elements now:


Bootstrap containers

We can start building a web page by calling a container that hosts all the items on the page. Two types of containers are defined in the bootstrap:
A fixed container is a (responsive) fixed width container. As you resize your browser, its width remains intact, until it passes a certain breakpoint (as specified by you), at which time it will resize to the new width for that break point.


<div class="container">
Web pae elements....
</div>


A fluid container spans the full width of the viewport. It will expand and contract fluidly as you resize the browser. This is in contrast to the fixed width container which will appear to "jump" to the new size as you pass a given break point.


<div class="container-fluid">
Elemente pagina web....
</div>


We do not have to use containers to host page elements. They are strictly necessary if we use the grid.
This grid divides the page width into 12 columns (different widths for different resolutions). Thus, on each line, we can use some column to place an element:


Bootstrap grid

Bootstrap navbar

Bootstrap has defined navigation bar classes of different sizes and colors. An example of the navigation bar is:


Bootstrap navbar

First we add a text logo using the navbar-brand class, as follows:


Navbar text

Now we will add an image to the logo as follows:


Navbar image

Now we will add the button that uses the navbar-toggler class, which appears at low resolution (mobile phones) and will run the menu on them. At high resolution, the menus are placed in the navigation bar and this button does not appear.
In the following figure we have the page viewed on laptop, at high resolution:


Navigation button

And in the following figure we have the webpage on a mobile phone (the right button appears):


Navigation button

Now we'll add the Home button. Similarly, viewing on your laptop will appear as follows:


Home button

And when viewing on your mobile phone without the menu button pressed:


Home button

Or with the menu button pressed:


Home button

Now we will create a simple link to another web page. Laptop view:


Navbar link

And view on mobile phone without the menu button pressed:


Navbar link

Or with the menu button pressed:


Navbar link

Now we will create a dropdown menu. Source code is:


Dropdown navbar

View on laptop without the drop-down menu:


Dropdown navbar

Viewing on laptop with the drop-down menu:


Dropdown navbar

And view on mobile phone without the drop-down menu:


Dropdown navbar

And viewing on your mobile phone with the drop-down menu:


Dropdown navbar

Bootstrap text features

Cateva tipuri de text:


<p class="font-weight-bold">Some text</p>
<p class="font-weight-normal">Some text</p>
<p class="font-weight-light">Some text</p>
<p class="font-italic">Some text.</p>


Some text

Some text

Some text

Some text


There are some colorful text classes that are used very easily:


Color text

The big advantage of working with text (as with images or other elements) is that an item on the web page can use several classes at the same time.
For example, if we use the h3 heading, it has a default size. If we want to give it a color we use for example the class: text-primary (blue). If we want to center the text, we use the class: text-center.


Classes text

Important! If, however, the classes that are defined in the file: bootstrap.min.css do not satisfy us, we can create a file: style.css, in which we complete the features of a class, or even change them (size, color), because they will be considered and overwritten over the bootstrap.


Some text classes can also be used for links, as follows:


Color link

We can also easily use the background classes as follows:


Back color

Bootstrap buttons

We can use bootstrap button classes:


Bootstrap buttons

Or button group class:


Bootstrap button group

Using the awesome font icons

There are a multitude of awesome font icons that can be used individually, can create a link or be applied to a button.
Enter using the fa prefix followed by the icon name. For example, for the home icon, we have:


<i class="fa fa-home"></i>


For different sizes, we can add a style like this:


<i class="fa fa-home"></i>
<i class="fa fa-home" style="font-size:24px;"></i>
<i class="fa fa-home" style="font-size:36px;"></i>
<i class="fa fa-home" style="font-size:48px;color:red;">Text</i>


Text

An example of using these icons on buttons:


Bootstrap font awesome

Bootstrap borders

There are also classes for contour color. They can be applied to images or text:


Bootstrap borders

Bootstrap images

Bootstrap defines 3 image classes: rounded-corners images, circular images, and thumbnails.
La toate cele trei clase se poate adauga optiunea: float-left sau float-right, pentru a pozitiona imaginea in stanga sau in dreapta paginii. For all three classes, you can add the float-left or float-right option to position the image to the left or right of the page. Bootstrap images

An image can center horizontally using the class: rounded mx-auto d-block, as follows:


Bootstrap center image

Now, using just a few of these examples, let's go to create a first web page:


<< Prev
Next >>

Visit my websites:

https://www.jwebsaints.com
https://www.jwebplants.com