[Bootstrap Knowledge] Flashcards
How to make no paddings between columns in a row?
Use class .no-gutters (on a row?)
How do I install boostrap with npm?
npm install bootstrap
How to implement themify icon in span.
<span></span>
different font colors
class= text-primary text-secondary text-success text-danger text-warning text-info text-light bg-dark text-dark text-body text-muted text-white bg-dark text-black-50 text-white-50 bg-dark
How to define a flex box container which arranges all items in one single row:
1) from the left
2) from the right
<div class="d-flex flex-row">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<div class="d-flex flex-row-reverse">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
How to align the content in a flexbox container.
justify-content-start, justify-content-center, justify-content-end, justify-content-around, justify-content-between
If we’re applying those classes to a <b>flex row</b> we’re aligning the content <b>horizontally</b>.
If those classes are applied to a <b>flex column</b> the alignment is done <b>vertically</b>.
How to define a flex box container which arranges all items in one single column:
1) from the top
2) from the bottom
<div class="d-flex flex-column">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<div class="d-flex flex-column-reverse">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
What are the classes for:
Bold text.
Normal weight text.
Light weight text.
Italic text.
Lowercased text.
Uppercased text.
CapiTaliZed text.
font-weight-bold
font-weight-normal
font-weight-light
font-italic
text-lowercase
text-uppercase
text-capitalize
How to make that text should overflow the parent.
class=”text-nowrap”
What are text alignment classes:
justify
left
center
right
class=
text-justify
text-left
text-center
text-right
What are the important globals when making new bootstrap project?
- HTML5 doctype
Bootstrap requires the use of the HTML5 doctype. Without it, you’ll see some funky incomplete styling, but including it shouldn’t cause any considerable hiccups.… - Responsive meta tag
Bootstrap is developed mobile first, a strategy in which we optimize code for mobile devices first and then scale up components as necessary using CSS media queries. To ensure proper rendering and touch zooming for all devices, add the responsive viewport meta tag to your .
You can see an example of this in action in the starter template.
- Box-sizing
For more straightforward sizing in CSS, we switch the global box-sizing value from content-box to border-box. This ensures padding does not affect the final computed width of an element, but it can cause problems with some third party software like Google Maps and Google Custom Search Engine. - Reboot
For improved cross-browser rendering, we use Reboot to correct inconsistencies across browsers and devices while providing slightly more opinionated resets to common HTML elements.
What are the responsive breakpoints in bootstrap?
Since Bootstrap is developed to be mobile first, we use a handful of media queries to create sensible breakpoints for our layouts and interfaces. These breakpoints are mostly based on minimum viewport widths and allow us to scale up elements as the viewport changes.
Since we write our source CSS in Sass, all our media queries are available via Sass mixins:
// No media query necessary for xs breakpoint as it's effectively `@media (min-width: 0) { ... }`
@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }
// Example: Hide starting at `min-width: 0`, and then show at the `sm` breakpoint
.custom-class {
display: none;
}
@include media-breakpoint-up(sm) {
.custom-class {
display: block;
}
}
What are the main utilities for layout?
Changing display
Flexbox options
Margin and padding
Toggle visibility
Bootstrap heading - sizes
h1 Bootstrap heading (2.5rem = 40px) h2 Bootstrap heading (2rem = 32px) h3 Bootstrap heading (1.75rem = 28px) h4 Bootstrap heading (1.5rem = 24px) h5 Bootstrap heading (1.25rem = 20px) h6 Bootstrap heading (1rem = 16px)
What are Bootstrap 4 Default Settings?
Bootstrap 4 uses a default font-size of 16px, and its line-height is 1.5.
The default font-family is “Helvetica Neue”, Helvetica, Arial, sans-serif.
In addition, all <p> elements have margin-top: 0 and margin-bottom: 1rem (16px by default).</p>
