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.

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>
    <title>Little Lemon</title>
    <link href="bootstrap.min.css" rel="stylesheet">
    <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 class="row">
            <div class="cold-12">
                <div class="text-center">
                    <h1>Our Menu</h1>
        <div class="row">
            <div class="col-12 col-lg-6"></div>
            <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>

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:

  1. Use script tag to reference a JavaScript script or file in an HTML document.
  2. Dependency is when the application requires a library or framework to run.
  3. A point at which a website’s content and design will adapt in order to provide the best user experience is called a breakpoint.
  4. The Bootstrap Grid System always starts with container element.
  5. The responsive breakpoint for Bootstrap CSS rules is determined by the Infix.

Additional Resources:

Bootstrap Official Website


Bootstrap 5 Foundations by Daniel Foreman


Responsive Web Design with HTML5 and CSS by Ben Frain


Bootstrap Themes


This entry was posted in Study Notes and tagged , . Bookmark the permalink.

One Response to UI Frameworks and Libraries

  1. Pingback: Month 1 – Day 1 – rose learns.to('code');

Leave a Reply