Skip to content
GitLab
Switch branch/tag
Find file Normal viewHistoryPermalink
index.html 4.85 KB
Newer Older
Nicole's avatar
Update remaining templates to match starter template  
Nicole committed
1
2
3
4
5
6
7 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
Mark Otto's avatar
fix up sticky footer example (fixes #9680) and add favicons to all examples    
Mark Otto committed
8 
    <link rel="shortcut icon" href="../../assets/ico/favicon.png">
Nicole's avatar
Update remaining templates to match starter template  
Nicole committed
9
Nicole's avatar
change file names to example names    
Nicole committed
10 
    <title>Grid Template for Bootstrap</title>
Nicole's avatar
Update remaining templates to match starter template  
Nicole committed
11
12 

    <!-- Bootstrap core CSS -->
Mark Otto's avatar
hella examples fixing, mostly navbars and lots of work on grids example    
Mark Otto committed
13 
    <link href="../../dist/css/bootstrap.css" rel="stylesheet">
Nicole's avatar
Update remaining templates to match starter template  
Nicole committed
14
15 

    <!-- Custom styles for this template -->
Nicole's avatar
add git ignore    
Nicole committed
16 
    <link href="grid.css" rel="stylesheet">
saiwang's avatar
add IE's Conditional comments for respondjs and html5shiv    
saiwang committed
17
18
19
20
21
22 

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="../../assets/js/html5shiv.js"></script>
      <script src="../../assets/js/respond.min.js"></script>
    <![endif]-->
Nicole's avatar
Update remaining templates to match starter template  
Nicole committed
23
24
25
26
27 
  </head>

  <body>
    <div class="container">
Mark Otto's avatar
hella examples fixing, mostly navbars and lots of work on grids example    
Mark Otto committed
28
29
30
31 
      <div class="page-header">
        <h1>Bootstrap grid examples</h1>
        <p class="lead">Basic grid layouts to get you familiar with building within the Bootstrap grid system.</p>
      </div>
Nicole's avatar
Update remaining templates to match starter template  
Nicole committed
32
Mark Otto's avatar
hella examples fixing, mostly navbars and lots of work on grids example    
Mark Otto committed
33
34 
      <h3>Three equal columns</h3>
      <p>Get three equal-width columns <strong>starting at desktops and scaling to large desktops</strong>. On mobile devices, tablets and below, the columns will automatically stack.</p>
Nicole's avatar
Update remaining templates to match starter template  
Nicole committed
35 
      <div class="row">
Mark Otto's avatar
hella examples fixing, mostly navbars and lots of work on grids example    
Mark Otto committed
36
37
38 
        <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>
Nicole's avatar
Update remaining templates to match starter template  
Nicole committed
39
40 
      </div>
Mark Otto's avatar
hella examples fixing, mostly navbars and lots of work on grids example    
Mark Otto committed
41
42 
      <h3>Three unequal columns</h3>
      <p>Get three columns <strong>starting at desktops and scaling to large desktops</strong> of various widths. Remember, grid columns should add up to twelve for a single horizontal block. More than that, and columns start stacking no matter the viewport.</p>
Nicole's avatar
Update remaining templates to match starter template  
Nicole committed
43 
      <div class="row">
Mark Otto's avatar
hella examples fixing, mostly navbars and lots of work on grids example    
Mark Otto committed
44
45
46 
        <div class="col-md-3">.col-md-3</div>
        <div class="col-md-6">.col-md-6</div>
        <div class="col-md-3">.col-md-3</div>
Nicole's avatar
Update remaining templates to match starter template  
Nicole committed
47
48 
      </div>
Mark Otto's avatar
hella examples fixing, mostly navbars and lots of work on grids example    
Mark Otto committed
49
50 
      <h3>Two columns</h3>
      <p>Get two columns <strong>starting at desktops and scaling to large desktops</strong>.</p>
Nicole's avatar
Update remaining templates to match starter template  
Nicole committed
51 
      <div class="row">
Mark Otto's avatar
hella examples fixing, mostly navbars and lots of work on grids example    
Mark Otto committed
52
53 
        <div class="col-md-8">.col-md-8</div>
        <div class="col-md-4">.col-md-4</div>
Nicole's avatar
Update remaining templates to match starter template  
Nicole committed
54
55 
      </div>
Mark Otto's avatar
hella examples fixing, mostly navbars and lots of work on grids example    
Mark Otto committed
56 
      <h3>Full width, single column</h3>
Nicole's avatar
Update remaining templates to match starter template  
Nicole committed
57
58 
      <p class="text-warning">No grid classes are necessary for full-width elements.</p>
Mark Otto's avatar
hella examples fixing, mostly navbars and lots of work on grids example    
Mark Otto committed
59
60
61
62
63 
      <hr>

      <h3>Two columns with two nested columns</h3>
      <p>Per the documentation, nesting is easy—just put a row of columns within an existing row. This gives you two columns <strong>starting at desktops and scaling to large desktops</strong>, with another two (equal widths) within the larger column.</p>
      <p>At mobile device sizes, tablets and down, these columns and their nested columns will stack.</p>
Nicole's avatar
Update remaining templates to match starter template  
Nicole committed
64 
      <div class="row">
Mark Otto's avatar
hella examples fixing, mostly navbars and lots of work on grids example    
Mark Otto committed
65
66 
        <div class="col-md-8">
          .col-md-8
Nicole's avatar
Update remaining templates to match starter template  
Nicole committed
67 
          <div class="row">
Mark Otto's avatar
hella examples fixing, mostly navbars and lots of work on grids example    
Mark Otto committed
68
69 
            <div class="col-md-6">.col-md-6</div>
            <div class="col-md-6">.col-md-6</div>
Nicole's avatar
Update remaining templates to match starter template  
Nicole committed
70
71 
          </div>
        </div>
Mark Otto's avatar
hella examples fixing, mostly navbars and lots of work on grids example    
Mark Otto committed
72 
        <div class="col-md-4">.col-md-4</div>
Nicole's avatar
Update remaining templates to match starter template  
Nicole committed
73
74 
      </div>
Mark Otto's avatar
hella examples fixing, mostly navbars and lots of work on grids example    
Mark Otto committed
75
76
77
78
79 
      <hr>

      <h3>Mixed: mobile and desktop</h3>
      <p>The Bootstrap 3 grid system has four tiers of classes: xs (phones), sm (tablets), md (desktops), and lg (larger desktops). You can use nearly any combination of these classes to create more dynamic and flexible layouts.</p>
      <p>Each tier of classes scales up, meaning if you plan on setting the same widths for xs and sm, you only need to specify xs.</p>
Nicole's avatar
Update remaining templates to match starter template  
Nicole committed
80 
      <div class="row">
Mark Otto's avatar
hella examples fixing, mostly navbars and lots of work on grids example    
Mark Otto committed
81
82 
        <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
        <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
Nicole's avatar
Update remaining templates to match starter template  
Nicole committed
83
84 
      </div>
      <div class="row">
Mark Otto's avatar
hella examples fixing, mostly navbars and lots of work on grids example    
Mark Otto committed
85
86
87 
        <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
        <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
        <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
Nicole's avatar
Update remaining templates to match starter template  
Nicole committed
88
89 
      </div>
      <div class="row">
Mark Otto's avatar
hella examples fixing, mostly navbars and lots of work on grids example    
Mark Otto committed
90
91 
        <div class="col-xs-6 col-md-6">.col-xs-6 .col-md-6</div>
        <div class="col-xs-6 col-md-6">.col-xs-6 .col-md-6</div>
Nicole's avatar
Update remaining templates to match starter template  
Nicole committed
92
93 
      </div>
Mark Otto's avatar
hella examples fixing, mostly navbars and lots of work on grids example    
Mark Otto committed
94
95
96
97 
      <hr>

      <h3>Mixed: mobile, tablet, and desktop</h3>
      <p></p>
Nicole's avatar
Update remaining templates to match starter template  
Nicole committed
98 
      <div class="row">
Mark Otto's avatar
hella examples fixing, mostly navbars and lots of work on grids example    
Mark Otto committed
99
100 
        <div class="col-xs-12 col-sm-8 col-lg-8">.col-xs-12 .col-lg-8</div>
        <div class="col-xs-6 col-sm-4 col-lg-4">.col-xs-6 .col-lg-4</div>
Nicole's avatar
Update remaining templates to match starter template  
Nicole committed
101
102 
      </div>
      <div class="row">
Mark Otto's avatar
hella examples fixing, mostly navbars and lots of work on grids example    
Mark Otto committed
103
104
105 
        <div class="col-xs-6 col-sm-4 col-lg-4">.col-xs-6 .col-sm-4 .col-lg-4</div>
        <div class="col-xs-6 col-sm-4 col-lg-4">.col-xs-6 .col-sm-4 .col-lg-4</div>
        <div class="col-xs-6 col-sm-4 col-lg-4">.col-xs-6 .col-sm-4 .col-lg-4</div>
Nicole's avatar
Update remaining templates to match starter template  
Nicole committed
106
107 
      </div>
      <div class="row">
Mark Otto's avatar
hella examples fixing, mostly navbars and lots of work on grids example    
Mark Otto committed
108
109 
        <div class="col-xs-6 col-sm-6 col-lg-6">.col-xs-6 .col-sm-6 .col-lg-6</div>
        <div class="col-xs-6 col-sm-6 col-lg-6">.col-xs-6 .col-sm-6 .col-lg-6</div>
Nicole's avatar
Update remaining templates to match starter template  
Nicole committed
110
111
112
113 
      </div>

    </div> <!-- /container -->
Mark Otto's avatar
add respond.js to all examples (fixes #9731)    
Mark Otto committed
114
115
116
117 

    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
Nicole's avatar
Update remaining templates to match starter template  
Nicole committed
118
119 
  </body>
</html>