CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Rahul Choudhary
Rahul Choudhary

Reputation: 309

Why is the row spilling out of div VERTICALLY?

.latestQuestions{
	height: 400px;
}

.latestQuestions .row{
	box-sizing: border-box;
}
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>

<div class="bg-info latestQuestions container">
    Latest Questions
    <div class="bg-primary h-100 row">
        <div class="col-sm">col1</div>
        <div class="col-sm">col2</div>
        <div class="col-sm">col3</div>
    </div>
</div>
<p>OK</p>

I have a row inside a <div> and when I put background color to the row it spills out of the <div> vertically. I googled the solutions and all solutions are related to the horizontal spilling. I have used BootStrap latest version.

I have tried using box-sizing: border-box; Tried using class="container" in the outer div (It only helps in the horizontal spilling). 

.latestQuestions {
  height: 400px;
}

.latestQuestions .row {
  box-sizing: border-box;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<div class="bg-info latestQuestions container">
  Latest Questions
  <div class="bg-primary h-100 row">
    <div class="col-sm">col1</div>
    <div class="col-sm">col2</div>
    <div class="col-sm">col3</div>
  </div>
</div>
<p>OK</p>

enter image description hereYou can see that

OK

comes inside the color of the row. I want it outside and below that row.

Upvotes: 0

Views: 160

Answers (2)

Paulie_D
Paulie_D

Reputation: 115365

Make the container a flex-column and then apply flex:1 to the row (removing h-100).

There are Bootstrap classes flex-column etc that can help with this.

.latestQuestions {
  height: 200px;
  /* adjusted for demo */
  display: flex;
  flex-direction: column
}

.latestQuestions .row {
  box-sizing: border-box;
  flex: 1;
}
<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>

<div class="bg-info latestQuestions container">
  Latest Questions
  <div class="bg-primary row">
    <div class="col-sm">col1</div>
    <div class="col-sm">col2</div>
    <div class="col-sm">col3</div>
  </div>
</div>
<p>OK</p>

Upvotes: 1

Jake11
Jake11

Reputation: 831

Remove h-100 as its stands for height: 100% for block

.latestQuestions{
	height: 400px;
}

.latestQuestions .row{
	box-sizing: border-box;
}
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>

<div class="bg-info latestQuestions container">
    Latest Questions
    <div class="bg-primary row">
        <div class="col-sm">col1</div>
        <div class="col-sm">col2</div>
        <div class="col-sm">col3</div>
    </div>
</div>
<p>OK</p>

Upvotes: 0

Related Questions