Bootstrap/practice1.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
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta hhtp-equiv="X-UA-Compatible" content="IE-Edge">

<!--Bootstrap core CSS-->
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/custom.css">
<title>BootStrap 4 Tutorial</title>
</head>
<body>
  <nav class="navbar navbar-expand-lg navbar-dark fixed-top bg-dark">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand" href="#">Tutorial</a>

    <div class="collapse navbar-collapse" id="navbarsExampleDefault">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
                <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
        </ul>
    </div>
</nav>
  <!--  -->
  <div class="jumbotron">
      <div class="container">
          <h1>BootStrap 4</h1>
          <p>This is some text</p>
          <a  href="#" class="btn btn-primary btn-lg">More...</a>
      </div>
  </div>
  <div class="container">
    <div class="row">
        <h3>Heading 1</h3>
        <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo,
        tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
        <p> <a href="#" class="btn btn-default btn-lg">More...</a> </p>
        <h3>Heading 2</h3>
        <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo,
        tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
        <p> <a href="#" class="btn btn-default btn-lg">More...</a> </p>
        <h3>Heading 3</h3>
        <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo,
        tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
        <p> <a href="#" class="btn btn-default btn-lg">More...</a> </p>
    </div>
</div>
<!--  -->
<div class="container">
    <div class="row">
        <div class="col-md-4">
            <h3>Heading 1</h3>
            <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo,
            tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
            <p>
                  <a  href="#" class="btn btn-default btn-lg">More...</a>
            </p>
        </div>
        <div class="col-md-4">
            <h3>Heading 2</h3>
            <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh,
            ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
            <p>
                <a  href="#" class="btn btn-default btn-lg">More...</a>
            </p>
        </div>
        <div class="col-md-4">
            <h3>Heading 3</h3>
            <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh,
            ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
            <p>
                <a  href="#" class="btn btn-default btn-lg">More...</a>
            </p>
        </div>
    </div>
</div>

<!--  -->
<div class="container">
    <div class="row">
        <div class="col-md-3">
            <h3>Heading 1</h3>
            <p>This section takes 3 columns of the grid</p>
        </div>
        <div class="col-md-9">
            <h3>Heading 2</h3>
            <p>This section takes 9 columns of the grid</p>
            <div class="row">
                <div class="col-md-6">
                    <h3>Nested Grid Heading 1</h3>
                        <p>This nested section takes 6 columns of the grid within the row</p>
                </div>
                <div class="col-md-6">
                    <h3>Nested Grid Heading 2</h3>
                    <p>This nested section takes 6 columns of the grid within the row</p>
                </div>
            </div>
        </div>
    </div>
</div>
<!--  -->

<div class="container">
    <div class="row">
        <div class="col-md-3 push-md-9">
            <h3>Heading 1</h3>
            <p>This column takes 3 columns of the grid and is pushed by 9 columns</p>
        </div>
        <div class="col-md-9 pull-md-3">
            <h3>Heading 2</h3>
            <p>This column takes 9 columns of the grid and is pulled by 3 columns</p>
        </div>
    </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>