Brainscape's Knowledge GenomeTM

Browse over 1 million classes created by top students, professors, publishers, and experts.


See full index

Bootstrap 4.1 > Bootstrap 4 > Flashcards

Bootstrap 4 Flashcards

1
Q

col-, col-sm-, col-md-, col-lg-, col-xl-

A

grid sizes for bootstrap 4

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

.display-1
.display-2
.display-3
.display-4

A

Larger font-size and lighter font-weight to make headers stand out

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

<small></small>

A

Creates a lighter, secondary text in any heading

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q 
.text-muted
.text-primary
.text-success
.text-info
.text-warning
.text-danger
.text-secondary
.text-white
.text-dark
.text-body
.text-light
A

Contextual based text classes

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q 
.bg-primary
.bg-success
.bg-info
.bg-warning
.bg-danger
.bg-secondary
.bg-dark
.bg-light
A

Background color classes for text. You’ll want to use these in conjunction with .text-* classes.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q 
.table
.table-striped
.table-bordered
.table-hover
.table-dark
.table-borderless
A

Classes that can be combined for the most part which creates tables with specific styling according to their names.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q 
.table-primary
.table-success
.table-danger
.table-info
.table-warning
.table-active
.table-secondary
.table-light
.table-dark
A

Table classes that set the background of the and tags.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

.thead-dark

.thead-light

A

Styling that makes the table header light or dark

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

.table-sm

A

Makes a regular table condensed with a small amount of padding

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q 
.table-responsive
.table-responsive-sm
.table-responsive-md
.table-responsive-lg
.table-responsive-xl
A

Creates a scrollable table when the window is below a certain threshold

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

.rounded
.rounded-circle
.img-thumbnail
.img-fluid (responsive)

A

Changes the shape of an image according to its description

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

.jumbotron

.jumbotron-fluid

A

A large space from which to display important information. Requires the use of a <div> element and be inside a .container or .container-fluid classed div</div>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q 
.alert .alert-success
.alert .alert-info
.alert .alert-warning
.alert .alert-danger
.alert .alert-primary
.alert .alert-secondary
.alert .alert-light
.alert .alert-dark
A

Used to display alerts with contextual background colors. These can be dismissed with Xs on the right hand side.

Must be created within a DIV tag.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

alert-link

A

Added to an alert text to change the color to one that accents the alert contextual background colors

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

.alert-dismissible
.close
data-dismiss=”alert”

.fade
.show

A

Used to create an alert that is closable using a × X symbol. Fade and Show are added classes to make the alert fade out when dismissed.

<div>
×

</div>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

.btn .btn-* classes can be used on 3 elements

A

<a></a>

</a>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
17
Q 
.btn
.btn .btn-primary (blue)
.btn .btn-secondary (grey)
.btn .btn-success (green)
.btn .btn-info (teal)
.btn .btn-warning (gold)
.btn .btn-danger (red)
.btn .btn-dark (black)
.btn .btn-light (white)
.btn .btn-link (white)
A

Used for styling bootstrap 4 buttons

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
18
Q 
.btn .btn-outline-primary
.btn .btn-outline-secondary
.btn .btn-outline-success
.btn .btn-outline-info
.btn .btn-outline-warning
.btn .btn-outline-danger
.btn .btn-outline-dark
.btn .btn-outline-light text-dark
A

Used to style buttons where the borders and text are contextual colors instead of the background

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
19
Q

.btn .btn-lg

.btn .btn-sm

A

Makes button sizes small or large based on description

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
20
Q

.btn-block

A

Makes a button that stretches to fill the containers width

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
21
Q

.btn-group (parent div)
.btn .btn-*
.btn-group-lg
.btn-grou-sm

A

Creates a group of link buttons with styling. -lg and -sm make the buttons smaller or larger.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
22
Q 
.badge .badge-primary
.badge .badge-secondary
.badge .badge-success
.badge .badge-danger
.badge .badge-warning
.badge .badge-info
.badge .badge-light
.badge .badge-dark
A

