Introduction
Setup
Download and include files
These files are downloaded and stored within the ‘asset’ folder. Next, we need to import these files into HTML document as below,
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="asset/css/bootstrap.min.css" rel="stylesheet">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="asset/js/bootstrap.bundle.min.js"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="assett/umd/popper.min.js"></script>
<script src="asset/js/bootstrap.min.js"></script>
-->
</bodyAdd CDN
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js">
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.min.js"></script>
-->
</body>
</html>Check setup
Let's write our first code to check the correct Bootstrap setup.
Note: We do not have to memorize the code to create a 'downgrade' button. All templates are available at Bootstrap website. Copy and paste the code from there and change the code according to need as shown in this study.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Tutorial</title>
<!-- CSS -->
<link href="asset/css/bootstrap.
</head>
<body>
<div class="dropdown">
<button class="btn btn-success dropdown-toggle" type="button" id="dropdownMenu1" data-toggle=
˓→"dropdown" aria-haspopup="true" aria-expanded="true">Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
<!-- Javascript -->
<!-- put jQuery.js before bootstrap.min.js; and then add custom jquery -->
<script src="asset/js/jquery-3.3.1.min.js"></script>
<script src="asset/js/bootstrap.min.js"></script>
</body>
</html>
web page result:
Grid system
Bootstrap divides each row into 12 columns. Thereafter following the instructions can be used to specify the scope columns
- col-xxl-4: It will select 4 columns choose any number between 1-12. th 'xxl' stand for extra extra large screen
- col-xl-4: It will select 4 columns choose any number between 1-12. th 'xxl' stand for extra large screen
- col-lg-4 : It will select 4 columns. Choose any number between 1-12. The ‘lg’ stand for large screen (e.g. large computer screen).
- col-md-5 : ‘md’ = medium screen
- col-sm-3 : ‘sm’ = small screen
- col-xs-3 : ‘xs’ = extra small screen
- col-lg-offset-4 : skip first 4 columns. Simimlary use ‘md’, ‘sm’ and ‘xs’ with offset
- For easy reference, in the code below the CSS code (Rows 9-21) is used to fill in columns with colors
- and border.
- Columns (Rows 28-30) should be defined within the 'line' of the section (Line 27).
- Also, the total width of the individual columns should not exceed 12.
- Finally, if we use 'col-md-4' without defining 'lg', 'sm' and 'xs', then the rule 'md' will apply to higher
- screen size 'lg', but not screen size 'sm' and 'xs'. Similarly, if we use '' 'without defining
- 'lg', 'md' and 'xs', in which case the law will apply to the screen size 'lg' and 'md' but not to 'xs'
