Bootstrap
How to use Bootstrap in webpage: There are two ways to include Bootstrap in the website.
- Include Bootstrap from CDN links:
- Download Bootstrap from getbootstrap.com and use it:
- Goto www.getbootstrap.com and click Getting Started. Click on the Download Bootstrap button.
Bootstrap comes bundled with basic HTML and CSS design templates that include many common UI components. These include Typography, Tables, Forms, Buttons, Glyphicons, Dropdowns, Buttons and Input Groups, Navigation, Pagination, Labels and Badges, Alerts, Progress Bars, Modals, Tabs, Accordions, Carousels, and many more. You can choose and pick a few of them, and with its default configuration quickly generate a UI that handles multiple browsers, devices, and resolutions with nice format.
If you are thinking that if you are using Bootstrap you will not need to know CSS, you are very wrong. Any front-end developer needs to learn CSS and HTML5. Bootstrap is removing a lot of tricky CSS parts from developers shoulders (like vendor specific prefixes) and it is offering basic default styling, but you still need to understand CSS. You don’t need to know how media queries work, but you need to understand how responsive design works. Bootstrap is not meant to teach you CSS, but it can help if you want. Examining source code in LESS or SASS is a great starting point.
Bootstrap modals offer flexible dialog prompts with the minimum required functionality, and it comes with smart defaults. Although modal is easy to use and offers rich customization, there are a few things we need to keep in mind to avoid common misuses.
Showing more than one modal prompt at the time.
Example-
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
</head>
<body>
<h1>Hello, world!</h1>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
</body>
</html>
CDN links
As reference, here are our primary CDN links.
(URL) CSShttps://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css
JShttps://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js
