Bootstrap 4 front-end framework compilation

Réussis tes devoirs et examens dès maintenant avec Quizwiz!

Responsive web design is...

...about creating web sites which automatically adjust themselves to look good on all devices, from small phones to large desktops

What class is used to span two columns on the BS grid for small screens? Hint: ___ - __ - 2

.col-sm-2

What are the two types of containers?

.container (the default) for a responsive fixed width container, meaning its max-width changes at each breakpoint. .container-fluid for a full width container, meaning it's 100% wide all the time, spanning the entire width of your viewport.

What class spans the entire width of the webpage, beyond the borders of the grid?

.jumbotron

progress bar: striped

.progress-bar-striped

Indicates center-aligned text

.text-center Compare this with flexbox alignment classes: .align-self individually adjusts item alignment in the flexbox .align-items with adjusts the placement of ALL items

Indicates left-aligned text

.text-left Compare this with flexbox alignment classes: .align-self individually adjusts item alignment in the flexbox .align-items with adjusts the placement of ALL items

Indicates no wrap text, to overflow the parent

.text-nowrap

Indicates right-aligned text

.text-right Compare this with flexbox alignment classes: .align-self individually adjusts item alignment in the flexbox .align-items with adjusts the placement of ALL items

.btn-group

Allows you to group a series of buttons together - btn-group on a single line - btn-group-vertical in a single column BS4: <div class="btn-group"> <button class="btn btn-primary" type="button">Left (has left radius)</button> <button class="btn btn-secondary" type="button">Middle (no radius)</button> <button class="btn btn-primary" type="button">Right (has right radius)</button> </div> BS3: <div class="btn-group"> <button type="button" class="btn btn-primary">Apple</button> <button type="button" class="btn btn-primary">Samsung</button> <button type="button" class="btn btn-primary">Sony</button> </div>

What's an example of using the Font Awesome Classes to turn the i element into an icon?

<i class="fa fa-info-circle"></i>

What 3 meta tags that must come first in the head of your html document?

<meta charset="value"> <meta http-equiv="value" content="value"> <meta name="value" content="value"> Example: <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge">

a common html section structure for grids

<section> <div .container> <div .row <div .col-size-count>

.dropdown class for buttons

A .dropdown button is a toggleable menu that allows the user to choose one value from a predefined list. Example: <div class="dropdown"> <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example</button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Link One</a> <a class="dropdown-item" href="#">Link Two</a> <a class="dropdown-item" href="#">Link Three</a> </div> </div> BS4 notes: 1) Dropdown toggles no longer require an explicit <span class="caret"></span> 2) Dropdowns can now be built with either <div> or <ul> tags.

.page-header class

BS3 class that added a horizontal line under the heading (+ adds some extra space around the element) Not available in BS4? At least deprecated. Use css instead. Example: border-bottom: 1px #ddd solid;

.dl-horizontal

BS3: Lined up the terms (<dt>) and descriptions (<dd>) in <dl> elements side-by-side. Started off like default <dl>s, but when the browser window expands, it will line up side-by-side. BS4: no longer seems to be available

.blockquote-reverse

BS3: class to show the blockquote on the right BS4: apparently this is not available, use

.custom-control-description

BS4 alpha only: New When this class is added to description text it can pick the contextual class colors like warning and alert. BS4: consider using .custom-control-label instead

.blockquote-footer

BS4 wrapping class for citation text underneath a blockquote. Makes text grey and applies a long dash at head.

How do you span the entire width of a screen with button groups?

BS4, use the .d-flex group: <div class="btn-group d-flex" role="group"> <a href="" class="btn btn-secondary w-100">Previous</a> <a href="" class="btn btn-secondary w-100">Next</a> </div> BS3: use the .btn-group-justified class

Button sizes allowed by BS?

BS4: .btn-lg .btn-md (default) .btn-sm BS3: .btn-lg .btn-md (default) .btn-sm .btn-xs

radio buttons inline

BS4: <div class="form-check form-check-inline"> <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1"> <label class="form-check-label" for="inlineCheckbox1">1</label> </div> <div class="form-check form-check-inline"> <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2"> <label class="form-check-label" for="inlineCheckbox2">2</label> </div> <div class="form-check form-check-inline"> <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" disabled> <label class="form-check-label" for="inlineCheckbox3">3 (disabled)</label> </div> BS3: <form> <label class="radio-inline"> <input type="radio" name="optradio">Option 1 </label> <label class="radio-inline"> <input type="radio" name="optradio">Option 2 </label> <label class="radio-inline"> <input type="radio" name="optradio">Option 3 </label> </form>

navbar: .active

BS4: Adds slight bolding to the specified link in a default navbar. Will also add blue color at least one (navbar-primary). BS3: Adds a gray background color to the specified link in a default navbar. For an inverted navbar, adds a black background and a white color to the specified link.

