CODEWITHSUNDEEP
htmlcsstwitter-bootstraplayoutgrid
Ali CHERIFI
Ali CHERIFI

Reputation: 25

Stuck with columns with bootstrap

I started to learn bootstrap a few days ago and now i'm trying to build my own website but i'm stuck with the layout.

I'm trying to get something like this :

enter image description here

But i'm stuck with this :

enter image description here

Here is my code : 

<!doctype html>
<html lang="fr">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Title</title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
        <link rel="stylesheet" href="styles.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
    </head>
    <body>
        <div class="container-fluid">
            <div class = "row">
                <div class="col-md-4 h-50" style="background:blue;">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque id semper turpis. Donec suscipit nibh eget ante consequat, nec scelerisque massa semper. Nulla eros tortor, viverra semper nisi placerat, pharetra fermentum lac</p>
                </div>
                <div class="col-md-8" style="background:red;">
                    <p>                                
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque id semper turpis. Donec suscipit nibh eget ante consequat, nec scelerisque massa semper. Nulla eros tortor, viverra semper nisi placerat, pharetra fermentum lacus. Aenean eu elit id tortor porttitor vehicula. Etiam ac risus pretium, lacinia nibh sed, posuere orci. Nam consequat orci sed pharetra condimentum. Morbi ultricies viverra lorem, ac pellentesque ante aliquet sed. Duis iaculis interdum quam vitae tincidunt. Suspendisse volutpat euismod varius.                                
                            Aliquam erat volutpat. Mauris imperdiet condimentum accumsan. Aliquam mollis turpis diam, et congue est imperdiet sed. Morbi sed tellus ut justo eleifend condimentum. Quisque dignissim cursus lectus. In a condimentum justo. Phasellus auctor quam at leo mollis faucibus. Integer rhoncus luctus accumsan.                                
                            In hac habitasse platea dictumst. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut luctus luctus tortor, a dignissim ante luctus at. Nunc ac turpis ullamcorper, semper ipsum nec, tincidunt est. Donec nec fringilla dolor. Quisque sed neque semper, convallis massa a, sollicitudin dui. Donec id ipsum justo. Quisque a porttitor eros, eu ullamcorper purus. Maecenas euismod massa mattis dignissim tempus. Mauris non turpis magna. Nulla accumsan suscipit ipsum quis varius. Phasellus nec sapien fermentum, aliquet arcu sed, lobortis nunc.                                
                            Integer et nisl ut nisi venenatis rutrum in nec elit. Sed a sem vitae metus ultricies commodo. Praesent ultricies, diam id tempus consequat, justo lacus sodales metus, ac ornare dolor odio ut nisi. Proin in mi ornare, hendrerit nulla sed, porta metus. Curabitur ac quam posuere, tempus nunc a, varius libero. Quisque nec enim pharetra, pulvinar ligula et, vestibulum elit. Integer enim dui, laoreet sit amet aliquam vitae, viverra ut enim. Morbi in dignissim felis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus lobortis nisl sit amet risus venenatis pellentesque. Donec ultricies aliquam purus, vitae venenatis mauris sagittis congue. Sed vehicula iaculis lacinia. Pellentesque maximus elit quis arcu imperdiet ornare. Donec nec nisl id velit laoreet tempus ac id nisl.                                
                            Phasellus pulvinar erat ac quam pellentesque pellentesque. Vestibulum nec porta dui. Curabitur nec ligula at nunc blandit tristique vitae ac elit. Phasellus finibus vulputate arcu eget malesuada. Nunc nec massa ullamcorper tellus ullamcorper vulputate. Vestibulum et vestibulum ante. Quisque vulputate sed lacus quis ornare. </p>
                </div>
            </div>
            <div class="row">
                    <div class="col-md-4 h-50" style="background:green;">
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque id semper turpis. Donec suscipit nibh eget ante consequat, nec scelerisque massa semper. Nulla eros tortor, viverra semper nisi placerat, pharetra fermentum lac</p>
                        </div>
            </div>  
        </div>   
    </body>
</html>

How can I achieve this result ? I do not ask for a direct answer but some advice to help me.

Thank you guys.

Upvotes: 1

Views: 75

Answers (2)

Harish Karthick
Harish Karthick

