Skip to content
GitLab
Switch branch/tag
Find file Normal viewHistoryPermalink
index.html 6.19 KB
Newer Older
Nicole's avatar
Update remaining templates to match starter template  
Nicole committed
1
2
3
4 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
Julian Thilo's avatar
Disable IE Compatibility Mode in docs, examples    
Julian Thilo committed
5 
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
Zlatan Vasović's avatar
Improve <meta> tags    
Zlatan Vasović committed
6 
    <meta name="viewport" content="width=device-width, initial-scale=1">
Nicole's avatar
Update remaining templates to match starter template  
Nicole committed
7
8 
    <meta name="description" content="">
    <meta name="author" content="">
wangsai's avatar
fix assets links in all examples    
wangsai committed
9 
    <link rel="shortcut icon" href="../../assets/ico/favicon.ico">
Nicole's avatar
Update remaining templates to match starter template  
Nicole committed
10
Nicole's avatar
change file names to example names    
Nicole committed
11 
    <title>Grid Template for Bootstrap</title>
Nicole's avatar
Update remaining templates to match starter template  
Nicole committed
12
13 

    <!-- Bootstrap core CSS -->
wangsai's avatar
fix assets links in all examples    
wangsai committed
14 
    <link href="../../dist/css/bootstrap.min.css" rel="stylesheet">
Nicole's avatar
Update remaining templates to match starter template  
Nicole committed
15
16 

    <!-- Custom styles for this template -->
Nicole's avatar
add git ignore    
Nicole committed
17 
    <link href="grid.css" rel="stylesheet">
saiwang's avatar
add IE's Conditional comments for respondjs and html5shiv    
saiwang committed
18
Chris Rebert's avatar
Warn about IE8 + Respond.js + file:// problem in examples; fix #11019    
Chris Rebert committed
19 
    <!-- Just for debugging purposes. Don't actually copy this line! -->
wangsai's avatar
fix assets links in all examples    
wangsai committed
20 
    <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
Chris Rebert's avatar
Warn about IE8 + Respond.js + file:// problem in examples; fix #11019    
Chris Rebert committed
21
saiwang's avatar
add IE's Conditional comments for respondjs and html5shiv    
saiwang committed
22
23 
    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
Chris Rebert's avatar
upgrade to html5shiv v 3.7.0    
Chris Rebert committed
24 
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
XhmikosR's avatar
Update Respond.js to v1.4.2.    
XhmikosR committed
25 
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
saiwang's avatar
add IE's Conditional comments for respondjs and html5shiv    
saiwang committed
26 
    <![endif]-->
Nicole's avatar
Update remaining templates to match starter template  
Nicole committed
27
28
29
30
31 
  </head>

  <body>
    <div class="container">
Mark Otto's avatar
hella examples fixing, mostly navbars and lots of work on grids example    
Mark Otto committed
32
33
34
35 
      <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
36
Mark Otto's avatar
hella examples fixing, mostly navbars and lots of work on grids example    
Mark Otto committed
37
38 
      <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
39 
      <div class="row">
Mark Otto's avatar
hella examples fixing, mostly navbars and lots of work on grids example    
Mark Otto committed
40
41
42 
        <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
43
44 
      </div>
Mark Otto's avatar
hella examples fixing, mostly navbars and lots of work on grids example    
Mark Otto committed
45
46 
      <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
47 
      <div class="row">
Mark Otto's avatar
hella examples fixing, mostly navbars and lots of work on grids example    
Mark Otto committed
48
49
50 
        <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
51
52 
      </div>
Mark Otto's avatar
hella examples fixing, mostly navbars and lots of work on grids example    
Mark Otto committed
53
54 
      <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
55 
      <div class="row">
Mark Otto's avatar
hella examples fixing, mostly navbars and lots of work on grids example    
Mark Otto committed
56
57 
        <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
58
59 
      </div>
Mark Otto's avatar
hella examples fixing, mostly navbars and lots of work on grids example    
Mark Otto committed
60 
      <h3>Full width, single column</h3>
Nicole's avatar
Update remaining templates to match starter template  
Nicole committed
61
62 
      <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
63
64
65
66
67 
      <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
68 
      <div class="row">
Mark Otto's avatar
hella examples fixing, mostly navbars and lots of work on grids example    
Mark Otto committed
69
70 
        <div class="col-md-8">
          .col-md-8
Nicole's avatar
Update remaining templates to match starter template  
Nicole committed
71 
          <div class="row">
Mark Otto's avatar
hella examples fixing, mostly navbars and lots of work on grids example    
Mark Otto committed
72
73 
            <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
74
75 
          </div>
        </div>
Mark Otto's avatar
hella examples fixing, mostly navbars and lots of work on grids example    
Mark Otto committed
76 
        <div class="col-md-4">.col-md-4</div>
Nicole's avatar
Update remaining templates to match starter template  
Nicole committed
77
78 
      </div>
Mark Otto's avatar
hella examples fixing, mostly navbars and lots of work on grids example    
Mark Otto committed
79
80
81
82
83 
      <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
84 
      <div class="row">
Mark Otto's avatar
hella examples fixing, mostly navbars and lots of work on grids example    
Mark Otto committed
85
86 
        <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
87
88 
      </div>
      <div class="row">
Mark Otto's avatar
hella examples fixing, mostly navbars and lots of work on grids example    
Mark Otto committed
89
90
91 
        <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
92
93 
      </div>
      <div class="row">
Mark Otto's avatar
fixes #9985: update grid classes in grid example    
Mark Otto committed
94
95 
        <div class="col-xs-6">.col-xs-6</div>
        <div class="col-xs-6">.col-xs-6</div>
Nicole's avatar
Update remaining templates to match starter template  
Nicole committed
96
97 
      </div>
Mark Otto's avatar
hella examples fixing, mostly navbars and lots of work on grids example    
Mark Otto committed
98
99
100
101 
      <hr>

      <h3>Mixed: mobile, tablet, and desktop</h3>
      <p></p>
Nicole's avatar
Update remaining templates to match starter template  
Nicole committed
102 
      <div class="row">
Mark Otto's avatar
fixes #9985: update grid classes in grid example    
Mark Otto committed
103
104 
        <div class="col-xs-12 col-sm-6 col-lg-8">.col-xs-12 .col-sm-6 .col-lg-8</div>
        <div class="col-xs-6 col-lg-4">.col-xs-6 .col-lg-4</div>
Nicole's avatar
Update remaining templates to match starter template  
Nicole committed
105
106 
      </div>
      <div class="row">
Mark Otto's avatar
fixes #9985: update grid classes in grid example    
Mark Otto committed
107
108
109 
        <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
        <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
        <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
Nicole's avatar
Update remaining templates to match starter template  
Nicole committed
110
111 
      </div>
Mark Otto's avatar
Improve upon #9937: Link and put reset column stuff to action in the grid example    
Mark Otto committed
112
113
114 
      <hr>

      <h3>Column clearing</h3>
Mark Otto's avatar
drop the title    
Mark Otto committed
115 
      <p><a href="http://getbootstrap.com/css/#grid-responsive-resets">Clear floats</a> at specific breakpoints to prevent awkward wrapping with uneven content.</p>
Mark Otto's avatar
Improve upon #9937: Link and put reset column stuff to action in the grid example    
Mark Otto committed
116 
      <div class="row">
tomByrer's avatar
fixed .clearfix example, + doc link    
tomByrer committed
117
118
119
120
121 
        <div class="col-xs-6 col-sm-3">
          .col-xs-6 .col-sm-3
          <br>
          Resize your viewport or check it out on your phone for an example.
        </div>
Mark Otto's avatar
Improve upon #9937: Link and put reset column stuff to action in the grid example    
Mark Otto committed
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144 
        <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>

        <!-- Add the extra clearfix for only the required viewport -->
        <div class="clearfix visible-xs"></div>

        <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
        <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
      </div>

      <hr>

      <h3>Offset, push, and pull resets</h3>
      <p>Reset offsets, pushes, and pulls at specific breakpoints.</p>
      <div class="row">
        <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
        <div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
      </div>
      <div class="row">
        <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
        <div class="col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0">.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0</div>
      </div>
Nicole's avatar
Update remaining templates to match starter template  
Nicole committed
145
146 
    </div> <!-- /container -->
Mark Otto's avatar
add respond.js to all examples (fixes #9731)    
Mark Otto committed
147
148
149
150 

    <!-- 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
151
152 
  </body>
</html>