image: rounded corner class

BS4: .rounded BS3: img-rounded

image: circle class

BS4: .rounded-circle BS3: .img-circle

.alert-colors

BS4: Adds contextual colors to alerts. Examples: .alert-danger .alert-info .alert-success .alert-warning

.alert-dismissible

BS4: Sets up the alert to be close-able, adding extra padding to the right of the alert and positions the .close button. Also needed: a link or a button element with the class="close" and data-dismiss="alert". Example: <div class="alert alert-success alert-dismissible"> <button class="close" type="button" data-dismiss="alert"> <span>&times;</span> </button> <strong>Dismissable</strong> (Will reappear with page refresh) </div> This dds an "X" button to the alert. Clicking this button dismisses the alert.

.display-1

BS4: The largest of the slightly more opinionated heading style. Traditionally used within <h1></h1> tags. Not to be confused with the BS4 display property utility classes: .d-{breakpoint}-{value}

.alert-heading

BS4: This new class is added to headings inside alerts. It applies color:inherit so the colors match.

.display-*

BS4: This set of classes increases the font size of headings in 4 stages. These classes are used for headings outside of the main content of the page like jumbotrons and page headers. Append (1 down to 4) to the end to adjust size. Not to be confused with the BS4 display property utility classes: .d-{breakpoint}-{value}

Bootstrap 4 is mobile-first

Bootstrap 4 is designed to be responsive to mobile devices. Mobile-first styles are part of the core framework. To ensure proper rendering and touch zooming, add the following <meta> tag inside the <head> element: <meta name="viewport" content="width=device-width, initial-scale=1"> The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device). The initial-scale=1 part sets the initial zoom level when the page is first loaded by the browser. from: https://www.w3schools.com/bootstrap4/bootstrap_get_started.asp

.figure .figure-img .figure-caption

Bootstrap figures are commonly used elements for displaying images with the caption. A caption can be left-aligned or right-align. Use the included .figure , .figure-img and .figure-caption classes to provide some baseline styles for the HTML5 <figure> and <figcaption> elements. Images in figures have no explicit size, so be sure to add the .img-fluid class to your <img> to make it responsive. From: https://mdbootstrap.com/content/bootstrap-figures/

.text-lowercase

Changes text to lowercase

.navbar

Creates a navigation bar

.radio

Creates a radio button input group BS4: <div class="input-group"> <div class="input-group-prepend"> <div class="input-group-text"> <input type="radio" name="test"> </div> </div> <input class="form-control" type="text" placeholder="( name=test, input element names need to match)"> </div> <div class="input-group"> <div class="input-group-prepend"> <div class="input-group-text"> <input type="radio" name="test"> </div> </div> <input class="form-control" type="text" placeholder="( name=test )"> </div> BS3: <div class="radio"> <label><input type="radio" name="optradio">Option 1</label> </div> <div class="radio"> <label><input type="radio" name="optradio">Option 2</label> </div> <div class="radio disabled"> <label><input type="radio" name="optradio" disabled>Option 3</label> </div>

contextual color, how to adjust

Custom CSS may be used change to change the contextual colors

.h1 - .h6

Heading classes may be used within a <p> to change text to match <h__>. Example: <p>Paragraph text next to <span class="h2">h2 class text</span> then back </p>

.lead

Increase the font size and line height of a paragraph. Good to use on the first paragraph of an article to improve readability.

.badge

Is used within a span, often as a numerical indicator, to display a rounded and highlighted text element... - can be used inside other elements, such as buttons, links or list-group-items BS3: has default grey color BS4: - Color must be specified with .badge-(contextual color) - Will size according to the parent <h__> value - Can be made more rounded with .badge-pill

What is Bootstrap?

It's a free and open-source front-end framework (library) for designing websites and web applications - built by twitter developers. It contains HTML- and CSS-based design templates for typography, forms, buttons, navigation and other interface components, as well as optional JavaScript extensions. Unlike many web frameworks, it concerns itself with front-end development only. from: https://en.wikipedia.org/wiki/Bootstrap_(front-end_framework)

.text-truncate

Limits the length of the text to what can fit in the enclosing element. Will add ellipsis at end.

display property utility classes

Quickly and responsively toggle the display value of components and more. Includes support for some of the more common values, as well as some extras for controlling display when printing. Format: .d-{value} for xs .d-{breakpoint}-{value} for sm, md, lg, and xl. Options: .d-none .d-inline .d-inline-block .d-block .d-table .d-table-cell .d-table-row .d-flex .d-inline-flex The media queries effect screen widths with the given breakpoint or larger. For example, .d-lg-none sets display: none; on both lg and xl screens. from: https://getbootstrap.com/docs/4.1/utilities/display/