Used with the SPAN tag, creates a “badge” which has a dark background , light text, and rounded button like appearance.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
23
Q

.badge .badge-pill .badge-success

A

.badge-ill makes the badges “pill shaped” by changing the border radius on the default badge styling.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
24
Q

.progress
.progress-bar .progress-bar-striped
.progress-bar-animated
.bg-*

A

Creates a progress bar DIV

Parent DIV .progress
Child DIV .progress-bar
requires styling with a width attribute

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
25
Q 
UL .pagination
LI .page-item
A .page-link
.pagination-lg
.pagination-sm
.active
.disabled
A

Used to create a pagination navigation menu. You create it using a UL tag with .pagination for the container. You create the list using LI with .page-item class. Then inside that you create the anchors using .page-link class.

.active highlights the current navigation page.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
26
Q

UL .breadcrumb

LI .breadcrumb-item

A

Creates a bread crumb navigation styled list of page structure you’ve visited.

Photo / Summer / Italy

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
27
Q

UL .list-group
LI .list-group-item .list-group-item-action

.list-group-item-success
.list-group-item-secondary
.list-group-item-info
.list-group-item-warning
.list-group-item-danger
.list-group-item-primary
.list-group-item-dark
.list-group-item-light

.active
.disabled

A

Creates a “list group” which is a list of items, that when hovered highlights the background color and font color automatically based on contextual list group class.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
28
Q

What is a “card”?

A

A bordered box with padding around the contents, includes options for headers, footers, contents, colors etc

Think of it like a license card for content

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
29
Q

.card
.card-header
.card-body
.card-footer

.bg-* (background-color to cards)
.card-title

IMG .card-img-top
IMG .card-img-bottom

A

Creates a bootstrap 4 card, cards are created using DIV elements.

.card-title removes the bottom margins for P elements if it’s the last child. It adds a blue color to any link with hover affects.

Add the .card-img.top/bottom outside the .card-body to span the entire width.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
30
Q

.card-img-overlay

A

Allows elements to be created in front of the cards background image set with card-img-top or card-img-bottom.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
31
Q

.card-columns (DIV)

.card-text (p)

A

Creates a column of cards. You can place all your cards inside the .card-columns wrapper div to create a group of cards.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
32
Q

.card-deck (DIV)

A

Creates a group of cards with equal height and widths, these automatically adjust as you insert more cards.

These cards have spaces in between them, not to be confused with a card-group which each card hugs the other without spacing.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
33
Q

.card-group (DIV)

A

Creates a group of equally tall and wide cards that fit snugly against the others.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
34
Q 
.dropdown  (DIV)
.dropdown-toggle  ( button )
data-toggle="dropdown" (button)
.dropdown-menu (DIV)
.dropdown-item (A)

.dropdown-item .active
.dropdown-item .disabled

A

Creates a basic dropdown menu from buttons that expand when clicked. Allows 1 selection.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
35
Q

.dropdown-divider (DIV)

A

Used to create a dividing line between drop down menu items.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
36
Q

.dropdown-header (DIV)

A

Used to create a header section for the drop down menu selections

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
37
Q

.dropdown-menu .dropdown-menu-right

A

Allows the drop down to align to the right hand side.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
38
Q

.dropup (DIV)

A

Creates a dropup menu that pops up instead of down

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
39
Q

.dropdown-item-text (A)

.dropdown-item-text (SPAN)

A

Used for creating plain text dropdown items. Can be used with (A) or (span) to be a link or plain text.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
40
Q

