How to build a Bootstrap theme
Creating a theme based on your design is easy with Bootstrap. It’s made easier because Bootstrap comes with a variety of pre-built components and a bunch of utility classes that reduce development time. In this post, we’ll show you how simple it is to take a design and create it in Bootstrap.
Getting Started
To start you’ll need to set up your development environment with Bootstrap. We’re using Bootstrap 5.3 and on Bootstrap’s documentation, the Get Started page lists a few ways to do that. If you’re brand new to development, I recommend you download a copy of VS Code first. It will allow you to code your Bootstrap theme.
Once you’ve opened VS Code, start a new file. Copy and Paste Bootstrap’s starter code.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>
<body>
<h1>Hello, world!</h1>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
</body>
</html> Once you’ve added this to your file, save it. I saved mine to my desktop and called it “my-bootstrap-theme.html”. Once you’ve saved it, go to your file and open it in your web browser. You should see “Hello World” in black and white. Pretty boring so let’s change it to make sure Bootstrap is working.
Go back to VS Code and add this class to your Hello World element.
<h1 class="text-bg-primary">Hello, world!</h1>This is a helper class found in Bootstrap’s helpers. It’s a quick way to give us a blue background and white text. Refresh your browser to see if the text and background has changed as expected. If yes, then let’s keep going. If not, you may need to go back and start from the beginning.
In the next post, I’ll outline how we can use Bootstrap’s pre-built components and utility classes to flesh out our theme.