InterviewSolution
Saved Bookmarks
InterviewSolution
| 1. |
Grid Structure in Bootstrap |
|
Answer» Bootstrap has a responsive, mobile first fluid GRID system that APPROPRIATELY scales up to 12 columns as the device or viewport size increases. This states that firstly Bootstrap targets mobile devices and then EXPANDS to other devices such as tablet and desktop. The grid structure in Bootstrap looks like this: <div class = "CONTAINER"> <div class = "row"> <div class = "col-*-*"></div> <div class = "col-*-*"></div> </div> <div class = "row"> <div class = "col-*-*"></div> <div class = "col-*-*"></div> </div> </div>Let us now understand what we did above: We used the following to create a row: <div class = "row"> … </div>To add columns: col-*-*The first * above is for screen responsiveness class i.e.: col-sm: small devices col-md: medium size devices col-lg: large devices col-xl: extra large devicesThe second * sets a number that adds up to 12 for a row, for example, a row with 4 equal columns: <div class="row"> <div class="col-sm-3" STYLE="background-color:green;color:white;">.col-sm-3</div> <div class="col-sm-3" style="background-color:orange;color:gray">.col-sm-3</div> <div class="col-sm-3" style="background-color:violet;color:white">.col-sm-3</div> <div class="col-sm-3" style="background-color:black;color:white">.col-sm-3</div> </div> |
|