Using Bootstrap Framework
Subject: Styling (Beautify) Website
Bootstrap is a free front-end framework for faster and easier web development. It includes HTML and CSS based design templates for typography, forms, buttons, tables, navigation, modals, image carousels and many other, as well as optional JavaScript plugins.
Bootstrap also gives you the ability to easily create responsive designs, that is; CSS design that adjusts to phones, tablets, and desktops screen or display
How to add Bootstrap to your web page
You can easily add Bootstrap framework to your web page without having to download anything, but by
including it from CDN (Content Delivery Network) to the HEAD section of your HTML file using the
link ref for it's CSS and
script src for it's JS.
Contents are wrapped within Containers
You will then have your web page
contents in the BODY of the HTML file wrapped around the container class of Bootstrap.
Example
index.html
<![CDATA[
<!DOCTYPE html>
<html lang="en">
<head>
<title>Welcome to TEALearn.org</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Include BS5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Include BS5 JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container">
<h1>TEALearn.org</h1>
<p>Welcome to our website</p>
</div>
</body>
</html>
]]>
By:
Benjamin Onuorah
Login to comment or ask question on this topic
Previous Topic
