Reputation: 87
I am relatively new to web development in general and am having a layout crisis: I have a container-fluid that has a row split into two *col-md-6*s. Within a col-md-6 I want to be able to position elements horizontally. As shown in my code/picture; I am trying to make a simple div that is 95% the height of the button-group and shows up next to it...however it is showing up below it and is very short (I want it to be as tall as the button group). What is the protocol for sizing/positioning elements next to each other in Bootstrap like this?
<div class="container-fluid">
<div class="row">
<div class="col-md-6" style="background-color: lightcyan">
<div class="btn-group-vertical btn-group-lg">
<button type="button" class="btn btn-primary">Quick Select</button>
<button type="button" class="btn btn-primary">Show in Depth</button>
<button type="button" class="btn btn-primary">Delete Product</button>
</div>
<div id="prod_view">
yo
</div>
CSS:
#prod_view{
background: lightcoral;
width: 69%;
height: 95%;
margin-left: 23%;
border: solid;
}
I want the "yo" box to be more rectangular and to the right of the button group.
Upvotes: 0
Views: 311
Reputation: 362870
Another way is with a single flexbox class. Add it to the row
and col-md-6
:
.flex {
display: flex;
}
<div class="container-fluid">
<div class="row flex">
<div class="col-md-6 flex" style="background-color: lightcyan">
<div class="btn-group-vertical btn-group-lg">
<button type="button" class="btn btn-primary">Quick Select</button>
<button type="button" class="btn btn-primary">Show in Depth</button>
<button type="button" class="btn btn-primary">Delete Product</button>
</div>
<div id="prod_view">
yo
</div>
</div>
</div>
</div>
http://www.codeply.com/go/wvCRJ0ufEB
In Bootstrap 4, flexbox is default so there is no need for the extra class.
Upvotes: 0
Reputation: 53709
Here's a flex layout that will do that. You can use the justify-content
property to affect the horizontal alignment, and align-items
will affect the vertical alignment. Here's a visual guide for flexbox https://css-tricks.com/snippets/css/a-guide-to-flexbox/
.custom-row {
display: flex;
justify-content: space-between;
}
.custom-row > div:last-child {
width: 69%;
}
#prod_view {
height: 95%;
background: lightcoral;
border: solid;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-md-6 custom-row" style="background-color: lightcyan">
<div class="btn-group-vertical btn-group-lg">
<button type="button" class="btn btn-primary">Quick Select</button>
<button type="button" class="btn btn-primary">Show in Depth</button>
<button type="button" class="btn btn-primary">Delete Product</button>
</div>
<div>
<div id="prod_view">
yo
</div>
</div>
</div>
</div>
</div>
Upvotes: 3