Bootstrap reminders

Question 1

simple nav

Answer 1

ul. nav
li. nav-item
a. nav-link.active
li. nav-item
a. nav-link
li. nav-item
a. nav-link

Question 2

creating a simple nav-bar with brand

Answer 2

nav. navbar.navbar-expand-sm.navbar-dark.bg-dark
a. navbar-brand
ul. navbar-nav
li. nav-item
a. nav-link.active
li. nav-item
a. nav-link
li. nav-item
a. nav-link

Question 3

components of a mobile-friendly navbar

Answer 3

A button that shows up on mobile size:

button. navbar-toggler:data-toggle=’collapse’:data-target=’#target1’
span. navbar-toggler-icon

A container holding the normal nav that is normally collapsed unless in mobile sizes:

div.navbar-collapse.collapse#target1
   //normal nav...

Question 4

simple dropdown

Answer 4

a container holding the dropdown content and dropdown toggle:

div.dropdown

a dropdown toggle:

button.dropdown-toggle:data-toggle=’dropdown’

a dropdown menu with the links:

div. dropdown-menu
a. dropdown-item

Question 5

Simple alert

Answer 5

div.alert.alert-[color]

“message”

Question 6

alert with link

Answer 6

div.alert.alert-[color]

“message” span.alert-link

Question 7

alert with heading

Answer 7

div. alert.alert-[color]

h4. alert-heading

Question 8

alert with horizontal divider

Answer 8

div.alert.alert-[color]
“message”
hr
“message 2”

Question 9

alert with close button

Answer 9

div.alert.alert-[color]
“message”
button.close:data-dismiss=’alert’ ×

Question 10

grid system

Answer 10

div. row
div. col
div. col
div. row
div. col

Question 11

col class that expands when in small size an shrinks when in medium

Answer 11

div.col-md-3.col-sm-12

Question 12

center content with flexbox when on medium size

Answer 12

div.d-flex.justify-content-md-center

Question 13

offsetting a column by:
3 on medium;
by 4;
2 on small;

Answer 13

offset-md-3;
offset-4;
offset-sm-2.

Question 14

make images responsive

Answer 14

img.img-fluid

Question 15

give image a 1px rounded border

Answer 15

img.img-thumbnail

Question 16

create a simple table

Answer 16

table.table
thead
  tr
      th
      th
tbody
  tr
      th
      th
  tr
      th
      th

Question 17

change table overall theme color to dark;

change table head color to light

Answer 17

table. table-dark

thead. thead-light

Question 18

make table body vary between two background colors

Answer 18

table.table-striped

Question 19

make table bordered;

make table borderless.

Answer 19

table. table-bordered

table. table-borderless

Question 20

simple breadcrumb

Answer 20

nav

ol. breadcrumb
li. breadcrumb-item.active

Question 21

create an agroupment of buttons

Answer 21

div. btn-group
button. btn
button. btn
button. btn

Question 22

create an agroupment of agroupments of buttons

Answer 22

div. btn-toolbar
div. btn-group
button. btn
button. btn
button. btn
div. btn-group
button. btn
button. btn
button. btn

Question 23

make a button agroupment large;

and small;

Answer 23

div. btn-group-lg

div. btn-group-sm

Question 24

make an input with some prepended data

Answer 24

div. btn-group
div. btn-group-prepend
div. btn-group-text
input. form-control

Question 25

make a simple card with card-body | and an image appearing on top

Answer 25

div. card img. card-img-top div. card-body h3. card-title p. card-text

Question 26

make a card with 2 links at the bottom

Answer 26

div. card div. card-body p. card-text a. card-link a. card-link

Question 27

make a button that collapses a card

Answer 27

button.btn.btn-primary:data-target='#id':data-toggle='collapse' div.collapse#id div.card.card-body p