Bootstrap 4 front-end framework compilation
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>×</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 <i class="fas fa-times-circle"> (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>×</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