CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
v1shnu
v1shnu

Reputation: 2231

Stacking div's vertically in bootstrap

I am creating a box(.info-box) using Bootstrap which contains a text in the center and two lines(.info-line) (one above the text and the other below). On hovering , I want the lines to animate by extending its width. I have done the animation but I am not able get the div stack vertically.

How do I make the divs stack vertically in Bootstrap?

.info-box {
  text-align: center;
  height: 200px;
  color: white;
}

.info-box .info-header {
  background-color: #3178b9;
  height: 90%;
  border: 1px solid #f5f0e7;
  display: flex;
  justify-content: center;
  align-items: center;
  -webkit-transition: all 150ms ease-out;
  -moz-transition: all 150ms ease-out;
  -o-transition: all 150ms ease-out;
  transition: all 150ms ease-out;
}

.info-box .info-header:hover {
  background-color: #b4a28f;
  border: 5px solid #f5f0e7;
  -webkit-transition: all 150ms ease-in;
  -moz-transition: all 150ms ease-in;
  -o-transition: all 150ms ease-in;
  transition: all 150ms ease-in;
}

.info-box .info-header .info-line {
  float: left;
  background-color: white;
  height: 2px;
  width: 0%;
  -webkit-transition: all 150ms ease-out;
  -moz-transition: all 150ms ease-out;
  -o-transition: all 150ms ease-out;
  transition: all 150ms ease-out;
}

.info-box .info-header:hover .info-line {
  background-color: white;
  height: 2px;
  width: 30%;
  -webkit-transition: all 150ms ease-in;
  -moz-transition: all 150ms ease-in;
  -o-transition: all 150ms ease-in;
  transition: all 150ms ease-in;
}

.info-content-box {
  padding-bottom: 30px;
  width: 100%;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css">
<div class="col-md-3 info-box">
  <div class="info-header" data-name="content1">
    <div class="info-line"></div>
    <p>hello</p>
    <div class="info-line"></div>
  </div>
</div>

Upvotes: 1

Views: 3241

Answers (1)

Carlos Valencia
Carlos Valencia

Reputation: 6993

instead of floating .info-line, make its display: inline-block and since you are using display: flex on .info-header, you should also make its flex-direction: column so it makes its items stack on each other.

See the updated code:

.info-box {
  text-align: center;
  height: 200px;
  color: white;
}

.info-box .info-header {
  background-color: #3178b9;
  height: 90%;
  border: 1px solid #f5f0e7;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  -webkit-transition: all 150ms ease-out;
  -moz-transition: all 150ms ease-out;
  -o-transition: all 150ms ease-out;
  transition: all 150ms ease-out;
}

.info-box .info-header:hover {
  background-color: #b4a28f;
  border: 5px solid #f5f0e7;
  -webkit-transition: all 150ms ease-in;
  -moz-transition: all 150ms ease-in;
  -o-transition: all 150ms ease-in;
  transition: all 150ms ease-in;
}

.info-box .info-header .info-line {
  display: inline-block;
  background-color: white;
  height: 2px;
  width: 0%;
  -webkit-transition: all 150ms ease-out;
  -moz-transition: all 150ms ease-out;
  -o-transition: all 150ms ease-out;
  transition: all 150ms ease-out;
}

.info-box .info-header:hover .info-line {
  background-color: white;
  height: 2px;
  width: 30%;
  -webkit-transition: all 150ms ease-in;
  -moz-transition: all 150ms ease-in;
  -o-transition: all 150ms ease-in;
  transition: all 150ms ease-in;
}

.info-content-box {
  padding-bottom: 30px;
  width: 100%;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css">
<div class="col-md-3 info-box">
  <div class="info-header" data-name="content1">
    <div class="info-line"></div>
    <p>hello</p>
    <div class="info-line"></div>
  </div>
</div>

Upvotes: 2

Related Questions