Working with a Bootstrap theme lets us take our box cake mix to the next level. In this lesson, we will practice downloading and customizing a Bootstrap theme so that you’re equipped to build beautiful and responsive websites in no time.
Let’s say you’ve just finished shopping for a Bootstrap 5 theme. For the sake of this example, let’s say you’ve selected the QuickStart theme from BootstrapMade.com. What’s next?
Click the Download button and select the Free Download. You’ll see a compressed “.zip” file of the theme land in your Downloads folder (or Desktop if you opted, as we recommended, to set up your computer that way).
Navigate to your webdev folder and create a new folder. Call it theme-test. Drag your compressed theme folder into your theme-test folder. Unzip (double click) your compressed theme folder to access all the QuickStart theme files. You should see an index.html file and some folders. Explore the assets folder and you’ll find a css folder and an img folder.
Next, Open VS Code > Open Folder > Open Theme Test Folder > index.html. You’ll see a familiar HTML file with lots of standard Bootstrap components.
As you continue scrolling, you’ll see some convenient green-colored comments that define sections of the page. This will come in handy when we start customizing the CSS. With your knowledge of elements and how classes function, you should be able to see how the code translates to the content and layout you see if you preview the homepage in a browser.
Let’s go ahead and do that. Preview the theme in Chrome. We can get a deeper understanding of how the theme’s code is functioning by right-clicking anywhere on the page and selecting Inspector. (Dive more into how to use the Inspector in the Inspector Gadget lesson. This might seem a little confusing or complicated at first, but work through the tutorial until you feel comfortable. Again, help is available if you get stuck – but try this out first!)
Now that you’re familiar with the code, let’s start making this page our own. In VS Code, create a new file and call it custom.css. Save it to the theme’s css folder. You should now have a main.css file and a custom.css file in this folder. Link your new custom.css file in your index.html file.
It’s time to start customizing the theme to our preferred fonts, colors, and other style properties.
Exercise
Your mission is to use the tools and skills we’ve learned so far to target class selectors and elements in the QuickStart theme to customize the Header and Hero sections of the site to promote your custom gift wrap business, Quick Wrap.
Download this folder to get started. It contains Quick Wrap’s brand images, colors, and fonts, which we’ll need to customize our homepage. You will need to add the images to the img folder in the QuickStart theme folder.
Getting Started
As you read earlier, it’s helpful to get a lay of the land. Exploring the theme’s HTML files and assets gives you a lot of useful information to get started with customizing. So first step – check out your theme’s pages and assets:
- Identify where the theme stylesheet is located.
- Browse the img folder and note the image names. These come in handy later. Also make sure that the Quick Wrap brand images you downloaded are in this folder.
- Open the index.html file in VS Code and take a look at the helpful comments the theme developers have left for you.
- Now, open the theme’s stylesheet. How are the styles organized? You’ll need to explore whether the theme has root styles for headers, links, etc. Knowing whether you’re trying to target a root element or a section element will be important in the steps to come.
Header Customization
First up, the Header section. We’re going to add our own logo and update the site name to our company name QuickWrap. Find this code within the header tags of the theme index file.
<a href="index.html" class="logo d-flex align-items-center me-auto">
<img src="assets/img/logo.png" alt="">
<h1 class="sitename">QuickStart</h1>
</a>Notice that the logo displayed is called logo.png. We simply need to update the link to:
<img src=”assets/img/quickwrap-logo.png” alt=”logo”>Now change the site name in the <h1> tags below that to Quick Wrap.
Next, we want to change a few things in the navigation bar to match our brand colors – menu item text & hover color, and the Get Started button.
First, let’s find the <nav> tags to figure out what our nav menu class selector is called. We can see in the first line of code that our navbar has an id called navmenu and a class called navmenu:
<nav id="navmenu" class="navmenu">Before we make any changes to the style, remember that when we customize a Bootstrap template, we never make changes to the theme’s stylesheet, main.css. We only make changes within our custom stylesheet, custom.css.
So, with the class selector that we want to target in mind, open main.css from the theme’s css folder.
Hit Command-F to search for “navmenu.” One of the first items we see is a green comment that labels Nav Menu Colors. Well, that sounds promising. When we take a closer look, we see that the theme creators have kindly organized all of the nav bar color styles in one place and labeled the selector as “:root”. Copy the whole declaration that follows:
:root {
--nav-color: #313336; /* The default color of the main navmenu links */
--nav-hover-color: #77b6ca; /* Applied to main navmenu links when they are hovered over or active */
--nav-mobile-background-color: #ffffff; /* Used as the background color for mobile navigation menu */
--nav-dropdown-background-color: #ffffff; /* Used as the background color for dropdown items that appear when hovering over primary navigation items */
--nav-dropdown-color: #313336; /* Used for navigation links of the dropdown items in the navigation menu. */
--nav-dropdown-hover-color: #77b6ca; /* Similar to --nav-hover-color, this color is applied to dropdown navigation links when they are hovered over. */
}And paste this declaration into your custom.css file.
Now we can update the colors to match our brand colors, darkred and ghostwhite as follows:
:root {
--nav-color: ghostwhite; /* The default color of the main navmenu links */
--nav-hover-color: darkred; /* Applied to main navmenu links when they are hovered over or active */
--nav-mobile-background-color: #ffffff; /* Used as the background color for mobile navigation menu */
--nav-dropdown-background-color: #ffffff; /* Used as the background color for dropdown items that appear when hovering over primary navigation items */
--nav-dropdown-color: #313336; /* Used for navigation links of the dropdown items in the navigation menu. */
--nav-dropdown-hover-color: darkred; /* Similar to --nav-hover-color, this color is applied to dropdown navigation links when they are hovered over. */
}Hit save and preview the change in your browser. The color of the navbar text should now be a dark red color.
Hero Section Customization
Next, we’re going to customize our Hero section to change up the background image, button colors, and font styles. Start by scrolling down to the Hero section of the index file. The first thing you’ll notice is that this section has an id and class properties.
<section id =“hero” class=”hero section”>This line of code is what allows users to jump to this section using a link, i.e. from the navbar or another part of the page, and the class selector will come in handy when we’re targeting elements within this section.
Words
Let’s first change the text in this section to our brand copy:
- Change ‘Welcome to Quick Start” to “Welcome to Quick Wrap.”
- Now, change the text below the Welcome message to read: “Custom gift wrapping that makes a statement.”
We’ll come back to our text after we make a few more visual changes.
Images
Now, let’s take a look at the first div tags. It has a class property called “hero-bg.” What do you think this div tag is set up to display? If you thought “the background of something,” you’d be correct. If you look at the line below it, we see code calling an image to the page, so that tells us that this div element contains our background image. Let’s change it to reflect our QuickWrap brand. There’s an image titled “red-bg” in your folder. Call to this image in your code and give it an alt text:
<img src="assets/img/red-bg.jpg" alt=”red wavy background”>Note: If you have not moved the QuickWrap images into the theme’s img folder, you will not find this image using the code above.
Hit save and refresh your preview. You should now see your new background image on the page.
Now let’s change the theme’s graphic – a large illustration of an office worker – to our lovely custom wrapped gift product image. The next div element contains a lot more code. We’ll be customizing more of this code in a second, but first, let’s find the code that calls to the theme graphic and change it so that we call to “gift-box-red-ribbon.jpg.”
Button colors
Now, we need to change the colors of our buttons to reflect our brand colors. Just like with our Header section changes, we need to identify the class selector we’ll need to search for in the theme’s stylesheet, main.css.
If we look at this div element, it contains two button elements:
<div class=”d-flex” data-aos=”fade-up” data-aos-delay=”200″>
<a href="#about" class="btn-get-started">Get Started</a>
<a href="https://www.youtube.com/watch?v=Y7f98aduVJ8" class="glightbox btn-watch-video d-flex align-items-center"><i class="bi bi-play-circle"></i><span>Watch Video</span></a>
</div>We’re going to tackle the Get Started button first, so we’re going to be searching for “btn-getting-started” within main.css. Let’s do that now. You should find two declaration for our button selector that look like this:
.hero .btn-get-started {
color: var(--contrast-color);
background: var(--accent-color);
font-family: var(--heading-font);
font-weight: 500;
font-size: 15px;
letter-spacing: 1px;
display: inline-block;
padding: 10px 28px;
border-radius: 50px;
transition: 0.5s;
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.1);
}
.hero .btn-get-started:hover {
color: var(--contrast-color);
background: color-mix(in srgb, var(--accent-color), transparent 15%);
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.1);
}Copy both declarations and paste them into your custom stylesheet. We now have the css code we need to change the button background color, button text, and the background color and button text for when a user hovers over the button.
Let’s change the color values to match our changes from the navbar:
.hero .btn-get-started {
color: darkred;
background: ghostwhite;
font-family: var(--heading-font);
font-weight: 500;
font-size: 15px;
letter-spacing: 1px;
display: inline-block;
padding: 10px 28px;
border-radius: 50px;
transition: 0.5s;
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.1);
}
.hero .btn-get-started:hover {
color: ghostwhite;
background: color-mix(in srgb, var(--accent-color), transparent 15%);
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.1);
}Now, it’s your turn. Use the same method we just practiced to change the button and text colors for the Watch Video button. Remember to copy the full declaration for any class selector you see related to “btn-watch-video.”
Curious how to change the icon you see in the Watch Now button? Check out Bootstrap’s helpful Icon guide. Challenge yourself and practice switching out icons in your code.
Fonts
Finally, let’s update these font types to support Quick Wrap’s visual brand. For this exercise, we’re going to focus on the <h1> elements, but you will likely want to customize paragraph fonts and other header tags in Project 2 to fully make it your own. You’ll use a similar process to what we’ll do here.
First, we’ll change the font type. We know we want to target the <h1> tag, so head on over to the theme stylesheet and search for “h1.”
You should see 7 results. The first declaration looks kind of interesting:
h1,
h2,
h3,
h4,
h5,
h6 {
color: var(--heading-color);
font-family: var(--heading-font);
}You scroll up a bit and see that this declaration for all these header elements is part of the theme’s General Styling and Shared Classes, per the stylesheet comments. That tells us a lot. First, it tells us that this text color and font family is the default for headers, sitewide. That’s good to know. Let’s go ahead and copy that declaration over to our custom stylesheet. We’re going to refer to our Quick Wrap brand guide and see that our brand header font is “Radley.” That’s not a font that comes standard in VS Code, so we’ll need to grab the code from Google Fonts. Need a refresher on how to do that? Review our Fonts lesson from the HTML & CSS module.
So, once you’ve added the Radley font family link in your <head> tags and added the fonts CSS rules to your custom stylesheet, your code should look like this:
h1 {
color: var(--heading-color);
font-family: "Radley", serif;
}Now, we want to customize these colors a bit. There are three headers in the Header and Hero sections that we should update. Let’s return to main.css to keep looking for any h1 class selectors associated with our Header and Hero sections.
We find a few declarations that look important to our h1 colors:
.header .logo h1 {
font-size: 30px;
margin: 0;
font-weight: 700;
color: var(--heading-color);
}
.hero h1 span {
color: var(--accent-color);
}So, let’s revisit our code, to get a sense of how to apply our color changes.
- Notice that the Quick Wrap site title is positioned next to the site logo.
- Notice that there’s an <h1> tag in our Hero section that includes “Welcome to Quick Wrap,” but there’s a <span> tag around Quick Wrap.
Take a moment to think about what clues we have now to customize our colors. Now it’s your turn. Copy and paste the h1 declarations above in your custom.css file. Change the color values in each declaration so that your Quick Wrap text is darkred, and Welcome to is ghostwhite.
Hit save and preview your homepage for the last time. It should look like this.
Nice work! These are the skills you’ll need to customize a Bootstrap theme. If you want to keep practicing, do it! The more you practice now, the easier Project 2 will be.