Bootstrap 4 provides 10 different contextual color classes, what are they?

Shown here for text, but can be applied to other elements... .text-primary is blue .text-secondary is light grey .text-success is green .text-info is teal .text-warning is orange .text-danger is red Note that these may be changed in css. New to Bootstrap v4... .text-light is very light grey .text-dark is dark grey .text-white .text-muted is light grey (same as secondary) Other color options... .text-black-50 (at 50% opacity) .text-body (to return text to default color) custom CSS colors

.alert

Similar to a BS3 well, this BS3/BS4 element is a box with a border and padding. The .alert class adds the padding and margin. This is not to be confused with the JavaScript alert() method, with brings up a dismissable alert modal.

grid system size classes:

These can be combined to create dynamic and flexible layouts. Each class scales up, so if you wish to set the same widths for sm and md, you only need to specify sm. BS4: (default starts at xs) sm md lg xl BS3: xs (for phones) sm (for tablets) md (for desktops) lg (for larger desktops)

.jumbotron-fluid

To make the jumbotron full width, and without rounded corners, add the .jumbotron-fluid modifier class and add a .container or .container-fluid within.

.align-self-center

Use align-self utilities on flexbox items to individually change their alignment on the cross axis. Compare this with .align-items with adjusts the placement of ALL items in the flexbox.

contextual color -light

very light grey

contextual color -white

white

contextual color -body

will return text to default color

In Bootstrap __ means extra small.

xs

The color class used to call attention to optional actions that the user can take.

btn-info

.col-11 .offset-1

column-11 is offset by 1 column

contextual color -dark

dark grey

contextual color -success

green

Columns create ________ via padding

gutters

responsive breakpoints in BS

less than 576px - Extra small devices (portrait phones, the BS default) 576 - 767.98px - Small devices (landscape phones) 768 - 991.98px - Medium devices (tablets) 992 - 1199.98px - Large devices (desktops) 1200 and above - Extra large devices (large desktops) from: https://getbootstrap.com/docs/4.1/layout/overview/

contextual color -secondary

light grey

contextual color -muted

light grey (same as secondary)

In Bootstrap __ means medium.

md

progress bar: color

normal contextual colors may be used to color the bar... BS4: .bg-success .bg-info BS3: .progress-bar-success .progress-bar-info

contextual color -danger

red

What is used to create horizontal groups of columns?

rows

contextual color -info

teal

.list-inline-item

Specifies which items are to be inline. Non inline items and be interspersed.

.img-thumbnail

Adds rounded corners and an inset border to an image

.text-justify

Adjusts line spacing to fit text to evenly to the left and right sides. Note: for BS3, this may only have worked on IE.

radio buttons custom

New in BS4: completely custom form elements to replace the browser defaults <div class="custom-control custom-radio"> <input type="radio" id="customRadio1" name="customRadio" class="custom-control-input"> <label class="custom-control-label" for="customRadio1">Toggle this custom radio</label> </div> <div class="custom-control custom-radio"> <input type="radio" id="customRadio2" name="customRadio" class="custom-control-input"> <label class="custom-control-label" for="customRadio2">Or toggle this other custom radio</label> </div>

contextual color -warning

orange

The Bootstrap grid contains how many equal-sized columns?

12

BS font size default

16px (BS4) 14px (BS3)

navbar-brand

Added to a link or a header element inside the navbar to represent a logo or a header

.active (pagination)

Adds a blue background color to the active pagination link (to highlight the current page)

.active (tables)

