bootstrap

Question 1

To create a container for Bootstrap’s grid -> assign a class of “container” to a <div>:

<div></div>

</div>

• > div becomes a Bootstrap container
• > has a width relative to a user’s screen size
• > horizontally centered, has a left and right margin.

Question 2

Container to take up the entire width of the screen

<div class="container-fluid"></div>

Question 3

To integrate Bootstrap into a project, include TWO tags and the Bootstrap library inside the tags

Question 4

To create a row for the Bootstrap grid:
assign a class of "row" to an element.

By default, a row will take up the entire width of its parent container.

At most, a row will accommodate 12 columns.

eg:

<div>
<div>
</div></div>

Question 5

To create a column, assign an element with the class of "col"
eg:
<div class="container">
  <div class="row">
    <div class="col">
    </div>
  </div></div> 

By default, a column will take up the entire width of its parent row.

Question 6

Adjust the width of a column by add a hyphen a number to the “col” class:

<div>
<p>This is the width of 8 columns.</p></div>

Question 7

COL-AUTO
use the content to set the width of a column: append "auto" to the class of the column:

<div>
<p>This content determines the width of the parent column</p></div>

Question 8

Bootstrap categorizes screen sizes into 5 categories/breakpoints: extra small, small, medium, large, and extra large.

{breakpoint} can be sm, md, lg, or xl

Notice that there is no extra small or XS breakpoint. If we omit {breakpoint}, it is by default for extra small screens.

Question 9

{width} can be set from 1 to 12 and assigns a width to the column.
When we set a {breakpoint}-{width}, it means that we want our column to have that set width for screens that fit in the specified breakpoint range and other larger screens.

Question 10

For instance:

<div>
</div>

The column in the example will be as wide as 8 individual columns on small screen sizes and also any larger screens (medium, large, and extra large).

Question 11

<div></div>

• For extra small and small sized screens-> the column will take up the entirety of the row (width of 12 columns) -> implicitly applied.
• For medium-sized screens -> take up the width of 8 columns
• For extra large sized screens -> the column will have a width of 6 individual columns

Question 12

add multiple classes to a column to determine how wide a column should be on specific breakpoints

Question 13

What Bootstrap elements are immediate children of containers?

ROWS

Question 14

Follow Bootstrap’s naming convention to have the column render as wide as 7 individual columns wide on small and medium sized screens. Also have the column render as wide as 5 individual columns on large and extra large screens.

<div></div>

Question 15

To change the background color to green we need to assign the <div>‘s class a value of “bg-success” AND make the text white, add another class of “text-white”:

<div>
...
</div>

</div>

Question 16

Navs
2 ways:
1.
<ul class="nav">
  <li class="nav-item">
    <a class="nav-link" href="#">First Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Second Link</a>
  </li></ul>
2. simpler:

 <a class="nav-link" href="#">First Link</a>
<a class="nav-link" href="#">Second Link</a>

Question 17

Toggle the visibility of an element:
need 2 elements and a few attributes
eg: element button and element div.

-For button , add an attribute data-toggle=”collapse” -> enables button’s toggle ability.
Also add data-target=”#collapseExample”->this button toggles the visibility of an element with the id of “collapseExample”

-For div, add a class of "collapse".
And assign an id of "collapseExample" -> corresponds to the value of the button's data-target.

Question 19

CARD:

<div>
<img></img>
<div>
<h5>Card title</h5>
<p>Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a>Go somewhere</a>
</div></div>