redwood_web_exercises/grid-bootstrap.html at master · CodeupClassroom/redwood_web_exercises · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link
        rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
        integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
        crossorigin="anonymous"
    >
    <title>Grid Bootstrap</title>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-xs-6">Half of the screen</div>
            <div class="col-xs-6">Another half of the screen</div>
        </div>
        <div class="row">
            <div class="col-xs-12 col-md-6 col-lg-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci aperiam consequuntur dicta dolorum ducimus eligendi enim eos laudantium magnam magni, natus nihil officia quam quibusdam repellat reprehenderit repudiandae sed unde!</div>
            <div class="col-xs-12 col-md-6 col-lg-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusamus architecto atque, commodi cum ipsam maxime minima molestias nesciunt nostrum, odio optio quia quidem quod repellendus repudiandae rerum, vero vitae.</div>
            <div class="col-xs-12 col-md-12 col-lg-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores deserunt dignissimos doloremque ea eos, et hic ipsa ipsum nobis optio perferendis possimus provident quaerat quasi repellat saepe sit temporibus voluptatibus?</div>
        </div>
    </div>

<script
    src="https://code.jquery.com/jquery-3.2.1.min.js"
    integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
    crossorigin="anonymous"
>
</script>
<script
    src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
    crossorigin="anonymous"
>
</script>
</body>
</html>