Nothing Special   »   [go: up one dir, main page]

Academia.eduAcademia.edu

Bootstrap Grid System

About Bootstrap

Bootstrap Grid Syst By: Mosh Hamedani When implementing the user form, you may notice that your form looks different from the one I showed you in the video. Your form will stretch to 100% of the page width, whereas mine took only half of the page. How did I do that? Bootstrap uses a fluid grid system that divides the screen to 12 columns. We can use these columns to create all kinds of layouts. In the example I showed you, I put my form in a container like this: <div class="row"> <div class="col‐md‐6"> <form>…</form> </div> </div> col-md-6 here means this div is as wide as 6 columns on a medium or large device (great than 992px). If I wanted a form that would take 12 columns (or 100% of the screen), I would use colmd-12. With this grid system, I could also put another panel next to the form: <div class="row"> <div class="col‐md‐6"> <form>…</form> </div> <div class="col‐md‐6"> Other content… </div> </div> !1 Bootstrap Grid Syst You can read more about Bootstrap’s Grid System here: http://getbootstrap.com/css/#grid Also, to give the form a greyish background, I used the “well” class: <div class="row"> <div class=“col‐md‐6 well"> <form>…</form> </div> </div> !2 By: Mosh Hamedani