CODEWITHSUNDEEP
htmltwitter-bootstrapcsslayout
User051593
User051593

Reputation: 61

Layout Grid With Bootstrap

I need some help constructing a layout grid with the bootstrap framework.

Layout : Adapts to a variety of screen sizes/devices

Above is the layout I need to create that adapts to a variety of screen sizes/devices.

Here is my code so far: (Also JS Fiddle Archive : https://jsfiddle.net/emerson05/5zvkdnkq/)

<html lang="en">

<head>
<!-- Set character encoding first -->
<meta charset="utf-8" />
<!-- Viewport meta tag -->
<meta name="viewport" content="width=device-width, initial-scale=1, 
shrink-to-fit=no">
<!-- Suitable title -->
<title>Bootstrap Grid Layout</title>
<!-- Link to the Bootstrap CSS -->
<link rel="stylesheet" 
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-
beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M"
 crossorigin="anonymous">
<style>
    div[class^="container"] {
        border: 5px solid red;
    }

    .row {
        border: 5px solid orange;
    }

    div[class^="col"] {
        border: 5px solid limegreen;
    }
</style>
</head>

<body>
<div class="container">

    <header>
        <h1>A</h1>
    </header>
    <main>
        <div class="row">
            <div class="col-md-5">
                <h2>B</h2>
                <p>Pellentesque gravida luctus pharetra. In felis neque, feugiat at lacus eget, faucibus iaculis velit. Nullam tristique,
                    justo eget blandit finibus, dui justo aliquam ligula, sit amet iaculis quam lectus sed ex.</p>
            </div>
            <!-- .col-5 -->

            <div class="col-md-7">
                <div class="row">
                    <div class="col-6 col-md-12 col-lg-6">
                        <h2>C</h2>
                        <p>Sed ac mi ut ante mollis tristique. In sed nisl quis est sollicitudin varius non et velit. Sed turpis nunc, varius
                            vitae iaculis ut, viverra eget neque.</p>
                    </div>
                    <!-- .col-6 col-md-12 copl-lg-6 -->
                </div>
                <!-- .row-->

                <div class="row">
                    <div class="col-6 col-md-12 col-lg-6">
                        <h2>D</h2>
                        <p>Morbi vel ipsum id dolor rutrum lacinia. Praesent ullamcorper vulputate libero a vestibulum. Cras mollis mollis magna,
                            ut mattis lacus convallis vel.</p>
                    </div>
                    <!-- .col-6 col-md-12 col-lg-6 -->
                </div>
                <!-- .row -->

                <div class="row">
                    <div class="col-md-12">
                        <h2>E</h2>
                        <p>Praesent accumsan, odio quis varius suscipit, nulla ante tincidunt nisl, non interdum quam eros nec nibh. Nulla eget
                            dapibus metus, ac ultricies purus. Vestibulum et tristique felis.</p>
                    </div>
                    <!-- .col-md-12 -->
                </div>
                <!-- .row -->

            </div>
            <!-- .col-7 -->
        </div>
        <!-- .row-->
    </main>

    <footer>
        <p>F</p>
    </footer>
  </div>
<!-- .container -->

<!-- Supporting JavaScript libraries -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
 crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4"
 crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1"
 crossorigin="anonymous"></script>

</body>

</html>

I have got the layout mostly complete. I am having some trouble with the C,D,E sections of the layout as you'll see. I think the problem is needing to add another .col structure somewhere

Can someone point me in the right direction here, thank you for the help.

Upvotes: 0

Views: 95

Answers (1)

James Solomon Belda
James Solomon Belda

Reputation: 976

Check this https://jsfiddle.net/5zvkdnkq/5/

<div class="row">
    <div class="col-6 col-md-12">
        <h2>C</h2>
        <p>Sed ac mi ut ante mollis tristique. In sed nisl quis est sollicitudin varius non et velit. Sed turpis nunc, varius
                            vitae iaculis ut, viverra eget neque.</p>
    </div>
    <div class="col-6 col-md-12">
        <h2>D</h2>
        <p>Morbi vel ipsum id dolor rutrum lacinia. Praesent ullamcorper vulputate libero a vestibulum. Cras mollis mollis magna,
                            ut mattis lacus convallis vel.</p>
    </div>
</div>

C and D section should be in one row

Upvotes: 1

Related Questions