CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
theamateurdataanalyst
theamateurdataanalyst

Reputation: 2834

Divs do not have fixed size when using bootstrap container

I am currently trying to create a set of divs. The content within them will be dynamic so I want to set a fixed with to each one. As it stands right now each box is a different size. I wanted to leverage max-width, but I was not able to do this successfully. I was hoping for the same behavior of everything except for the same size to each .role to be the same size regardless of screen size. Please note that the parent container is a bootstrap container. Here is my jsFiddle

EDIT:I am shooting for all divs to be the same size. Ideally, it'd be great if each box was the size of the largest box(dynamic content is inserted into p and headers.

index.html

<div class="container">
    <div class="role-list">
    <div class="role">
        <h3>Firefighter - The Best of the best</h3>
        <p>He is a great and I know that he loves his job.
        He is a great and I know that he loves his job
            He is a great and I know that he loves his job
            He is a great and I know that he loves his job

        </p>
    </div>
        <div class="role">
        <h3>Firefighter </h3>
        <p>He is a great and I know that he loves his job</p>
    </div>    
        <div class="role">
        <h3>Firefighter </h3>
        <p>He is a great and I know that he loves his job</p>
    </div>    
        <div class="role">
        <h3>Firefighter - The Best of the best</h3>
        <p>He is a great and I know that he loves his job
             He is a great and I know that he loves his job
            He is a great and I know that he loves his job
            </p>
    </div>   
    </div>
</div>

CSS

.role {
  display: inline-block;
  width: 47%;
  margin: 10px 10px;
  padding: 2%;
  vertical-align: top;
  background: #fff;
  border: 1px solid #ebebeb;
  text-decoration: none;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -o-transition: all 0.2s;
  -ms-transition: all 0.2s;
  transition: all 0.2s;
  border-bottom: 3px solid transparent;
  cursor: pointer;
}

Upvotes: 0

Views: 168

Answers (1)

Sohrab Hejazi
Sohrab Hejazi

Reputation: 1511

You should be able to accomplish this by adding a min-width to your css. Add the following to your .role in your CSS. You can set the min-width to any size you like.

min-width: 400px;

In order accomplish the same size boxes, you need to set the width and height CSS properties. That can get a bit tricky because if the content is longer than what the size can handle, then it will stretch the div unless you set the overflow to scroll.

jsFiddle

Upvotes: 1

Related Questions