Adds a grey background color to the table row (<tr> or table cell (<td>) (same color used on hover)

.col-auto

Add this class to make a column resize according to to the width of the content.

.ml-md-auto

Aligns an element to the right (by automatically adjusting the left margin) on a medium screen.

.row

Container for responsive columns

containers

Containers are the most basic layout element in Bootstrap and are required when using our default grid system. While containers can be nested (new in BS4), most layouts do not require a nested container. from: https://getbootstrap.com/docs/4.0/layout/overview/

CDN

Content Delivery Network: a source for downloading BS, CSS, JS, etc that chooses a server that closest to users - so pages will load faster. This is an alternative to including those support files on your server.

In Bootstrap, ___________ is a convenient library of icons. These icons are vector graphics, stored in the .svg file format. These icons are treated just like fonts. You can specify their size using pixels, and they will assume the font size of their parent HTML elements.

Font Awesome

columns

In the grid system, content should be placed within columns.

.active (buttons)

Makes a button appear pressed.

.disabled (buttons)

Makes a button unclickable.

.float-right

Makes an image float to the right.

.img-fluid

Makes an image responsive so that it scales to the viewport or parent. BS3: used .img-responsive

.text-uppercase

Makes text uppercase

.text-capitalize

Makes uppercase only the first character of each word. Remaining characters are unchanged.

.w-100

Make an element 100% as wide relative to its parent.

Button elements by default are only as wide as the text that they contain. What would you do to make them 100% width?

Make them block elements with the additional .btn-block class

.list-inline

Removes a list's bullets and apply some light margin. Use in a combination of two classes, .list-inline and .list-inline-item. Places all list items on a single line (horizontal menu)

.list-unstyled

Removes the default list-style and left margin on list items (immediate children only). This only applies to immediate children list items, meaning you will need to add the class for any nested lists as well.

.active / .disabled (list-groups)

Same as for buttons: .active = blue highlight/white font color; .disabled = grey font color, inactive link

Explain the grid system rules

Some Bootstrap grid system rules: Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding Use rows to create horizontal groups of columns Content should be placed within columns, and only columns may be immediate children of rows Predefined classes like .row and .col-sm-4 are available for quickly making grid layouts Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first and last column via negative margin on .rows Grid columns are created by specifying the number of 12 available columns you wish to span. For example, three equal columns would use three .col-sm-4 Column widths are in percentage, so they are always fluid and sized relative to their parent element

Explanation and credits

This is a compilation of other Bootstrap Quizlets, used while I was learning BS4. Some terms/definitions were for earlier BS versions - those have been updated here. Some definitions are copied from BS4 documentation. An attempt has been made to organize the terms: 1) general 2) .classes 3) html 4) CSS and formatting 5) JS Looking for a good Bootstrap 4 learning video? I've gotten a lot out of: https://www.udemy.com/bootstrap-4-from-scratch-with-5-projects/learn/v4/overview The course includes a sandbox of BS4 features into which I've been saving BS4 snippets for future reference. BS3 snippets: I've not tested these. The following Quizlets were sourced. Thanks to all you creators! - bootstrap 4 (18 terms) by b3bold, added 6/29/18 - Bootstrap (16 terms, BS3) by JaysenR, 6/30/18 - bootstrap 4 (26 terms), by saldanhabella, 7/2/18 - Bootstrap (34 terms, BS3) by Laura_Bell60, 7/3/18 - Lesson 4 - Bootstrap (16 terms) by HapiLight, 7/4/18 - Bootstrap (166 terms, BS3), by ricardo_jeanpierre, 7/5/18- - Bootstrap (166 terms, BS3), by mayotron47, 7/5/18- - Bootstrap (166 terms, BS3), by jordan_burger41, 7/5/18- - Bootstrap (166 terms, BS3), by kaeli_fischer, 7/5/18- - Bootstrap (241 terms, BS3), by Trenton_South, 7/5/18- - bootstrap css (237 terms, BS3), by mustafa_b_aqabi, 7/5/18- - Bootstrap Classes (241 terms, BS3), by scotpfleghaar, 7/5/18- - bootstrap css .classes (263 terms, BS3), by allchristyhern, 7/5/18-

progress bar: basic

To create a default progress bar... - add a .progress class to a <div> element - add a .progress-bar class to a child <div> element - use style attribute to set bar percentage <div class="progress"> <div class="progress-bar" style="width:70%"> </div> </div>

.close

Use a generic close icon for dismissing content like modals and alerts. You can substitute a Font Awesome icon... <div class="alert alert-success alert-dismissible"> <button class="close" type="button" data-dismiss="alert"> <i class="fas fa-times-circle"></i> </button> <strong>Dismissable</strong> with &lt;i class="fas fa-times-circle"&gt; (Will reappear with page refresh) </div>

alert .fade

Use with .alert-dismissable, the .fade class makes the alert fade away when the close button is clicked. Also needs: BS3 and BS4 alpha: the .in class BS4: the .show class... <div class="alert alert-success alert-dismissible show fade"> <button class="close" type="button" data-dismiss="alert"> <span>&times;</span> </button> <strong>Dismissable</strong> (Will reappear with page refresh) </div>

.alert-link

When you add links inside alert this class matches the font color to the parent alert class. Note: tests in BS 4.1.1 show this only seems to change the color when used with the .alert-light class

contextual color -black-50

black at 50% opacity

contextual color -primary

blue


Ensembles d'études connexes

Terms-Chapter 14 (Independent Demand Inventory)

View Set

Microbiology Exam 4 Multiple Choice

View Set

💋Insurance- learn/test set💋

View Set

Chem Wk 14: Properties of Gas, KMT, ATMs, Gas Laws, Gases in Chemical Rxns, Mixtures of Gases, Real Gases

View Set

Ch 20 NCLEX, Pellico Ch. 8 Nursing Assessment: Respiratory Function (Prep-U), Respiratory PrepU

View Set

Human Activity and the Biosphere

View Set

World History Chapter 16 Section 2

View Set