Bootstrap

Joel Ross

LIS 549

In this video...

  • CSS Frameworks

  • Including Bootstrap

  • Using Utility Classes

CSS Frameworks

A CSS Framework is a collection of CSS rules published and made available for you to use. So rather than writing your own rules, you just use the ones provided to you.

 

Bootstrap is the oldest and most popular CSS framework. Created by Twitter in 2011. 

<head>
  <!--... other elements here...-->

  <!-- link Bootstrap -->
  <link rel="stylesheet" 
        href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css">

  <!-- link own stylesheets AFTER framework -->
  <link rel="stylesheet" href="css/my-style.css">
</head>

minified CSS file!

Including the Framework

CDN

Add Bootstrap to your page by including a <link> to the CSS file. This is usually loaded from a Content Delivery Network (CDN) site.

Utility Classes

Bootstrap provides rules that apply to particular classes. Give an element that class in order to style it in a certain way.

Utility Classes

For more utility classes, check the Bootstrap Documentation

lis549-bootstrap

By Joel Ross

lis549-bootstrap

  • 271