data-toggle=”collapse” (button)
data-target=”#target” (button)
.collapse (div with id #target)

.show

A

Creates a collapsible div that is activated with a button press.

.button data-toggle=”collapse” data-target=”#demo”.Collapsable.button
.div id=”demo” class=”collapse”.words.

.show will show the content by default

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
41
Q

What is an “accordian”?

A

A group of collapsible divs with content inside each that will open/close like a collapsible toggle item.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
42
Q

.data-parent=”#targetDiv”

A

Used to create accordians, used in a child DIV to reference the parent container of all collapsible DIVs.

DIV id="accordian"
   DIV data-parent="#accordian"
     DIV content
   DIV data-parent="#accordian"
      DIV content
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
43
Q

.nav (UL)
.nav-item (LI)
.nav-link (A)
.nav-justified

.disabled
.active

A

Creates a basic horizontal nav menu

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
44
Q

.nav .justify-content.center (UL)

.nav .justify-content-end (UL)

A

Aligns the navigation menu to the center, or right. Default is to the left.

45
Q

.nav .flex-column (UL)

A

Creates a vertical navigation menu

46
Q

.nav .nav-tabs (UL)
.nav-item (LI)
.nav-link (A)
.nav-justified

.disabled
.active

A

Makes the normal navigation links into a tab appearance. That folder like appearance you’re looking for

47
Q

.nav .nav-pills (UL)
.nav-item (LI)
.nav-link (A)
.nav-justified

A

Creates that classic rounded square pill style of the navigation menu.

48
Q

What are toggleable tabs?

A

Tab style, where each tab (think of folder appearance) shows the contents of that tab when clicked.

49
Q

.navbar (NAV)
.navbar-nav (UL)
.nav-item (LI)
.nav-link (A)

.navbar-expand-sm/md/lg/xl

A

Used to create a basic navigation bar in bootstrap. .navbar-expand-* is used to tell the browser what size the navigation menu will collapse or go vertical when shrunk.

50
Q

.justify-content-center (NAV)

.navbar-brand (A)

A

Used to center navbar content to the center of the element. .navbar-brand is used to give styling to the logo name via text placed in between the anchor tags.

.navbar-brand can accept images, will automatically scale the image to fit vertically.

51
Q

.navbar-dark (NAV)

.navbar-light (NAV)

A

Used to make the text in the dropdown menus white or black, “light” means dark text, “dark” means light text.

52
Q 
.navbar-expand-md  (NAV)
.navbar-toggler (BUTTON)
data-toggle="collapse  (BUTTON)
target="#navbar"  (BUTTON)
.navbar-toggler-icon  (SPAN)
.collapse .navbar-collapse  (DIV)
id="navbar" (DIV)
A

Creates a collapsible navbar menu which collapses on the size setting you set in the first NAV.

In bootstrap the collapsible menus are called togglers

53
Q

.navbar-expand-md

A

If you remove .navbar-expand-md you will only have the navbar toggle icon which is a toggle dropdown.

54
Q

.dropdown (LI)
.dropdown-toggle (A)
.data-toggle=”dropdown” (A)
.dropdown-menu (DIV)

A

Used to create a drop down navbar

55
Q

You can use a form tag with a class of .form-inline

A

to create a form inside a bootstrap navigation bar menu to have a handy search functionality.

56
Q

.input-group-prepend

.input-group-append

A

Adds icons to your search menu making it look better

57
Q

.navbar-text (SPAN)

A

Aligns non link items (text) inside the navbar

58
Q

.fixed-top (NAV)

.fixed-bottom

A

Used to fix a navigation bar at the top or bottom of the page

59
Q

.form-group (DIV)

.form-control (INPUT)

A

Used to create grouped form sections that group the labels and input elements together neatly.

60
Q

.form-inline (FORM)
.form-check-label (LABEL)
.form-check-input (INPUT)

A

Used to create an inline form. .form-check-label and input created a remember me check box.

61
Q

input type must be decared

A

or it won’t be styled properly in bootstrap

62
Q

.form-check (DIV)
.form-check-label (LABEL)
.form-check-input (INPUT)
value=””

.form-check-inline (DIV)

A

Used to create a check box form in bootstrap

63
Q

.form-control .form-control-sm (INPUT)
.form-control .form-control-lg (INPUT)
.form-control-plaintext
placeholder=”some text”

A

Changes the form size of the input elements.

Plaintext and placeholder are used to create inputs with text inside that disappear when you click to enter info

64
Q

What sections build up a boot strap carousel?

A
  1. ) Create container div
  2. ) Create carousel indicators (ul with lis )
  3. ) Create the slideshow portion (divs with images)
  4. ) Create left and right controls, which are anchors with special classes
