Section 7 - Bootstrap Overview

How do you make sure the navbar is fixed to the top?

Add "fixed-top" to the navbar class

What is Bootstrap?

A Web design framework that provides ready-made css, and javascript components to create responsive web sites.

What if you don't like certain aspects of bootstrap?

You can overwrite different aspects by going into the CSS file and call the class to change to your liking

How do you change the style of a button?

add the corresponding class to whichever button layout you would like <button type="button">Click</button> <button class="btn btn-success" type="button">Click</button>

To center items like the Jumbotron example in bootstrap?

place the code of the Jumbotron or other examples into a div with a container class <div class="container"> .......</div>

The grid system call will make use of...

the class="row"

col-ScreenSize-NumberOfColumns

inside of a row class format

What is a CDN?

A Content Delivery Network is a global cache that stores copies of data on edge caches. Is used similar to google fonts with a <link rel="" href="">

What is a framework?

A reusable piece of software that implements a generic solution to a generalized problem. It saves time by being a close model of the problem domain and can reach 100% with details coded by the implementer.

Toggled state button

Add data-bs-toggle="button" to toggle a button's active state. If you're pre-toggling a button, you must manually add the .active class and aria-pressed="true" to ensure that it is conveyed appropriately to assistive technologies. <button type="button" class="btn btn-primary" data-bs-toggle="button">Toggle button</button> <button type="button" class="btn btn-primary active" data-bs-toggle="button" aria-pressed="true">Active toggle button</button>

Disabled state button

Make buttons look inactive by adding the disabled boolean attribute to any <button> element. Disabled buttons have pointer-events: none applied to, preventing hover and active states from triggering. <button type="button" class="btn btn-primary" disabled>Primary button</button>

What is the Grid system in bootstrap?

Provides core mechanisms by using Bootstrap which then makes websites look good across multiple devices of multiple screen sizes

What is Sass?

Sass or Syntactically Awesome StyleSheets is a CSS preprocessor that adds power and elegance to the basic language. It allows you to use variables, nested rules, mixins, inline imports, and more, all with a fully CSS-compatible syntax. Sass helps keep large stylesheets well-organized, and get small stylesheets up and running quickly. A CSS preprocessor is a scripting language that extends CSS by allowing developers to write code in one language and then compile it into CSS.

How do you change the inverse color of a navbar?

change the nav class "bg-..." to the opposite. bg-dark bg-light