Links
Utilities
Classes
| class
|
Description
|
| m-0 |
margin: 0 !important
|
| p-3 |
padding: 1rem !important
|
| mx-auto |
margin-right: auto !important
margin-left: auto !important
|
Sides
| Side
|
Description
|
| t |
top
|
| b |
bottom
|
| s |
start (left in LTR)
|
| e |
end (right in LTR)
|
| x |
left and right
|
| y |
top and bottom
|
Values
| Value
|
Description
|
| 0 |
0
|
| 1 |
$spacer * .25 = 0.25rem
|
| 2 |
$spacer * .5 = 0.5rem
|
| 3 |
$spacer = 1rem
|
| 4 |
$spacer * 1.5 = 1.5rem
|
| 5 |
$spacer * 3 = 3rem
|
| auto |
auto
|
| classe
|
Description
|
| text-center |
centrer aligned text
|
| text-end |
end (right) aligned text
|
| text-uppercase |
uppercased text
|
| fw-bold |
bold text
|
Components
|
<a data-bs-toggle="collapse" href="#filter" role="button" aria-expanded="false" aria-controls="filter">
<i class="fa fa-filter"></i>
</a>
<div class="collapse" id="filter">
</div>
|
Installation
Download compiled code or use CDN via jsDelivr or a package manager to get bootstrap.
|
|
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<!-- option 1: CDN -->
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"
integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l"
crossorigin="anonymous">
<!-- option 2: file -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<!-- Optional JavaScript -->
<!-- jQuery first, then bundle of Popper.js and Bootstrap.js -->
<!-- option 1: CDN -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"
integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns"
crossorigin="anonymous">
</script>
<!-- option 2: files -->
<script src="js/jquery-3.5.1.slim.min.js"></script>
<script src="js/bootstrap.bundle.min.js"></script>
</body>
</html>
|
