Theresa Underwood
learn-html.org is a free interactive HTML tutorial for people who want to learn HTML, fast.
Web developers have been choosing Twitter Bootstrap as the leading framework for desining UI. As you might have noticed, the default HTML styles are not appealing as the websites we see around every day. The Bootstrap framework allows us to write plain HTML that looks much more modern and useful than the default HTML stylesheet.
To load Bootstrap, you would need to load it from somewhere. We can load the Bootstrap library from a CDN by running the following <link> tag:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
Loading items from a CDN is useful since CDNs (Content Delivery Networks) are already optimized for fast download speeds from all around the world, and are highly available and reliant.
If you still want to load the Bootstrap files locally, then simply go to the website (https://getbootstrap.com) and download it from there. Then, use the same tag, only this time have the href attribute point to the local copy of bootstrap.min.css.
After adding it to your HTML page, it would probably look like this:
<!DOCTYPE html>
<html>
<head>
<title>Hello, Bootstrap!</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<p>Hello, Bootstrap!</p>
</body>
</html>
You will immediately notice that the default font has also changed from the default serif font to a sans-serif font.
Now that you know how to load Boostrap, let's play around with a simple example. Note that this is part of the official Bootstrap documentation showing a simple example of how buttons look like using Bootstrap.
<!DOCTYPE html>
<html>
<head>
<title>Hello, Bootstrap!</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-link">Link</button>
</body>
</html>
This tutorial is incomplete. You are welcome to contribute one by sending me a pull request:
https://github.com/ronreiter/interactive-tutorials
Do it yourself
This page does not have an exercise yet. You are welcome to contribute one by sending me a pull request:
Sophie Asveld
February 14, 2021
Email is a crucial channel in any marketing mix, and never has this been truer than for today’s entrepreneur. Curious what to say.
Ariana Gerad
February 14, 2021
Email is a crucial channel in any marketing mix, and never has this been truer than for today’s entrepreneur. Curious what to say.
Sophie Asveld
February 14, 2021
Email is a crucial channel in any marketing mix, and never has this been truer than for today’s entrepreneur. Curious what to say.