CSS

Question 1

Bootstrap: Why is normalize.css used?

Answer 1

To improve cross-browser rendering.

Question 2

Bootstrap: Why are containers used?

Answer 2

To easily center a page’s content. Containers set width at various media query breakpoints to match the grid system. Warning: containers are NOT nestable by default.

Question 3

Bootstrap: How do you create a grid?

Answer 3

You get a grid of 12 columns:
div class="container>
   div class="row"
        div class=".col-lg-6" /div
        div class=".col-lg-6" /div
   /div
/div

Question 4

Bootstrap: What happens when you create a fluid container?

Answer 4

A container has a fixed width. When you create container-fluid, the width is the whole screen, and it changes when you resize your page.

Question 5

Bootstrap: How do you offset columns in a grid?

Answer 5

div class=”.col-lg-6 col-lg-offset-2” /div

=> offsets it by 2 columns

Question 6

Bootstrap: How can you nest a grid?

Answer 6

Inside a column you can add another row div by adding it before the column div ends.
In the nested grid the columns should also add up to 12.
So if your parent column is 4 column length, the nested row will have columns of size 4/12.

Question 7

Bootstrap: where does lg stand for in .col-lg-6?

Answer 7

It stands for the viewport size. Large Desktops. The grid system has various styles for different viewport sizes.

Question 8

Bootstrap: What are the viewport sizes in a grid? How can you support different viewport sizes in your app?

Answer 8

lg > md > sm > xs
div class=”.col-lg-6 .col-md 2” => However if you define a small viewport, all the larger ones will have the same distribution, so it is not necessary to write .col-lg-6 .col-md 6

Question 9

Bootstrap: how do you create a button?

Answer 9

Use a or button tag and set class:
btn btn-default
For size add:
btn-lg or btn-xs or btn-sm

Question 10

Bootstrap: How can you make a button span the whole width of its parent?

Answer 10

Use the btn-block class

Question 11

Bootstrap: How can you add a glyphicon

Answer 11

span class=”glyphicon glyphicon-search”

Question 12

Bootstrap: How can you add a glyphicon in a button?

Answer 12

Define a span with the right class inside the button.

Question 13

Bootstrap: How can you manipulate the size and color of a glyphicon?

Answer 13

By using css (style attribute or css file) e.g. font-size: 5-em

Question 14

Bootstrap: How can you create a form?

Answer 14

Create a form html type with a role=form attribute. Inside the firm you create (class=) form-group divs

Question 15

Bootstrap: How do you link a label to an input in a form

Answer 15

label for=”form-elem-2”

input id=”form-elem-2”