Welcome to the Bootstrap Framework!

Here you'll find information about the bootstrap CSS framework, installation, components, and instructions on how to use it.

Get Started

What is Bootstrap?

Bootstrap is a free open-source CSS framework created to help developers to build quickly and easily responsive, mobile-ready websites that are compatible with many browsers. Bootstrap uses the grid system with a 12-column grid and a serie of containers, rows and components ready to use. It's responsive and the margin between the columns within a row is 15px each side. The grid size options is listed bellow.

Bootstrap size options

	Extra Small	Small	Medium	Large	Extra Large	Extra extra Large
Class	xs	sm	md	lg	xl	xxl
Break Point	0	576px	768px	992px	1200px	1400px
Max-width	0	540px	720px	960px	1140px	1320px

Installation methods

CSS and JS: Download the pre-complied bootstrap CSS and JavaScript files from bootstrap website. This method works well because it will work without an internet connection as well.
Bootstrap CDN: Place that hosts libraries like bootstrap. Using this method just copy and paste the link tag from bootstrap website in your code. The advantage of using CDN is that the website loads faster if the browser already has the cache version in its memory.
Source files: All the files that the developers used to create bootstrap. It’s good to use this installation if the goal is to contribute to projects of customized bootstrap.
Package managers: Advanced installation. Used to work in more complex projects.

Bootstrap Icons

Bootstrap icons is a free library. One of the easiest ways to install Bootstrap Icons is through Icon's font. Copying and pasting the code below in the HTML file is a good method..

After pasting the coding in the header of the HTML file, go to icons.getbootstrap.com and search for an icon. Once you find it, click on the icon, and copy and past the Icon font code to your project. In addition, it is possible to modify the icon style by using the class text-color and changing the color style.

Examples 1:

Examples 2:

Location

Shopping Card

Telephone

Heart

Bootstrap Buttons

Bootstrap has a basic class for creating buttons. The btn class should be used with additional classes such as size, color and can be added to anchor tags, buttons, and inputs and the style will always look the same. There is also a special style called btn-block (which will take the full width of the container), active and disabled.

Examples:

Button 1

This is a button created by using the button tag and classes "btn btn-info" for button style.

Button 2

This is a button created by using the anchor tag and using the classes "btn btn-danger" for button style.

Link

Button 3

This is a button created by using the input tag and using the classes "btn btn-success" for button style.

Button 4

This is a button created by using the button tag and classes "btn btn-outline-warning" for button style.

Bootstrap Carousel

Carousel allows the developer to display a lot of content in a small area. In order to create a simple carousel it's necessary a few classes and attributes listed bellow:

Use the class carousel; also it's important to assign a unique id in case the page have more than one carousel.
Add a data-bs-ride carousel property; this property will make the images switch-over by default every 5 seconds.
Add the class carousel-inner.
Add the class carousel-item for each image in the carousel component. In each one of the images it's also required to add the classes d-block and w-100. This will make the images be a full width of the container.
The images can transition from one to another using the classes slide and carousel-fade.

Bootstrap Progress

Progress Bar is a graphic control element that can be used to visualize how far the user is in a process. It can be used to show the download progress, file transfer, or even a skills section in a Portfolio or website. Bootstrap provide different types of progress bars and the graphic bars can have a text over them to add a better experience to the user. Also, the bar can be styled to achieve different higths, formats and colors. In order to create a basic progress bar using Bootstrap the following is required:

A div tag with the class progress
A div tag child with the class progress-bar
The role, aria-valuenow, aria-valuemin and aria-valuemax attributes
Role: Describe the role of an element; in this case is progresssbar.
Aria-valuenow: Define the value of the progressbar; e.g. Skill 1 = 60.
Aria-valuemin: Set the minimum value allowed for a range; in this case is 0.
Aria-valuemax: Define the maximum value allowed for a range; in this case is 100.
The style attribute to indicate the width of the bar.