A popular front-end framework for creating responsive and mobile-first websites is Bootstrap. It offers a selection of pre-built JavaScript and CSS components that may be quickly adjusted to produce webpages with a polished appearance. The many Bootstrap iterations are shown below, along with descriptions and usage examples:
1. Bootstrap 1 – Released in August 2011, this was the first version of Bootstrap. It included a basic set of CSS and JavaScript components for building simple websites.
Example: <div class=”container”>…</div>
2. Bootstrap 2 – Released in January 2012, this version included more advanced features and components such as responsive design, icons, and improved documentation.
Example: <div class=”row”>…</div>
3. Bootstrap 3 – Released in August 2013, this version introduced a mobile-first approach and a more modular architecture. It also included a redesigned flat UI and added support for Sass.
Example: <div class=”col-md-6″>…</div>
4. Bootstrap 4 – Released in January 2018, this version was a major update that introduced a new flexbox-based grid system and removed support for older browsers. It also included new components such as cards, utility classes, and a redesigned documentation site.
Example: <div class=”card”>…</div>
5. Bootstrap 5 – Released in May 2021, this version is the latest and most significant update to Bootstrap. It introduced significant changes, such as dropping jQuery dependency, and simplifying the framework’s core styles, which resulted in smaller file sizes, faster load times, and easier customization. It also introduced a few new features and components, such as the off-canvas menu, floating labels, and the accordion component.
Example: <button class=”btn btn-primary”>Click me</button>
Each version of Bootstrap has its own set of features and components, and upgrading to a newer version can offer improved performance and more modern design options.
Setting up Bootstrap
To set up Bootstrap on your website, follow these steps:
1. Download Bootstrap from the official website: https://getbootstrap.com/docs/5.1/getting-started/download/
2. Extract the downloaded file, and you will see two folders: css and js. These folders contain the CSS and JavaScript files you need to use Bootstrap.
3. Copy the css and js folders to your website’s root directory.
4. In the <head> section of your HTML page, include a link to the Bootstrap CSS file:
<head>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
5. Link to the Bootstrap JavaScript files at the end of the <body> section of your HTML file:
<body>
<!-- your HTML content -->
<script src="js/bootstrap.bundle.min.js"></script>
</body>
It’s advised to utilize bootstrap.bundle.min.js rather than the individual plugin files because it contains both the Bootstrap JavaScript plugins and dependencies like Popper.js.
Start using Bootstrap classes and components in your HTML markup. You can find examples and documentation on the official Bootstrap website: https://getbootstrap.com/docs/5.1/getting-started/introduction/