Bootstrap Flashcards
You can add Bootstrap to any app by adding the following code to the ___ of your HTML:
top
close the link tag
using either > or /> is acceptable
how to make the image be exactly the width of the phone screen?
add img-responsive class to the image
how to center heading element?
add the class text-center to the h element
add several classes to the same element
by separating them with a space
<h2 class="red-text text-center"></h2>
create a button
add class of btn and btn-default
by default, your button elements with the btn and btn-default classes are ___ (related to text they contain)
only as wide as the text that they contain
stretch button to fill your page’s entire horizontal space …
By making them block elements with the additional class of btn-block
what will happen to any elements following button block?
any elements following button block will flow onto a “new line” below the block
other flavor of btn-default
btn-primary, to color it blue
btn-info use case
used to call attention to optional actions
style button red for delete/destroy
btn-danger
make a row of elements to be styled
div class=”row”
make blue primary text
text-primary
use ____ to target inline elements
span
by using inline span element you can
put several elements on the same line, and even style different parts of the same line differently
nest a header and image together on one line
<div>
<div>Text</div> //8 columns
<div>Image</div> // the remaining 4/12
</div>
i class in html - use case
icons, <i></i> // using Font Awesome for ‘fas’
span is also acceptable for icons
how to make the radio buttons in a form spread out evenly?
use the col-xs-* approach, same as with divs
house everything in a responsive container
div class=’container-fluid’
a class to create a visual sense of depth for columns
class=’well’
Sometimes we create classes just …
for the purpose of selecting these elements more easily using jQuery. Not every class needs to have corresponding CSS.
