Bootstrap 5 was released as a final public version. This essentially means you should prepare migrating from previous version and use the new version for building any new websites. Whether you are migrating or starting a new site, you should first learn the bare minimum or starter template. In this tutorial we will explain how to create base Bootstrap 5 starter template for starting your projects with simple examples.
Using Bootstrap 5 Starter Template
- Downloading Bootstrap source files
- Hosting Bootstrap 5 files on your server
- Using Bootstrap 5 starter template with CDN links
- Customizing Bootstrap 5 components
- Taking starter template further
- Using bundled script file in version 5
- Including Bootstrap icons
- Using static site generators
1. Downloading Bootstrap 5 Source Files
As an end user, there are two ways to make use of Bootstrap CSS and JavaScript files. One is to download the precompiled files and include them in your projects and the second is to make use of the CDN links.
You can learn more about getting Bootstrap files in getting started with Bootstrap article.
2. Using Bootstrap Files on Your Own Server
You can download the precompiled CSS and JavaScript files from the GitHub repository. The zip file should have CSS and JS folders. Below are the files available inside CSS folders:
There are multiple CSS versions available in the downloaded source file:
- Default and minified CSS files which you can use with any project
- Utilities file
- Grid only version
- Reboot only version
On a production server, you can use the minified version “bootstrap.min.css” for all your needs. The source map files help to map between the source and the precompiled minified versions. You don’t need to use reboot, grid and map files for regular usage on the sites.
Note: When you only use “bootstrap.min.css” file on your site, some browsers like Safari will show error or warning in developer console that source map file is missing. In order to fix the error, open the Bootstrap CSS file and remove the last line “/*# sourceMappingURL=bootstrap.min.css.map */“.
Similar to CSS files, the JS folder will have “bootstrap.js” and “bootstrap.bundle.js“. The “bootstrap.js” file does not include Popper script but the bundle version includes the Popper script. With earlier Bootstrap 4 version, you need to include jQuery separately for the JavaScript components to work properly. However, Bootstrap 5 does not need jQuery as part of the framework and designed to work without jQuery.
With the above understanding the source files will have the following structure containing lot of CSS and JS files.
bootstrap/
├── css/
│ ├── bootstrap-grid.css
│ ├── bootstrap-grid.css.map
│ ├── bootstrap-grid.min.css
│ ├── bootstrap-grid.min.css.map
│ ├── bootstrap-grid.rtl.css
│ ├── bootstrap-grid.rtl.css.map
│ ├── bootstrap-grid.rtl.min.css
│ ├── bootstrap-grid.rtl.min.css.map
│ ├── bootstrap-reboot.css
│ ├── bootstrap-reboot.css.map
│ ├── bootstrap-reboot.min.css
│ ├── bootstrap-reboot.min.css.map
│ ├── bootstrap-reboot.rtl.css
│ ├── bootstrap-reboot.rtl.css.map
│ ├── bootstrap-reboot.rtl.min.css
│ ├── bootstrap-reboot.rtl.min.css.map
│ ├── bootstrap-utilities.css
│ ├── bootstrap-utilities.css.map
│ ├── bootstrap-utilities.min.css
│ ├── bootstrap-utilities.min.css.map
│ ├── bootstrap-utilities.rtl.css
│ ├── bootstrap-utilities.rtl.css.map
│ ├── bootstrap-utilities.rtl.min.css
│ ├── bootstrap-utilities.rtl.min.css.map
│ ├── bootstrap.css
│ ├── bootstrap.css.map
│ ├── bootstrap.min.css
│ ├── bootstrap.min.css.map
│ ├── bootstrap.rtl.css
│ ├── bootstrap.rtl.css.map
│ ├── bootstrap.rtl.min.css
│ └── bootstrap.rtl.min.css.map
└── js/
├── bootstrap.bundle.js
├── bootstrap.bundle.js.map
├── bootstrap.bundle.min.js
├── bootstrap.bundle.min.js.map
├── bootstrap.esm.js
├── bootstrap.esm.js.map
├── bootstrap.esm.min.js
├── bootstrap.esm.min.js.map
├── bootstrap.js
├── bootstrap.js.map
├── bootstrap.min.js
└── bootstrap.min.js.mapThe basic starter template should look like below when you host the above files on your server:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta Tags for Bootstrap 5 -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap 5 CSS -->
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
</head>
<body>
Add Your Content Here
<!-- Bootstrap 5 Scripts -->
<script src="assets/js/bootstrap.bundle.min.js"></script>
</body>
</html>Remember, if you are not using the bundled JS file then you need to include separate JS and popper script files. If you have noticed properly, there are many additional tags and scripts in the starter template.
- Bootstrap uses HTML5 DOCTYPE for the templates. Hence, ensure to include <!DOCTYPE HTML> at the start of your HTML template in order to avoid unexpected behavior.
- You have to use the viewport meta tag to ensure the responsiveness of the template based on the rendering device.
- In case if you add jQuery, make sure to add before the “popper.min.js” and “bootstrap.min.js” scripts.
- You can also download the Popper script from Popper site and upload them on your site’s “assets/js/” folder.
- Remember Popper script is essential for Bootstrap plugins to work properly. Popper is a JavaScript library mainly used for positioning floating elements like tooltip component in Bootstrap.
Note we have used “assets/css/bootstrap.min.css” and “assets/js/bootstrap.bundle.min.js” as file paths. It is a good habit to keep all CSS and JS files in separate folder so that it is easy to manage. This essentially means you should create corresponding folders on your server and upload the Bootstrap CSS and JS files manually. Also keep the images in separate “images” folder and HTML files on the root of your site. So the entire structure should look something like below on your server:
The “Theme Folder” in the above example is your site’s root folder which should be your domain or subdomain or subdirectory.
3. Using Starter Template with CDN
Hosting all needed files on your server is the correct way but it will impact the loading speed and hosting capacity. So, we recommend to use CDN links for CSS and JS files instead of hosting them on your own server. This will ensure the fast delivery of those static files and improve the page loading speed. Below is a Bootstrap 5 starter template with CDN links for CSS and scripts. You can simply add content on the body section to start building your site or theme. Earlier, Bootstrap 4 version was from Bootstrap CDN network and the latest version 5 is from jsDelivr.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
</body>
</html>4. Customizing Bootstrap Source Files
Using the complete template files are not required in all cases. For example, when you want to use only Bootstrap buttons then you can only use the appropriate styles for the buttons. Bootstrap offers a customizer for the previous version 3.4 where you can choose what components are required and generate the precompiled files.
At this moment there is no detailed customizer available for Bootstrap 5 version. However, you can refer the official documentation site for getting more details on customizing Bootstrap 5.
5. Taking Starter Template Further
Now that you have your final starter template either hosted on your server or using CDN links. The next step is to add content and start building your site. Below is one simple example in which we have created different contextual buttons using default Bootstrap button classes.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
</head>
<body>
<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-link">Link</button>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
</body>
</html>The output should look like below on the browser:
Ideally there is no need of using jQuery, popper and Bootstrap script files for creating simple buttons which are controlled through CSS. We have shown the example for the sake of completeness of the starter template. Also when you add more components, the bundled script file should be included.
6. Using Bootstrap Bundled Script Version
As explained above, Bootstrap 5 has a bundled script file combining “bootstrap.min.js” and “popper.min.js“. So if you want to use the bundled version then modify the starter template like below using “bootstrap.bundle.min.js” file.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta Tags for Bootstrap 5 -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap 5 CSS -->
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
</head>
<body>
Add Your Content Here
<!-- Bootstrap 5 Scripts -->
<script src="assets/js/bootstrap.bundle.min.js"></script>
</body>
</html>7. Including Bootstrap Icons in Template
Bootstrap version 5 comes with 1300+ free SVG icons that you can easily include in your websites. It helps to eliminate the dependency of external icons like Font Awesome icons. There are multiple ways to include the icons in your starter template and the best option is to use CDN CSS like below. We have shown an example icon in the body section with alert component. You can get the complete list of CSS classes for the icons here.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
</head>
<body>
<div class="alert alert-info" role="alert">
<i class="bi-star"></i>
This is an info alert and <a href="#" class="alert-link">here is a link with info color</a>.
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
</body>
</html>8. Using Static Site Generators
It is easy to create a static website using Bootstrap starter template, but modifying multiple static files on a bigger site will consume lot of time. A single webpage contains different sections like header, main content, footer and sidebar. All sections other than the main content are used site wide with the same information. Static generators use the concept of partials by having the base templates for each of the sections like header, footer and sidebar. Finally all these base templates are assembled with the main body content on each pages separately.
Whenever there is a change required on the header, footer and sidebar, you can modify the base templates instead of modifying each and every page individually. When the site is ready you can generate the HTML, CSS and JavaScript files to upload them on your server. One of the popular static site generator is Harp.js which you can install on your local machine for further development of the starter template. Remember Harp.js needs Node.js/NPM as a dependency hence you should have installed these components beforehand. Alternatively, you can use generator apps like Mobirise to make use of Bootstrap framework without the need of understanding coding.
Leave a Reply
Your email is safe with us.