Today, we're going to learn a powerful shortcut for making beautiful websites: Bootstrap! It's a free toolkit of pre-made CSS and JavaScript components that lets you build professional-looking pages without writing a lot of custom style code.
Imagine building a castle with individual bricks versus using large, pre-built wall sections. A CSS framework like Bootstrap is like having those pre-built sections. It saves a huge amount of time and ensures your website looks great on all devices, from phones to big-screen TVs.
Imagine you want to build a giant LEGO castle. You could make every single brick yourself, or you could use special, pre-made castle wall pieces that someone else designed. Bootstrap is like a giant box of pre-made LEGO pieces for your website!
But how do we get that box of pieces? We use a special HTML tag called <link>
to connect to a CDN.
<head> section, creates a connection to
another file. We use it to link to our Bootstrap CSS file. Think of it as telling your
webpage: "Hey, go use all the cool styles from this other file!"
<head>.
Bootstrap works by providing you with a huge library of CSS classes. Instead of writing your own styles, you just add these classes to your HTML elements.
.row and then
place columns (like .col-md-6) inside it. This example creates two columns
that each take up half the screen on medium-sized devices and larger.
.card is perfect for
showing content in a neat box, and .alert is great for displaying messages.
.btn styles a button,
and .btn-primary gives it a blue color. You can combine many utility
classes to style elements quickly.
Your mission is to use Bootstrap classes to structure and style the plain HTML in the editor. You
don't need to write any CSS in the <style> tag for this lesson!
Notice the Bootstrap CSS file is already linked in the <head>. All you
have to do is add the correct classes to the HTML elements in the <body>.
<body> with a <div class="container mt-5">. The
mt-5 is a utility class that adds margin to the top.
<h1> the classes
text-center and text-primary to center it and make it blue.
<div>s
with a <div class="row">. Then, give each of the inner
<div>s the class col-md-6. Let's break that down:
col-md-6 divs will each take up half the space
(6 + 6 = 12).card
class to the outer div and card-body to the inner div. Add the classes
card-title to the h5, card-text to the p, and
btn btn-primary to the button.
alert alert-success to the div.
Experiment with other Bootstrap components! Try adding an
<div class="alert alert-warning"> or a
<button class="btn btn-danger">. In our next lesson, we'll bring our pages to
life with JavaScript!