Bootstrap/practice2.html at master · shubhamtadas/Bootstrap · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<!DOCTYPE html>
 <html>
 <head>
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <style>
 .box{ height:400px; }
 .boxblue{ background-color: skyblue; }
 .boxgray{ background-color: gray; }
 </style>
 </head>
 <body>
 <!-- <div class="row">
        <div class="col-md-6 col-md-push-3 box boxblue">
        </div> -->
 <!-- </div> -->
 <div class="row">
          <div class="col-md-6 col-md-push-6 box boxblue">This is left box but pushed to right.</div>
          <div class="col-md-6 col-md-pull-6 box boxgray">This is right box but pulled to left.</div>
        </div>

        <!--  -->
        <div class="row">

    <div class="col-md-4">
        <div class="alert alert-info">A</div>
    </div>
    <div class="col-md-4">
        <div class="alert alert-danger">B</div>
    </div>
    <div class="col-md-4">
        <div class="alert alert-info">C</div>
    </div>
</div>
<!--  -->
<div class="row">

    <div class="col-md-4 col-md-push-4">
        <div class="alert alert-danger">B</div>
    </div>
    <div class="col-md-4 col-md-pull-4 col-sm-6">
        <div class="alert alert-info">A</div>
    </div>
    <div class="col-md-4 col-sm-6">
        <div class="alert alert-info">C</div>
    </div>
</div>
<!--  -->
<div class="container">
    <div class="row no-gutters">
        <div class="col-md-6">
            <h3>Heading 1</h3>
            <p>This column does not have any gutter space</p>
        </div>
        <div class="col-md-6">
            <h3>Heading 2</h3>
            <p>This column does not have any gutter space</p>
        </div>
    </div>
</div>
 </body>
 </html>