Knowy 2.5

What is Bootstrap?

Bootstrap is a powerful and popular mobile first front-end framework for building responsive mobile first sites on the web. It is a latest version of Bootstrap, which uses HTML, CSS and JavaScript.

Why to use Bootstrap?
It contains mobile first styles throughout the entire library, instead of using them in the separate files.
With just the knowledge of HTML and CSS anyone can get started with Bootstrap. Also the Bootstrap official site has a good documentation.
It is supported by all popular browsers and its responsive CSS adjusts to Desktops, Tablets and Mobiles.
Provides a clean and uniform solution for building an interface for developers.
It contains beautiful and functional built-in components which are easy to customize.
It is an open source and provides web based customization.

What Bootstrap Package Includes?
Scaffolding: Bootstrap provides a basic structure with Grid System, link
styles, and background. This is covered in detail in the section Bootstrap

Basic Structure.
CSS: Bootstrap comes with the feature of global CSS settings, fundamental
HTML elements styled and enhanced with extensible classes, and an
advanced grid system. This is covered in detail in the section Bootstrap with
CSS.

Components: Bootstrap contains over a dozen reusable components built
to provide iconography, dropdowns, navigation, alerts, pop-overs, and much
more. This is covered in detail in the section Layout Components.

JavaScript Plugins: Bootstrap contains over a dozen custom jQuery plugins.
You can easily include them all, or one by one. This is covered in details in the
section Bootstrap Plugins.
Customize: You can customize Bootstrap's components, LESS variables, and
jQuery plugins to get your very own version

Download Bootstrap 5 from getbootstrap.com

1 Add the HTML5 doctype
Bootstrap 5 uses HTML elements and CSS properties that require the HTML5 doctype.
Always include the HTML5 doctype at the beginning of the page, along with the lang attribute and the correct title and character set:

2 Bootstrap 5 is mobile-first
Bootstrap 5 is designed to be responsive to mobile devices. Mobile-first styles are part of the core framework.
To ensure proper rendering and touch zooming, add the following tag inside the element:

<meta name="viewport" content="width=device-width, initial-scale=1">

The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device).
The initial-scale=1 part sets the initial zoom level when the page is first loaded by the browser.

3 Containers

Bootstrap 5 also requires a containing element to wrap site contents.
There are two container classes to choose from:
The .container class provides a responsive fixed width container
The .container-fluid class provides a full width container, spanning the entire width of the viewport

Bootstrap 5 Grid System
Bootstrap's grid system is built with flexbox and allows up to 12 columns across the page.
If you do not want to use all 12 columns individually, you can group the columns together to create wider columns:
The grid system is responsive, and the columns will re-arrange automatically depending on the screen size.
Make sure that the sum adds up to 12 or fewer (it is not required that you use all 12 available columns).

The grid system is responsive, and the columns will re-arrange automatically depending on the screen size.
Make sure that the sum adds up to 12 or fewer (it is not required that you use all 12 available columns).

Grid Classes
The Bootstrap 5 grid system has six classes:
.col- (extra small devices - screen width less than 576px)
.col-sm- (small devices - screen width equal to or greater than 576px)
.col-md- (medium devices - screen width equal to or greater than 768px)
.col-lg- (large devices - screen width equal to or greater than 992px)
.col-xl- (xlarge devices - screen width equal to or greater than 1200px)
.col-xxl- (xxlarge devices - screen width equal to or greater than 1400px)
The classes above can be combined to create more dynamic and flexible layouts.

Rows must be placed within a .container class for proper alignment and padding.
For responsive width use .container class and for fixed width across all viewport, use the .container-fluid class.
Use rows to create horizontal groups of columns.
Content should be placed within the columns, and only columns may be the immediate children of rows.
Columns contain padding for controlling the space between them.
If you place more than 12 columns in a row, then the columns will be placed in a new line.
Columns create gaps between column content via padding. Therefore, you can remove the margin from rows and padding from columns with .no-gutters class on the row.
You can make grid system responsive by using five grid breakpoints such as extra small, small, medium, large, and extra large.
Predefined grid classes like .col-4 are available for quickly making grid layouts. LESS mixins can also be used for more semantic layouts.

Bootstrap 5 Default Settings
Bootstrap 5 uses a default font-size of 1rem (16px by default), and its line-height is 1.5.
In addition, all

elements have margin-top: 0 and margin-bottom: 1rem (16px by default).

<h1> - <h6>

Bootstrap 5 styles HTML headings with a bolder font-weight and a responsive font-size.
You can also use .h1 to .h6 classes on other elements to make them behave as headings if you want:

