Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
TWITTER BOOTSTRAP
Bootstrap Grid system
Call US: +91-9915337448 Email Us: info@webtechlearning.com
Grid system Introduction
• Bootstrap's grid system allows up to 12 columns
across the page.
• If you do not want to use al...
Grid system Introduction
• Rows must be placed within a .container (fixed-width) or .container-
fluid (full-width) for pro...
Grid system Introduction
• Columns create gutters (gaps between column content) via padding. That
padding is offset in row...
Bootstrap Grid Classes
The Bootstrap grid system has four classes:
• xs (for phones)
• sm (for tablets)
• md (for desktops...
Basic Structure of a Bootstrap Grid
• The following is a basic structure of a Bootstrap grid:
Call US: +91-9915337448 Emai...
Two Unequal Columns
• The following example shows how to get two various-width
columns starting at tablets and scaling to ...
Bootstrap grids
Nächste SlideShare
Wird geladen in …5
×

Bootstrap grids

This Presentation is based on the Bootstrap Grid System..Which Understands the complete information about how to use all the grid based classes.

  • Als Erste(r) kommentieren

Bootstrap grids

  1. 1. TWITTER BOOTSTRAP Bootstrap Grid system Call US: +91-9915337448 Email Us: info@webtechlearning.com
  2. 2. Grid system Introduction • Bootstrap's grid system allows up to 12 columns across the page. • If you do not want to use all 12 column individually, you can group the columns together to create wider columns: Call US: +91-9915337448 Email Us: info@webtechlearning.com
  3. 3. Grid system Introduction • Rows must be placed within a .container (fixed-width) or .container- fluid (full-width) for proper alignment and padding. • Use rows to create horizontal groups of columns. • Grid columns are created by specifying the number of twelve available columns you wish to span. For example, three equal columns would use three .col-xs-4. • Content should be placed within columns, and only columns may be immediate children of rows. Call US: +91-9915337448 Email Us: info@webtechlearning.com
  4. 4. Grid system Introduction • Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first and last column via negative margin on .rows. • If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line. • Bootstrap's grid system is responsive, and the columns will re-arrange automatically depending on the screen size. Call US: +91-9915337448 Email Us: info@webtechlearning.com
  5. 5. Bootstrap Grid Classes The Bootstrap grid system has four classes: • xs (for phones) • sm (for tablets) • md (for desktops) • lg (for larger desktops) • The classes above can be combined to create more dynamic and flexible layouts. Call US: +91-9915337448 Email Us: info@webtechlearning.com
  6. 6. Basic Structure of a Bootstrap Grid • The following is a basic structure of a Bootstrap grid: Call US: +91-9915337448 Email Us: info@webtechlearning.com <div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div> </div>
  7. 7. Two Unequal Columns • The following example shows how to get two various-width columns starting at tablets and scaling to large desktops. Call US: +91-9915337448 Email Us: info@webtechlearning.com <div class="row"> <div class="col-sm-4">.col-sm-4</div> <div class="col-sm-8">.col-sm-8</div> </div>

×