Bootstrap is a popular, open-source front-end framework for developing responsive and mobile-first web pages. It includes a collection of CSS and JavaScript tools designed to help developers quickly build modern websites. Bootstrap provides pre-designed components and layouts, allowing for consistent and visually appealing designs without having to start from scratch.
Key Features of Bootstrap
Responsive Design: Built with a mobile-first approach, ensuring that web pages are optimized for all devices.
Pre-designed Components: Includes ready-to-use components like navigation bars, buttons, forms, modals, and more.
Grid System: A flexible grid system that helps create complex layouts easily.
Customization: Allows for extensive customization through variables and theming.
Browser Compatibility: Ensures compatibility across major browsers and devices.
Explanation of the Example
Including Bootstrap CSS:
The < link> tag in the < head> section includes the Bootstrap CSS file from a CDN.
Navbar:
The < nav> element with classes navbar, navbar-expand-lg, and navbar-light bg-light creates a responsive navigation bar.
The navbar-brand class is used for the brand name/logo.
The navbar-toggler button is used to toggle the collapse of the navbar on smaller screens.
The collapse navbar-collapse class is used to wrap the collapsible content.
Grid System:
The container class creates a responsive fixed-width container.
The row class creates a horizontal group of columns.
The col-md-6 class creates two columns each spanning 6 out of 12 columns on medium to large screens, creating a 50/50 layout.
Buttons:
The btn btn-primary classes are used to create a styled button with Bootstrap's primary button style.
Including Bootstrap JS:
The < script> tags at the bottom of the < body> include jQuery, Popper.js, and Bootstrap's JavaScript plugins from a CDN.
CDN links
As reference, here are our primary CDN links.
Description URL
CSS https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css
JS https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js
Internet Explorer
Internet Explorer is not supported. If you require Internet Explorer support, please use Bootstrap v4.
Modals and dropdowns on mobile
Overflow and scrolling
Support for overflow: hidden; on the < body> element is quite limited in iOS and Android. To that end, when you scroll past the top or bottom of a modal in either of those devices’ browsers, the < body> content will begin to scroll. See Chrome bug #175502 (fixed in Chrome v40) and WebKit bug #153852.
iOS text fields and scrolling
As of iOS 9.2, while a modal is open, if the initial touch of a scroll gesture is within the boundary of a textual < input> or a < textarea>, the < body> content underneath the modal will be scrolled instead of the modal itself. See WebKit bug #153856.
Navbar Dropdowns
The .dropdown-backdrop element isn’t used on iOS in the nav because of the complexity of z-indexing. Thus, to close dropdowns in navbars, you must directly click the dropdown element (or any other element which will fire a click event in iOS).
Browser zooming
Page zooming inevitably presents rendering artifacts in some components, both in Bootstrap and the rest of the web. Depending on the issue, we may be able to fix it (search first and then open an issue if need be). However, we tend to ignore these as they often have no direct solution other than hacky workarounds.
Validators
In order to provide the best possible experience to old and buggy browsers, Bootstrap uses CSS browser hacks in several places to target special CSS to certain browser versions in order to work around bugs in the browsers themselves. These hacks understandably cause CSS validators to complain that they are invalid. In a couple places, we also use bleeding-edge CSS features that aren’t yet fully standardized, but these are used purely for progressive enhancement.
These validation warnings don’t matter in practice since the non-hacky portion of our CSS does fully validate and the hacky portions don’t interfere with the proper functioning of the non-hacky portion, hence why we deliberately ignore these particular warnings.