BootStrap | Notion

Introduction to Bootstrap 5

Overview of Bootstrap Framework

Bootstrap is a popular front-end framework that helps developers build responsive and mobile-first websites quickly. Developed by Twitter, it provides a collection of CSS and JavaScript components that make web development easier. Bootstrap 5 is the latest version, bringing improvements over previous versions, including:

Improved Grid System: Introduces a more flexible grid with better responsiveness.
No jQuery Dependency: Bootstrap 5 removes jQuery in favor of vanilla JavaScript, improving performance.
New Utility Classes: More utility classes for spacing, alignment, and responsiveness.
Enhanced Forms: Better customization for form elements.
Better Performance: Improved CSS and JavaScript to make pages load faster.

Bootstrap is widely used because it allows developers to create visually appealing websites with minimal effort, following a mobile-first approach.

Setting Up Bootstrap 5

There are multiple ways to set up Bootstrap 5 in a project:

1. Using a CDN (Content Delivery Network) (Recommended for Quick Setup)

CDN links allow you to use Bootstrap without downloading files. Add the following lines in the <head> section of your HTML file:

<!-- Bootstrap CSS -->
<link href="<https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css>" rel="stylesheet">

For Bootstrap’s JavaScript components, add this before the closing </body> tag:

<!-- Bootstrap JavaScript -->
<script src="<https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js>"></script>

2. Installing via npm (For Advanced Development and Customization)

If you're working with a project that requires a build system (e.g., Webpack, Vite), you can install Bootstrap using npm: