Skip to content

Commit 23ed3e4

Browse files
buckyrobertsbuckyroberts
committed
Reorganized files.
1 parent 6fac3d3 commit 23ed3e4

File tree

4 files changed

+117
-117
lines changed

4 files changed

+117
-117
lines changed

‎Bootstrap/012_differentDeviceLayouts.html

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<title>thenewboston</title>
5+
<meta charset="utf-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
8+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
9+
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
10+
</head>
11+
<body>
12+
13+
<div class="container-fluid">
14+
15+
16+
<h3>Entire with on larger devices, 1/2 on small ones</h3>
17+
<div class="row">
18+
<div class="col-md-12 col-xs-6">
19+
<p>Curabitur tellus diam, pharetra quis libero sit amet, finibus suscipit diam. Etiam felis dui, fermentum in est congue, tempus efficitur enim. Donec vitae venenatis neque, vel commodo ipsum. Etiam quis tellus tortor. Morbi porttitor tempor mauris in facilisis. Aliquam eget sapien consequat, finibus lectus nec, pulvinar justo. Mauris in consectetur lacus, in luctus turpis. Aenean eget velit ipsum. Sed elit enim, ullamcorper ac orci ac, fringilla interdum est. Praesent nec nisi ultrices lorem ullamcorper congue. Vivamus sed gravida metus, ut auctor nisl. Aliquam sollicitudin fringilla justo id facilisis.</p>
20+
</div>
21+
</div>
22+
23+
24+
<h3>Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop</h3>
25+
<div class="row">
26+
<div class="row">
27+
<div class="col-xs-6 col-md-4" style="background-color: lightblue">1/3 desktop, 1/2 mobile</div>
28+
<div class="col-xs-6 col-md-4" style="background-color: lightgreen">1/3 desktop, 1/2 mobile</div>
29+
<div class="col-xs-6 col-md-4" style="background-color: lightcoral">1/3 desktop, 1/2 mobile</div>
30+
</div>
31+
</div>
32+
33+
34+
<h3>Offsetting Columns</h3>
35+
<div class="row">
36+
<div class="col-md-4" style="background-color: lightblue">4 wide</div>
37+
</div>
38+
<div class="row">
39+
<div class="col-md-4 col-md-offset-2" style="background-color: lightcoral">4 wide offset 2</div>
40+
</div>
41+
42+
43+
<h3>Nested Rows</h3>
44+
<div class="row">
45+
<div class="col-md-9" style="background-color: lightseagreen; padding: 30px;">
46+
47+
I am the main parent
48+
49+
<!-- to nest, add a new row (don't exceed 12 columns) -->
50+
<div class="row">
51+
<div class="col-md-8" style="background-color: lightblue">
52+
child 1
53+
</div>
54+
<div class="col-md-4" style="background-color: lightsalmon">
55+
child 2
56+
</div>
57+
</div>
58+
59+
</div>
60+
</div>
61+
62+
63+
</div>
64+
65+
</body>
66+
</html>

‎Bootstrap/013_pushAndPull.html

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<title>thenewboston</title>
5+
<meta charset="utf-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
8+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
9+
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
10+
</head>
11+
<body>
12+
13+
<div class="container-fluid">
14+
<h1>3 column layout</h1>
15+
16+
<!--
17+
col-sm-push-5 will only push 5 columns on sm view-ports or greater
18+
19+
screen >= sm (desktop)
20+
|A|B|C|
21+
22+
screen < sm (mobile)
23+
|B|
24+
|A|
25+
|C|
26+
-->
27+
28+
<div class="row">
29+
30+
<!--
31+
col-sm-push-5 = move right 5 columns (on sm or greater)
32+
else just show as normal
33+
-->
34+
<div class="col-sm-5 col-sm-push-5" style="background: lightgreen">
35+
Content B
36+
</div>
37+
38+
<!-- col-sm-pull-5 = move left 5 columns -->
39+
<div class="col-sm-5 col-sm-pull-5" style="background: lightcoral">
40+
Content A
41+
</div>
42+
43+
<div class="col-sm-2" style="background: lightblue">
44+
Content C
45+
</div>
46+
47+
</div>
48+
</div>
49+
50+
</body>
51+
</html>

‎Bootstrap/testing/multipleColumns.html

Lines changed: 0 additions & 66 deletions
This file was deleted.

‎Bootstrap/testing/pushPull.html

Lines changed: 0 additions & 51 deletions
This file was deleted.

0 commit comments

Comments
 (0)