Display Headings
Display headings are used to stand out more than normal headings (larger font-size and lighter font-weight), and there are six classes to choose from: .display-1 to .display-6:

<mark>

Bootstrap 5 will style and .mark with a yellow background color and some padding:

<abbr>

Bootstrap 5 will style the HTML element with a dotted border bottom and a cursor with question mark on hover.

<blockquote>

Add the .blockquote class to a

when quoting blocks of content from another source. And when naming a source, like "from WWF's website", use the .blockquote-footer class.
<dl>
Bootstrap 5 will style the HTML
element in the following way:
Coffee
- black hot drink
Milk
- white cold drink
<code>   
Bootstrap 5 will style the HTML <code> element in the following way:  

The following HTML elements: span, section, and div defines a section in a document.
Class Description Example
.lead Makes a paragraph stand out
.text-left Indicates left-aligned text
.text-break Prevents long text from breaking layout
.text-center Indicates center-aligned text
.text-decoration-none Removes the underline from a link
.text-end Indicates right-aligned text
.text-nowrap Indicates no wrap text
.text-lowercase Indicates lowercased text
.text-uppercase Indicates uppercased text
.text-capitalize Indicates capitalized text
.initialism Displays the text inside an element in a slightly smaller font size

Background Colors

The classes for background colors are: .bg-primary,
.bg-success,
.bg-info,
.bg-warning,
.bg-danger,
.bg-secondary,
.bg-dark,
.bg-light.

Note that background colors do not set the text color, so in some cases you'll want to use them together with a .text-* color class.

Bootstrap 5 Tables

The .table class adds basic styling to a table
The .table-striped class adds zebra-stripes
The .table-bordered class adds borders on all sides of the table and cells
The .table-hover class adds a hover effect (grey background color) on table rows
The .table-dark class adds a black background to the table
Combine .table-dark and .table-striped to create a dark, striped table
The .table-hover class adds a hover effect (grey background color) on table rows

.table-primary Blue: Indicates an important action
.table-success Green: Indicates a successful or positive action
.table-danger Red: Indicates a dangerous or potentially negative action
.table-info Light blue: Indicates a neutral informative change or action
.table-warning Orange: Indicates a warning that might need attention
.table-active Grey: Applies the hover color to the table row or table cell
.table-secondary Grey: Indicates a slightly less important action
.table-light Light grey table or table row background
.table-dark Dark grey table or table row background
The .table-responsive class adds a scrollbar to the table when needed (when it is too big horizontally)  
.table-responsive-sm    < 576px    

.table-responsive-md    < 768px   

.table-responsive-lg    < 992px    

.table-responsive-xl    < 1200px  

.table-responsive-xxl    < 1400px
Button Styles
<button type="button" class="btn">Basic</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-link">Link</button>
Basic Progress Bar

<div class="progress">
  <div class="progress-bar" style="width:10%"></div>
</div>


<div class="progress">
  <div class="progress-bar bg-success" style="width:20%"></div>
</div>


<div class="progress">
  <div class="progress-bar bg-info" style="width:30%"></div>
</div>


<div class="progress">
   <div class="progress-bar bg-warning" style="width:40%"></div>
</div>


<div class="progress">
  <div class="progress-bar bg-danger" style="width:50%"></div>
</div>


<div class="progress border">
  <div class="progress-bar bg-white" style="width:60%"></div>
</div>


<div class="progress">
  <div class="progress-bar bg-secondary" style="width:70%"></div>
</div>


<div class="progress border">
  <div class="progress-bar bg-light" style="width:80%"></div>
</div>


<div class="progress">
  <div class="progress-bar bg-dark" style="width:90%"></div>
</div>
Bootstrap 5 Spinners

To create a spinner/loader, use the .spinner-border class:
<div class="spinner-border text-muted"></div>   
<div class="spinner-border text-primary"></div>   
<div class="spinner-border text-success"></div>   
<div class="spinner-border text-info"></div>   
<div class="spinner-border text-warning"></div>   
<div class="spinner-border text-danger"></div>   
<div class="spinner-border text-secondary"></div>    
<div class="spinner-border text-dark"></div>    
<div class="spinner-border text-light"></div>
Basic Pagination

If you have a web site with lots of pages, you may wish to add some sort of pagination to each page.
<ul class="pagination">
  <li class="page-item"><a class="page-link" href="#">Previous</a></li>  
  <li class="page-item"><a class="page-link" href="#">1</a></li>  
  <li class="page-item"><a class="page-link" href="#">2</a></li>   
  <li class="page-item"><a class="page-link" href="#">3</a></li>   
  <li class="page-item"><a class="page-link" href="#">Next</a></li>  
</ul>