65
Q

.carousel .slide data-ride=”carousel” (DIV)

A

Used to create the main container of a carousel

66
Q

.carousel-indicators (UL)
data-target=”#demo”
data-slide-to=”0”

.active

A

Used to create the indicator section

data-target tells the carousel which targets to use, usually the same name for each

data-slide-to tells the carousel what order to use the slides, usually 0 1 2 etc

67
Q

.carousel-inner (DIV)

.carousel-item (DIV)

A

Used to create the actual slide show, 2 nested divs, with an img inside

68
Q

.carousel-control-prev (A)
.carousel-control-next (A)
.carousel-control-prev-icon (SPAN)
.carousel-control-next-icon (SPAN)

A

Used to create the controls to the carousel

69
Q

.carousel-item (DIV)

.carousel-caption (DIV)

A

Used to create captions for each image slide

70
Q

How do you create a modal?

A

Use a button or link to launch the modal, link it to a div wrapper with the ID

71
Q

data-toggle=”modal” (BUTTON)

data-target=”#mymoda” (BUTTON)

A

Creates a button from which you can launch a modal.

72
Q

.modal .fade (DIV)
.modal-dialog (DIV)
.modal-content (DIV)

A

Creates the main wrapper using 3 DIV elements, inside these you will add the modal header body and footer.

73
Q

.modal-header (DIV)
.modal-title (header)
.modal-body (DIV)
.modal-footer (DIV)

A

Used to create the skeleton of the modal content. Inside each you can add whatever content you want.

74
Q

.modal-dialog .modal-sm

.modal-dialog .modal-lg

A

Used to change the default size of the modal window that pops up

75
Q

data-toggle=”tooltip” (A)
title=”contents” (A)
data-placement=”top” (A)

A

Used to create a tool tip that pops to the top, right, bottom or left

76
Q

In order for tool tip popups to work properly, what must you enable in bootstrap 4?

A

The jquery function must be called in the document.

$(‘[data-toggle=”tooltip”]’).tooltip();

77
Q

In order for popovers to work, what must you include?

A

A jquery function must be called for popovers

$(‘[data-toggle=”popover”]’).popover();

78
Q

data-toggle=”popover” (A)
title=”contents” (A)
data-placement=”top” (A)
data-trigger=”hover” (A)

A

Creates a pop over affect when hovering over an anchor or element.

79
Q

What is a “scroll spy”?

A

A scrollable webpage with elements that are linked to a menu. When you scroll to a corresponding section, its menu item will be highlighted to let you know you’re in that section. It also lets you jump using the menus.

80
Q 
.border .border-0
.border .border-top-0
.border .border-right-0
.border .border-bottom-0
.border .border-left-0
A

Used to quickly create no borders, or border styling just on one side of an element

81
Q

.border .border-warning
.border .border-success
etc

A

Used to create border colors around an element.

82
Q 
.rounded
.rounded-top
.rounded-right
.rounded-bottom
.rounded-left
.rounded-circle
.rounded-0
A

Changes an elements border radius via classes

83
Q

.clearfix (DIV parent)
.float-left (DIV child)
.float-right (DIV child)

A

Used to create a section which uses floated content

84
Q

.mx-auto

A

Used to auto center elements and content, basically a short version of margin auto

85
Q 
.w-25
.w-50
.w-75
.w-100
.mw-100
A

Creates elements with widths of certain common percentages, which correlate to the numbers after the dash

w = width
mw = max width
86
Q 
.h-25
.h-50
.h-75.
.h-100
.mh-100
A

Creates elements with heights which have a percentage of its parents height.

87
Q

How can you name classes that adjust the spacing of an element in bootstrap?

A

By using the m p method coupled with a key letter to set which direction the padding or margins will be applied

Example
mt-1

Will apply a level 1 amount of margin, to the top of an element

