Working with Bootstrap Themes

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 Agency theme1 and have downloaded the .zip of the theme. What next?

Panel Two

For Panel Two, your next steps are pretty straightforward. You expand the .zip file2 you’ve just downloaded, open the extracted folder, and move all its contents to your panel-two folder.

Most of the stuff in there should look pretty familiar, with the addition of an assets folder that we can explore in a bit. To tackle Panel Two, all you really need to do is open index.html in VS Code. You’ll see a reassuringly familiar HTML file with lots of standard Bootstrap components:

As you continue scrolling, you’ll see some theme-specific ids and some classes with fa in them that refer to the icon font Font Awesome, but for the most part, everything should be pretty accessible to you at this point.

Proceed with moving your content from Panel One index.html over to the Agency theme index.html in your Panel Two folder. You’ll need to make a copy of any images from Panel One that you’d like to use in Panel Two—they’ll go in the theme’s img folder, which is located in that assets folder.3 Remember, you can reconfigure and add any HTML you’d like for Panel Two, but no changes to CSS or JavaScript are allowed.

Before moving on, a solution to one small puzzle many of you may encounter. Many Bootstrap themes use the CSS background-image property to set a full-width background image, often at the top of a page. This is easy enough to update in CSS—but wait! We’re not allowed to touch CSS for this panel. Thankfully, there’s a simple, elegant solution to this conundrum. For those of you who like puzzles, I’ll put the solution in a footnote at the end of this sentence so you can try to solve it on your own.4

Once you’ve completed moving your content over to Panel Two, it’s time to proceed to Panel Three.

Panel Three

The first step of Panel Three is super straightforward. In your panel-two folder in Finder, select all your files (Cmd + A), copy them (Cmd + C), navigate to your panel-three folder, and paste them in (Cmd + V).

From here, there’s really just one required step: add a custom.css as the last linked stylesheet, and begin customizing your theme to your heart’s content. The only difference here from just customizing vanilla Bootstrap is that you’ll also have to contend with your theme’s custom CSS, but the process is no different in kind than what you’ve already done—just a bit larger in scope.

Pro tips

A few commonly-encountered issues that go above and beyond what we’ve already covered:

• Have a fun animation on your page that you want to customize, like say text being typed out and deleted? To edit it, you’ll likely need to go spelunking around in your theme’s JavaScript. This is doable, but proceed with caution, and don’t hesitate to ask your instructor for help!
• Many one-page Bootstrap themes use fancy smooth scrolling between sections. This often relies on matching between a link and a specific element id as the anchor for that link. Each theme is different, but if you carefully study how the existing structure works and mirror it, you should be fine. But again, feel free to ask for help.
• As you work on Panel Three, you’ll definitely want to lean heavily on the Inspector Gadget lesson to utilize the Dev Tools in Chrome. 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!
• Customizing the colors and fonts are a great start, but don’t forget that you can add things like borders, adjust margins, and lots of other cool things. Use Free Code Camp as a reference, or strike out on your own and explore some uncharted territory!
• Don’t forget to make sure the mobile view of your page looks amazing too! You can change up the CSS on your mobile view by adding a media query. Not a bad way to earn some qualitative points on this assignment!