Bootstrap 5 Quiz and Flashcards: Study Notes and PDF

Podcast Beta

Play an AI-generated podcast conversation about this lesson

Questions and Answers

What is the purpose of adding an .img-fluid class to an image tag?

To add a border to the image

To set the image width to a fixed value

To disable image rendering on mobile devices

To make the image scale nicely to the parent element (correct)

What CSS properties are applied to an image with the .img-fluid class?

width: auto; height: 100%;

width: 100%; height: auto;

max-width: 100%; height: auto; (correct)

width: 50%; height: 50%;

What is the purpose of using contextual classes in Bootstrap Alerts?

To add a border to the alert box

To create a dropdown menu

To create a responsive design

To change the color scheme of the alert box (correct)

What class is used to create 'matching colored links' inside an alert box?

alert-link Signup and view all the answers

What type of buttons are provided in Bootstrap 5, in addition to the standard buttons?

Outline/bordered buttons Signup and view all the answers

What HTML elements can be used with the Bootstrap button classes?

, <a>, or elements</a> Signup and view all the answers

What is the main goal of Bootstrap 5's mobile-first design?

To ensure responsive design on mobile devices Signup and view all the answers

What does the meta tag `width=device-width` do?

Sets the width of the page to follow the screen width of the device Signup and view all the answers

What is the purpose of the `.container` class in Bootstrap 5?

To create a responsive fixed-width container Signup and view all the answers

What is the difference between the `.container` and `.container-fluid` classes?

<code>.container</code> has a fixed width, <code>.container-fluid</code> has a full-width container Signup and view all the answers

What is the default padding for Bootstrap 5 containers?

Left and right padding, with no top or bottom padding Signup and view all the answers

How can you add a large top padding to a container?

Using the <code>pt-5</code> class Signup and view all the answers

How can you make a container responsive based on screen size?

Using any of the above classes, depending on the screen size Signup and view all the answers

What is the purpose of the `initial-scale=1` part of the meta tag?

To set the initial zoom level of the page Signup and view all the answers

What happens to columns on mobile phones or screens less than 576px wide?

They stack on top of each other Signup and view all the answers

What is the default font-size used in Bootstrap 5?

1rem Signup and view all the answers

What is the purpose of the .display-1 to .display-6 classes in Bootstrap 5?

To make headings stand out more than normal headings Signup and view all the answers

How do you create a smaller, secondary text in any heading in Bootstrap 5?

Use the .small class Signup and view all the answers

What is the purpose of the .blockquote class in Bootstrap 5?

To quote blocks of content from another source Signup and view all the answers

How does Bootstrap 5 style the element?

With a yellow background color and some padding Signup and view all the answers

What happens when you hover over the HTML element in Bootstrap 5?

A dotted border bottom and a cursor with a question mark appear Signup and view all the answers

What is the line-height used in Bootstrap 5?

1.5 Signup and view all the answers

Study Notes

Downloading Bootstrap 5

Go to https://getbootstrap.com/ to download Bootstrap 5.
Bootstrap 5 is designed to be mobile-first, meaning it prioritizes responsive design for mobile devices.

Setting up Bootstrap 5

Add the following tag inside the element to ensure proper rendering and touch zooming:.
The width=device-width part sets the width of the page to follow the screen-width of the device.
The initial-scale=1 part sets the initial zoom level when the page is first loaded by the browser.

Containers

Bootstrap 5 requires a containing element to wrap site contents.
There are two container classes to choose from:
- .container class provides a responsive fixed width container, with a max-width that changes on different screen sizes.
- .container-fluid class provides a full width container, spanning the entire width of the viewport.
Containers have left and right padding, with no top or bottom padding by default.
Use spacing utilities, such as pt-5, to add padding to containers.

Responsive Containers

Use .container-sm|md|lg|xl classes to determine when the container should be responsive.
Responsive images can be created by adding an .img-fluid class to the `` tag, which scales the image nicely to the parent element.

Alerts

Alerts are created with the .alert class, followed by one of the contextual classes (e.g. .alert-success, .alert-info, etc.).
Add the .alert-link class to any links inside the alert box to create "matching colored links".

Buttons

Button classes can be used on <a>, , or elements.
Bootstrap 5 provides eight outline/bordered buttons.

Columns

On mobile phones or screens that are less than 576px wide, columns will automatically stack on top of each other.
Use column classes to create responsive columns, such as two unequal responsive columns.

Text/Typography

Bootstrap 5 uses a default font-size of 1rem (16px by default), and its line-height is 1.5.
All </a><a> elements have margin-top: 0 and margin-bottom: 1rem (16px by default).
Bootstrap 5 styles HTML headings (h1 to h6) with a bolder font-weight and a responsive font-size.
Use .h1 to .h6 classes on other elements to make them behave as headings.

Display Headings

Display headings are used to stand out more than normal headings (larger font-size and lighter font-weight).
There are six display heading classes to choose from: .display-1 to .display-6.

Other Elements

Use the .small class to create a smaller, secondary text in any heading.
Bootstrap 5 will style and elements with a yellow background color and some padding.
Use the .blockquote class to quote blocks of content from another source.

Studying That Suits You

Use AI to generate personalized quizzes and flashcards to suit your learning preferences.

Description

Learn the basics of Bootstrap 5, a mobile-first responsive framework, and how to ensure proper rendering and touch zooming on mobile devices.

Bootstrap 5 Basics