This course from Coursera seems to lack expanded explanation while doing a walkthrough. There were some code for Boostraps that the instructors were adding. And while she explained what’s the code for, I don’t understand where they came from, and how she came up with those code. I need to see more examples how to link Bootstraps to the HTML and CSS file.
Boostrap Components
Bootstrap includes a pre made set of UI elements and styles to help you build your website, which are called Bootsrap Components.
Get Bootstrap – Docs<!DOCTYPE html>
<html>
<head>
<title>Little Lemon</title>
<link href="bootstrap.min.css" rel="stylesheet">
</head>
<body>
<script src="bootstrap.bundle.min.js"></script>
<div class="container">
<div class="row">
<div class="col-12">
<div class="text-container">
<img src="logo.png" class="img-fluid">
</div>
</div>
</div>
<div class="row">
<div class="cold-12">
<div class="text-center">
<h1>Our Menu</h1>
</div>
</div>
</div>
<div class="row">
<div class="col-12 col-lg-6"></div>
<h2>Falafel</h2>
<p>Chickpea, herbs, spices</p>
<h2>Fried Calamari</h2>
<p>Squid, buttermilk</p>
<div class="col-12 col-lg-6">
<h2>Pasta Salad</h2>
<p>Lettuce, vegetables, mozzarella</p>
<h2>Greek Salad</h2>
<p>Cucumbers, onion, feta cheese</p>
</div>
</div>
</div>
</body>
</html>Adding span class from Bootstrap.
<h2>Fried Calamari <span class="badge bg-primary">New</span></h2>
//class "badge bg-primary" will add the customization for the word "New" from the BootsrapPoints to Remember from my Quiz:
- Use
scripttag to reference a JavaScript script or file in an HTML document. Dependencyis when the application requires a library or framework to run.- A point at which a website’s content and design will adapt in order to provide the best user experience is called a
breakpoint. - The Bootstrap Grid System always starts with
containerelement. - The responsive breakpoint for Bootstrap CSS rules is determined by the
Infix.
Additional Resources:
Bootstrap Official Website
Bootstrap 5 Foundations by Daniel Foreman
https://www.amazon.com/Bootstrap-Foundations-Mr-Daniel-Foreman/dp/B0948GRS8W/
Responsive Web Design with HTML5 and CSS by Ben Frain
https://www.amazon.com/Responsive-Web-Design-HTML5-CSS/dp/1839211563/
Bootstrap Themes
Pingback: Month 1 – Day 1 – rose learns.to('code');