What's a theme?
In the last lesson, we made a CSS override file, to change one of BS's classes.
Other people have done that, too. Some of them have spent a lot of time on it, and come up with CSS override files that change the look of BS quite a lot. They release their override files, and we can use them. Some of them are free, some are not.
Let's call them theme files. That's not an official name, but it's common.
An example page
Let's make an example HTML file, so we can see the effects of themes. You can try it. It looks like this on a small display, with the standard theme:
It has a navbar, a title, a big box that's sometimes called a jumbotron, and a card.
The page is responsive, that is, it adapts to the size of the screen you're using. The screenshot is for a small screen, like a phone, or a tablet in portrait mode. You'll learn more about that later.
Google "free bootstrap themes", and you'll get many results. Not all of them are suitable, though.
First, we're using Bootstrap 5. Theme files created for versions 1, 2, 3, and 4 won't work for us.
Second, some themes are better than others. Maybe a theme maker, say, didn't get the carousel theming quite right. You'll have to try each theme, and see how it works for you.
Third, some themes are free. Some aren't. Your choice. (I think free is good.)
Bootswatch is a well-known theme source. They have both free and paid themes. They have BS 5 themes, so we can use them.
Make sure you use the BS 5 themes. The URL: https://bootswatch.com
Let's remind ourselves how BS is included in our pages. Most of it is in one CSS file:
- <link href="https://email@example.com/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
The file is called
bootstrap.min.css, as you can see.
Bootswatch offers different
bootstrap.min.css files, that you use in place of the standard
Themes from other sites are different. You keep the standard
bootstrap.min.css, and add a
link tag for a new CSS file that overrides some styles in the standard
bootstrap.min.css. But Bootswatch offers replacement
OK, let's get one. I'll go to Bootswatch, and download the Cyborg theme, like this:
I'll save the new
bootstrap.min.css file in a folder called
cyborg on my site.
Now, I'll change the
link tag to...
- <link rel="stylesheet" href="cyborg/bootstrap.min.css">
Then reload the sample page. It changes from this...
... to this...
It worked, but I don't care for it. I'll try another Bootswatch theme... how about Cerulean?
- Download Cerulean's
bootstrap.min.cssfile, and save it in a folder called
- Update the sample page, replacing
- Refresh the page.
OK, not bad.
Wait, this is so cool. You just replaced one file with something you downloaded, and the entire look changed! It's really that easy?
Yep. That's a reason to use a popular framework like BS. It's so popular, other people have made themes for it.
And if we didn't like something in the theme, we could change it, like we did in the last lesson?
If you find any free themes you like, please click the Suggest button, and let us know. Give the URL of the theme.
Use a Bootstrap theme
Make an HTML page with this code in it:
- <!doctype html>
- <html lang="en">
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
- <link href="https://firstname.lastname@example.org/dist/css/bootstrap.min.css" rel="stylesheet"
- integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
- <div class="container">
- <div class="row">
- <div class="col">
- <nav class="navbar navbar-expand-lg navbar-light bg-light">
- <button class="navbar-toggler" type="button" data-toggle="collapse"
- data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
- aria-expanded="false" aria-label="Toggle navigation">
- <span class="navbar-toggler-icon"></span>
- <div class="collapse navbar-collapse" id="navbarSupportedContent">
- <ul class="navbar-nav mr-auto">
- <li class="nav-item dropdown">
- id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true"
- <div class="dropdown-menu" aria-labelledby="navbarDropdown">
- <li class="nav-item">
- <li class="nav-item">
- <div class="mt-4 p-5 bg-light rounded">
- <h1 class="display-4">Hello, doggo fans!</h1>
- <p class="lead">DoggLand is the barkiest place in the world. </p>
- <p>Doggos are the <em>best!</em></p>
- <div class="card" style="width: 18rem;">
- <img src="https://web.skilling.us/sites/default/files/lessons/basic-sites/images/rosie1.jpg"
- class="card-img-top" alt="Rosie">
- <div class="card-body">
- <h5 class="card-title">Rosie</h5>
- <p class="card-text">A cute Jack Russel terrier. A little hyper. Now and then.</p>
- <script src="https://email@example.com/dist/js/bootstrap.bundle.min.js"
Change it, to use the Superhero theme from Bootswatch.
Submit your URL, as usual.
BS grids let you make any page layout you want. Let's learn how.