88
Q 
.m = margin
.p = padding
t = top
b = bottom
l = left
r = right
x = left and right
y = top and bottom
-*-  = all sides
0 = 0
1 = .25rem
2 = .5rem
3 = 1rem
4 = 1.5rem
5 = 3rem
A

Examples

tp-5 class will adjust the top padding of an element 3 rem in distance

.m-*-5 = 3 rem on all sides

89
Q

.shadow-none
.shadow-sm
.shadow-lg
.shadow

A

Creates a shadow for an element, default is medium using only .shadow

90
Q 
.embed-responsive
.embed-responsive-21by9
.embed-responsive16by9
.embed-responsive4by3
.embed-responsive1by1
.embed-responsive-item
A

Creates a responsive embedded element, dependent on its parents size

Create a parent element with .embed-responsive. Then create a child with .embed-responsive-item inside

91
Q

.visible

.invisible

A

Changes the visibility of an element. This doesn’t set display: none.

92
Q

.fixed-top

.fixed-bottom

A

Places an element fixed at the top or bottom

93
Q

.sticky-top

A

When you scroll past an item, it will stick to the top only when you scroll past it.

Will not work in IE11 and earlier

94
Q

.close

A

Used for styling closing elements such as modals and alerts. It floats right by default.

95
Q

Flex boxes do what in bootstrap 4?

A

Creates a parent div that makes all children ‘flex” items. Which are basically items that can be arranged and sized based on percentages.

96
Q

.d-flex

.d-inline-flex

A

Creates a parent DIV for flex items. d-flex shows the background of the flex box spanning the whole space available. .d-inline-flex only wraps the children elements not showing the background color of the flex box by default.

97
Q

.d-flex .flex-row

.d-flex .flex-row-reversed

A

Creates a row where you can stack items next to each other on the left or right depending on whether its reversed or not.

98
Q

.d-flex .flex-column

.d-flex .flex-column-reverse

A

Stacks items vertically and takes all available space.

99
Q 
.d-flex .justify-content-start
.d-flex .justify-content-end
.d-flex .justify-content-center
.d-flex .justify-content-between
.d-flex .justify-content-around
A

Creates justified content. Each type will justify your content in a different way.

Start is left aligned no space
end is right aligned no space
center is center aligned no space
between is as far apart as possible with gaps
around is equally gapped items
100
Q

.flex-grow-1

A

Makes an element take up the remaining space in a d-flex group

101
Q

.d-flex (DIV)
.order-1 (DIV)
.order-2 (DIV)

etc

A

Sets priority to which element will be styled first, second third etc in a flex group. This class is used on child elements of the .d-flex parent

102
Q

.d-flex (DIV)
.mr-auto (DIV)
.ml-auto (DIV)

A

Used to automatically push items to the right. This is assigned to the child of the .d-flex parent.

mr-auto pushes to the right
ml-auto pushes to the left

103
Q

.d-flex .align-items-start
.d-flex .align-items-bottom
.d-flex .align-items-center
.d-flex .align-items-stretch

A

Aligns items vertically

start = top
end = bottom
center = center
base = ???
stretch = items height are 100%
104
Q

.d-flex (parent div)

.align-self-start (child div)
.align-self-bottom (child div)
.align-self-center (child div)
.align-self-stretch (child div)

A

Used to align individual flex items instead of whole rows. These are used on children of the parent .d-flex

105
Q

Each flex item can be responsive

A

By adding flex classes to flexed elements

106
Q

You can make any flex element responsive by adding the responsive keywords to it

A

.d-sm-flex

An example will only flex for small content

107
Q

How can you easily align media with groups of content using bootstrap 4?

A

using the .media class parent with a .media-body child inside

108
Q

.media (DIV)

.media-body (DIV)

A

.media defines the parent wrapper and .media-body defines the content that will be styled together with the media

Bootstrap 4.1 (2 decks)

Brainscape helps you reach your goals faster, through stronger study habits.
© 2025 Bold Learning Solutions. Terms and Conditions