Developing a website requires knowledge of HTML, CSS and JavaScript. You need programming and integration skills in each of these three languages to master the creation of web applications. There are collections of tools containing HTML and CSS code and JavaScript plugins to facilitate the development and integration of an application. Today, we're going to take a look at Bootstrap, the most popular collection, whose latest version Bootstrap 5 was released a year ago.
What is Bootstrap?
Bootstrap is a Front-End Framework containing a collection of useful tools for creating and designing front-end web sites and applications. It contains HTML and CSS code, as well as optional JavaScript extensions, enabling the creation of forms, buttons, navigation tools and other interactive elements to be integrated into an application. This framework is designed to develop interactive designs adaptable to any type of screen, especially smartphones.
This platform was created by two developers who gravitated around the Twitter ecosystem, Mark Otto and Jacob Thornton, under the first name of Twitter Blueprint in 2010.
It was opened up to the general public during the first hackweek organized by Twitter, and in August 2011, they placed Bootstrap under an open source license.
Why use Bootstrap?
Bootstrap is easy to use, so anyone with a basic knowledge of HTML and CSS can understand it. What’s more, this framework is a “responsive” solution that adapts to phones, tablets and computers. Finally, the latest version of Bootstrap is compatible with all modern browsers (Firefox, Chrome, Safari, Edge (formerly Internet Explorer) and Opera).
How to download Bootstrap
There are several ways to download bootstrap. You can visit the official website and download the latest version online. You can also install Bootstrap via npm, Composer or Meteor, for example by executing one of the following command lines in a console:
If you don’t want to download Bootstrap yourself, you can include it from a CDN (Content Delivery Network). You can use jsDelivr to do this as follows:
How do I use Bootstrap?
We’re now going to look at how to create a basic template for an application or web page using Bootstrap. The first step is to create a basic HTML file to work with, such as :
Note: try to always include the tagged in the to enable touch zoom and ensure smartphone-friendly performance.
The next step is to transform our HTML file into a Bootstrap template. Here, we prefer the CDN method as it gives us better performance by reducing loading times, being hosted on multiple servers around the globe.
We can now create our first Bootstrap objects: containers. Containers are Bootstrap’s most basic layout elements and are required to use the grid system. They are essentially used to wrap content with a certain amount of padding. They are also used to align content horizontally at the center of the page in the case of a fixed-width layout. There are three types of container:
- container, which has a maximum width for each breakpoint
- container-fluid, which has a width of 100% for all breakpoints
- container-{breakpoint}, which has a width of 100% up to the specified breakpoint.
Here’s an example of container syntax:
