CODEWITHSUNDEEP
htmlcsstwitter-bootstrapstyling
Mike Hawk
Mike Hawk

Reputation: 87

working with the grid system in Bootstrap

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;
    }

What it looks like now: I want the "yo" box to be more square and to the right of the button group

I want the "yo" box to be more rectangular and to the right of the button group.

Upvotes: 0

Views: 311

Answers (2)

Carol Skelly
Carol Skelly

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

Michael Coker
Michael Coker

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

Related Questions