UI Frameworks and Libraries
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.
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 Bootsrap
Points to Remember from my Quiz:
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
- The Bootstrap Grid System always starts with
- The responsive breakpoint for Bootstrap CSS rules is determined by the
Bootstrap Official Website
Bootstrap 5 Foundations by Daniel Foreman
Responsive Web Design with HTML5 and CSS by Ben Frain