CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Dinkledine
Dinkledine

Reputation: 51

How to stack two columns in bootstrap on a large screen

I am working on a grid layout for a website using bootstrap framework. I want a grid that displays 2 stacking divs that span the width of col-lg-4 next to one large div that spans the width of col-lg-8 and is equal in height to the two stacking div's.

<div class="mockups_wadels">
    <div class="div_center">
        <div class="container">
            <div class="row">
                <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 grid_padding">
                    <div class="wadels_dark">
                    </div>
                </div>
                <div class="col-lg-8 col-md-8 col-sm-8 col-xs-12 grid_padding">
                    <div class="wadels_embroidery">
                    </div>
                </div>
                <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 grid_padding">
                    <div class="wadels_white">
                    </div>
                </div>
            </div><!--end of row-->
            <div class="row">
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                    <div class="wadels_browser">
                    </div>
                </div>
            </div>
        </div><!--container end-->
    </div><!--end div center-->
</div><!--end of mockup-->

Here is a jsfiddle to help illustrate. My issue is that I do not know how to force the two col-lg-4 divs to stack on top of each other. Instead of stacking the second div simply starts a new row. http://jsfiddle.net/Dinkledine/0w2fppx6/

desire result

desired result

thanks for your help

Upvotes: 0

Views: 2387

Answers (3)

vickisys
vickisys

Reputation: 2036

Here is my solution with panel and col layout.If you need padding remove nopadding from class

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  <style type="text/css">
	.nopadding {
	   padding: 0 !important;
	   margin: 0 !important;
	}
  </style>
 </head>

 <body>
	<div class="container-fluid row-offcanvas nopadding">
			<div class="col-sm-5 nopadding">
				<!--Content 1-->
				<div class="col-sm-12 col-md-12 nopadding">		
					<div class="panel panel-default nopadding">
						<div class="panel-heading" style="background-color: lightblue; color: #000; font-weight:bold">content 1</div>
							<div class="panel-body" style="height:270px;overflow:auto;"></div> 			
						<div class="panel-footer" style="background-color: lightblue;"></div>
					</div>
				</div><!--Content 1 Ends-->

				<!--Content 2-->
				<div class="col-sm-12 col-md-12 nopadding" >
					<div class="panel panel-default nopadding">
						<div class="panel-heading" style="background-color: lightsteelblue; font-weight:bold">content 2</div>
							<div  class="panel-body" style="height:270px;overflow:auto;"></div> 
						<div class="panel-footer" style="background-color: lightsteelblue;"></div>
					</div>
				</div><!--Content 2 Ends-->
			</div>

			<div class="col-sm-7 nopadding">
				<!--Content 3 -->
				<div  class="col-sm-12 col-md-12 nopadding">   
					<div class="panel panel-default nopadding">
						<div class="panel-heading" style="background-color: lightsteelblue; font-weight:bold">Content 3</div>
							<div class="panel-body" style="height:602px;overflow:auto;"></div>
						<div class="panel-footer" style="background-color: lightsteelblue;"></div>
					</div>  
				</div><!--Content 3 Ends -->
		 </div>
	</div>	<!--row-->	
 </body>
</html>

Upvotes: 2

Onilol
Onilol

Reputation: 1339

You could do something like this :

<div class="row">
    <div class="col-lg-4 col-md-4 col-sm-4">
        <div class="col-lg-12 col-md-12 col-sm-12"></div>
        <div class="col-lg-12 col-md-12 col-sm-12"></div>
    </div>
    <div class="col-lg-8 col-md-8 col-sm-8">
        <div class="col-lg-12 col-md-12 col-sm-12"></div>
    </div>
</div>

Remember that rows are 12 column based so you think about the bigger layout.

You initially split your screen the way you want ( 4 + 8 ) , inside of those is where the magic happens !

Since a 12 col wide div is occupying the whole space ( it could be a container or any sized div ), the next div will stack below it.

Upvotes: 0

Nenad Vracar
Nenad Vracar

Reputation: 122027

I dont think this is best solution but check it out http://jsfiddle.net/b4voqjud/2/ 

<div class="mockups_wadels">
<div class="div_center">
    <div class="container">
        <div class="row">
            <div class="col-sm-4">
                <div class="row">
                    <div class="col-sm-12">
                        <div class="wadels_dark"></div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-12">
                        <div class="wadels_dark"></div>
                    </div>
                </div>
            </div>

            <div class="col-sm-8">
                <div class="wadels_dark"></div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <div class="wadels_browser">
                </div>
            </div>
        </div>
    </div><!--container end-->
</div><!--end div center-->
</div><!--end of mockup-->

And if you want those two colums to always be same height i don't think you can do that with bootstrap and you have to use javascript, or flexbox, or just adjust padding on different device sizes

Upvotes: 0

Related Questions