[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>
How do you can add opacity to the text?
You can add 50% opacity for black or white text with the
.text-black-50
.text-white-50
classes.
What are the classes for background colors?
The classes for background colors are: .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark and .bg-light.
What can be done for text to stand out more than normal headings (larger font-size and lighter font-weight)?
Display headings are used to stand out more than normal headings (larger font-size and lighter font-weight), and there are four classes to choose from: .display-1, .display-2, .display-3, .display-4
What are:
<small></small>
<abbr> <blockquote> <dl> <code> <kbd> <pre></pre></kbd></code></dl></blockquote></abbr></small>
In Bootstrap 4 the HTML <small> element is used to create a lighter, secondary text in any heading.</small>
Bootstrap 4 will style the HTML element with a yellow background color and some padding.
Bootstrap 4 will style the HTML <abbr> element with a dotted border bottom.</abbr>
Add the .blockquote class to a <blockquote> when quoting blocks of content from another source.
Bootstrap 4 will style the HTML <dl> element in the following way.
Bootstrap 4 will style the HTML <code> element in the following way.</code>
Bootstrap 4 will style the HTML <kbd> element in the following way.</kbd>
Text in a pre element is displayed in a fixed-width font, and it preserves both spaces and line breaks.</kbd></code></dl></blockquote></abbr></small>
Lists in Bootstrap?
Unstyled
Remove 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.
Inline
Remove a list’s bullets and apply some light margin with a combination of two classes, .list-inline and .list-inline-item.
Description list alignment
Align terms and descriptions horizontally by using our grid system’s predefined classes (or semantic mixins). For longer terms, you can optionally add a .text-truncate class to truncate the text with an ellipsis. <dl class="row"> <dt class="col-sm-3">Description lists</dt> <dd class="col-sm-9">A description list is perfect for defining terms.</dd></dl>
What are grid breakpoints?
<576px Extra small ≥576px Small ≥768px Medium ≥992px Large ≥1200px Extra large