Reputation: 720

Make a single row class and warp every thing into that ,Like to learn Bootstrap first Understand the Grid system strongly Then its easy to create Layouts 

 
        <title>Title</title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
        <link rel="stylesheet" href="styles.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
    </head>
    <body>
        <div class="container">
            <div class = "row">
                <div class="col-md-4 col-sm-4 ">
                    <div style="background:blue;">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque id semper turpis. Donec suscipit nibh eget ante consequat, nec scelerisque massa semper. Nulla eros tortor, viverra semper nisi placerat, pharetra fermentum lac</p>
                    </div>
                    <div  style="background:green;">
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque id semper turpis. Donec suscipit nibh eget ante consequat, nec scelerisque massa semper. Nulla eros tortor, viverra semper nisi placerat, pharetra fermentum lac</p>
                    </div>  
                </div>
                <div class="col-md-8 col-sm-8" style="background:red;">
                    <p>

                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque id semper turpis. Donec suscipit nibh eget ante consequat, nec scelerisque massa semper. Nulla eros tortor, viverra semper nisi placerat, pharetra fermentum lacus. Aenean eu elit id tortor porttitor vehicula. Etiam ac risus pretium, lacinia nibh sed, posuere orci. Nam consequat orci sed pharetra condimentum. Morbi ultricies viverra lorem, ac pellentesque ante aliquet sed. Duis iaculis interdum quam vitae tincidunt. Suspendisse volutpat euismod varius.

                            Aliquam erat volutpat. Mauris imperdiet condimentum accumsan. Aliquam mollis turpis diam, et congue est imperdiet sed. Morbi sed tellus ut justo eleifend condimentum. Quisque dignissim cursus lectus. In a condimentum justo. Phasellus auctor quam at leo mollis faucibus. Integer rhoncus luctus accumsan.

                            In hac habitasse platea dictumst. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut luctus luctus tortor, a dignissim ante luctus at. Nunc ac turpis ullamcorper, semper ipsum nec, tincidunt est. Donec nec fringilla dolor. Quisque sed neque semper, convallis massa a, sollicitudin dui. Donec id ipsum justo. Quisque a porttitor eros, eu ullamcorper purus. Maecenas euismod massa mattis dignissim tempus. Mauris non turpis magna. Nulla accumsan suscipit ipsum quis varius. Phasellus nec sapien fermentum, aliquet arcu sed, lobortis nunc.

                            Integer et nisl ut nisi venenatis rutrum in nec elit. Sed a sem vitae metus ultricies commodo. Praesent ultricies, diam id tempus consequat, justo lacus sodales metus, ac ornare dolor odio ut nisi. Proin in mi ornare, hendrerit nulla sed, porta metus. Curabitur ac quam posuere, tempus nunc a, varius libero. Quisque nec enim pharetra, pulvinar ligula et, vestibulum elit. Integer enim dui, laoreet sit amet aliquam vitae, viverra ut enim. Morbi in dignissim felis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus lobortis nisl sit amet risus venenatis pellentesque. Donec ultricies aliquam purus, vitae venenatis mauris sagittis congue. Sed vehicula iaculis lacinia. Pellentesque maximus elit quis arcu imperdiet ornare. Donec nec nisl id velit laoreet tempus ac id nisl.

                            Phasellus pulvinar erat ac quam pellentesque pellentesque. Vestibulum nec porta dui. Curabitur nec ligula at nunc blandit tristique vitae ac elit. Phasellus finibus vulputate arcu eget malesuada. Nunc nec massa ullamcorper tellus ullamcorper vulputate. Vestibulum et vestibulum ante. Quisque vulputate sed lacus quis ornare. </p>
                </div>
            </div>

        </div>   
    </body>
</html>

Upvotes: 0

Srichandradeep C
Srichandradeep C

Reputation: 397

<div class="row">
 <div class="col-md-4">
   <div> Blue div</div>
   <div> Green div</div>
 </div>
 <div class="col-md-8">
   <div> Red div</div>
 </div>
</div>

The logic here is, you have to split your container into two columns. The 1st column takes, 4 medium columns as its width and the 2nd one takes 8 medium columns. And you need to break the first column block into two rows.

Upvotes: 1

Related Questions