InterviewSolution
Saved Bookmarks
InterviewSolution
| 1. |
How to create unequal columns in Bootstrap |
|
Answer» Since the TOTAL of columns is 12, we can easily create unequal columns. The Bootstrap Grid System displays 12 columns in a page. For unequal columns, we can display then as: col-sm-3 col-sm-6 col-sm-3Let us implement the above in our Bootstrap code: <!DOCTYPE html> <html lang="en"> <head> <TITLE>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link REL="stylesheet" href="HTTPS://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container-fluid"> <H1>Unequal Columns</h1> <p><strong>Note:</strong> Resize the web browser window to see the effect.</p> <div class="row"> <div class="col-sm-3" style="background-color:gray;">.col-sm-3</div> <div class="col-sm-6" style="background-color:orange;">.col-sm-6</div> <div class="col-sm-3" style="background-color:yellow;">.col-sm-3</div> </div> </div> </body> </html>The output displays the following when screen size is above 768px: |
|