loading...
Cover image for Outsourcing CSS Design with Bootstrap and Bootstrap Themes
Vets Who Code

Outsourcing CSS Design with Bootstrap and Bootstrap Themes

nbhankes profile image Nathan B Hankes Updated on ・3 min read

I've really enjoyed learning the fundamentals of CSS grid and flexbox. Seeing my html design come to life and morph with changes in screen width feels satisfying and, well, like I'm witnessing magic. But before CSS added such mobile-first friendly design features, developers struggled with responsive design. Bootstrap came onto the scene with a responsive component library and drastically improved the quality of life for developers (from what I've been told). With today's CSS, Bootstrap is not entirely necessary, but it can be mighty useful.

According to Builtwith, Bootstrap ran in over 18% of the internet's top one million websites in the year 2018. It's important for those just learning web development to have some familiarization with Bootstrap because chances are we'll run into it at some point in our career. Though it's important to drill the fundamentals of web design early on, there are times where you'll find that Bootstrap is the perfect tool for the job.

You can use Bootstrap to build a quick website prototype. Or use it to quickly add a mobile-friendly component to your project if life got in the way during your latest sprint. Or maybe, as a student, you want to focus on JavaScript in your next project and not get bogged down in design decisions. Bottom line: Bootstrap is a useful option for helping you push more projects over the finish line.

In this tutorial I'll introduce you to Bootstrap and Bootstrap Themes.

What is Bootstrap in 60 seconds or less?

Bootstrap is the world’s most popular front-end component library. A front-end component library is a collection of pre-designed components like buttons, navigation bars, and drop down menus. Bootstrap components are responsive and mobile-friendly. Learn more here.

How to Use Bootstrap

Bootstrap can be downloaded as a dependency through npm, yarn, RubyGems, Composer, and NuGet. Or linked via BootstrapCDN on your index.html file:
Alt Text

In this example, I've copied and pasted the "CSS only" into the head of my index.html file, like so:

<!DOCTYPE html>
  <html lang="en">
    <head>
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>Bootstrap Theme Tutorial</title>
      <link
        rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
        integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
        crossorigin="anonymous"
        />
      <link rel="stylesheet" type="text/css" href="default.css" />
    </head>

Building a Website With Bootstrap

If linking your index.html to Bootstrap, you can copy and paste individual components from the Bootstrap Website or use a website template. The documentation contains the components and you can easily copy the code:
Alt Text

I copied and pasted several of these components into my index.html file until I had something that looked like a website (I added the images for fun):
Alt Text

Make sure your Documentation and the CSS only link are from the same Bootstrap version or your page may not render properly.

What you see is the default colors and design. However, I want a darker colored page. By using a Bootstrap Theme, I can accomplish this with minimum fuss. I'll use a free theme in this example, but there are plenty of premium themes available for purchase.

Downloading and Connecting a Bootstrap Theme

A quick Google search of "free Bootstrap themes" led me to www.bootswatch.com. After scrolling through the free themes, I found one I liked and selected the download:
Boots Watch Theme Download Image

I'm then prompted to save the file. This file will serve as the CSS style sheet within my project root folder. In this case, I've saved the Bootstrap theme as "default.css":
Alt Text

Now I just need to link the default.css file into the head of my index.html document by typing:

<link rel="stylesheet" type="text/css" href="default.css" />

The html and CSS documents are now talking. When I refresh the browser, the Bootstrap theme is now working:
Alt Text

Thank you for following this tutorial. Please leave a comment or follow me to learn more.

Discussion

pic
Editor guide