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.
In this tutorial I'll introduce you to Bootstrap and Bootstrap Themes.
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.
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>
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:
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.
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:
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" />