Bootstrap 5: A Comprehensive Guide for Advanced Client-Side Development, Lecture notes of Web Design and Development

Download Bootstrap 5: A Comprehensive Guide for Advanced Client-Side Development and more Lecture notes Web Design and Development in PDF only on Docsity!

Advanced Client-Side

Development

Lecture: 5 (part: 01) Bootstrap

Bootstrap

• Bootstrap is one of the most popular if not the most popular CSS Framework for developing responsive and mobile-first websites.
• Bootstrap 5 is the latest version of Bootstrap.
• Bootstrap is a free and open-source CSS framework directed at responsive, mobile-first front-end web development. It contains CSS- and JavaScript- based design templates for typography, forms, buttons, navigation and other interface components.

Where to get Bootstrap?

• There are two ways to start using Bootstrap 5 on your own web site.
• You can:
  • Include Bootstrap 5 from a CDN
  • Download Bootstrap 5 from getbootstrap.com

Bootstrap 5 CDN

• If you don't want to download and host Bootstrap 5 yourself, you can include it from a CDN (Content Delivery Network).
• MaxCDN provides CDN support for Bootstrap's CSS and JavaScript. You must also include jQuery:
• Many users already have downloaded Bootstrap 5 from MaxCDN when visiting another site. As a result, it will be loaded from cache when they visit your site, which leads to faster loading time. Also, most CDN's will make sure that once a user requests a file from it, it will be served from the server closest to them, which also leads to faster loading time.

Components that require jQuery

• Closable alerts
• Buttons and checkboxes/radio buttons for toggling states
• Carousel for slides, controls, and indicators
• Collapse for toggling content
• Dropdowns (also requires Popper.js for perfect positioning)
• Modals (open and close)
• Navbar (for collapsible menus)
• Tooltips and popovers (also requires Popper.js for perfect positioning)
• Scrollspy for scroll behavior and navigation updates

Downloading Bootstrap 5

• If you want to download and host Bootstrap 5 yourself, go to https://getbootstrap.com/, and follow the instructions there.

Short Description

• Bootstrap Containers
• Bootstrap Colors
• Bootstrap Text Colors
• Bootstrap Columns
• Responsive Columns
• Bootstrap Tables
• Bootstrap Alerts
• Bootstrap Buttons
• Bootstrap Cards

Bootstrap Containers

• The container class is one of the most important Bootstrap classes.
• Bootstrap 5 requires a containing element to wrap site contents.
• There are two container classes to choose from:
  • .container (fixed width)
  • .container-fluid (spans the entire width of the viewport)

• It provides margins, padding, alignments, and more, to HTML elements.

  This is a paragraph <p>This is a paragraph</p>

See Example 01

Bootstrap Text Colors

• This text is muted.

  This text is important.

  This text indicates success.

  This text represents some information.

  This text represents a warning.

  This text represents danger.

See Example 03

Bootstrap Columns

• Three equal-width columns, on all devices and screen widths:

  .col .col .col

See Example 04

Bootstrap Tables

• A boredered zebra-striped table:

  … … … …

See Example 06

Bootstrap Alerts

• Bootstrap provides an easy way to create predefined alert messages:

  <strong>Success!</strong> Indicates a successful or positive action.

See Example 07

Bootstrap Cards

• John Doe <p>Some example text.</p> See Profile

See Example 09

References

• https://www.w3schools.com