What does Bootstrap Package includes ?

It contains HTML and CSS-based design templates for typography, forms, buttons, and other interface components, as well as optional JavaScript extensions. A website has many different elements such as headings, lists, tables, images, buttons, forms, etc. All these fundamental HTML elements have been styled and enhanced with extensible classes.

The bootstrap package that you create should include the /config, /license, /software, and /content folders.

The Bootstrap package includes:

• Scaffolding: Bootstrap offers a basic structure with Grid System, media layout, background, and link styles.
• Components: Bootstrap consists of several reusable components built to provide dropdowns, iconography, pop-overs, navigation, alerts, carousel, breadcrumb, and much more.
• Customize: To get your version, it customizes Bootstrap’s components, fewer variables, importing Sass files and jQuery plugins.
• CSS: Features like global CSS settings, HTML elements styled and enhanced with extensible classes, and an advanced grid system are provided in Bootstrap.
• JavaScript Plugins: Bootstrap provides several custom jQuery plugins. Users can easily get them all from the bootstrap documentation.

These are the HTML elements for which styles are provided: Typography, Code, Tables, Forms, Buttons, and many more. Whether you need to add drop-down menus, pagination, tooltips, or alert boxes, Bootstrap has got you covered.

The pre-styled components are:

• Dropdowns
• Button Groups
• Navigation Bar
• Breadcrumbs
• Labels & Badges
• Alerts
• Progress Bar
• Cards
• Carousel
• Modal
• And many others.

How to include the bootstrap package: You can include the bootstrap package in many ways :

1. By using CDN: You can the following CDN links in the main HTML file to start with bootstrap. To get the latest CND link go to the Bootstrap website and click on Get Started.

• CSS:

<link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css” rel=”stylesheet” integrity=”sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3″ crossorigin=”anonymous”>

• JS:

<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js” integrity=”sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p” crossorigin=”anonymous”></script>

2. By using package managers: You can include the bootstrap package in your project by using the package managers:

• npm
• yarn
• RubyGems
• composer

3. Download the source files:

You can include the bootstrap package by downloading the source files of bootstrap. I have added the link for downloading the source files in the references section. You can check in there.

Example: In this example, I have created a card that is one of the most popular components in Bootstrap.

Output:

The output of the above code(Bootstrap card)