Paul Paul - 3 months ago 7
CSS Question

Nested bootstrap rows & columns

Hi i am trying to achieve the following layout

enter image description here
using the following html, css and bootstrap classes

<div class="row">
<div class="col-xs-12 fix-result">
<div class="row">
<p class="fix-result-info">friendly Match | 23 July 2016 | The Muga | KO 14:30 </p>
<div class="col-sm-6 text-center">
<p>WON</p>
<h4>Team A 2-1 Team B</h4>
</div>
<div class="col-sm-6 match-details">
<p>goalscorers</p>
</div>
</div>
</div>
</div>

.fix-result {padding:10px;border: 1px solid #0359cf; margin-bottom:20px;}
.fix-result-info { color: #0359cf;text-transform: uppercase; text-align: center;}
.fix-result .match-details {padding:10px;background-color: #0359cf;}


fiddle - https://jsfiddle.net/kngsne42/

However, the blue div keeps floating outside the scope of the parent div and i am unsure how to resolve the issue.

enter image description here

Am i nesting the rows and columns correctly?

Thanks
Paul

Answer

I don't think you're supposed to nest rows. Also, you should put rows inside a container.

(see also: Bootstrap 3 Grid, do I need a container?)

The following code seems to do the trick:

.fix-result {padding-right:20px;border: 1px solid #0359cf; margin-bottom:20px;}
.fix-result-info { color: #0359cf;text-transform: uppercase; text-align: center;}
.fix-result .match-details {padding:10px;background-color: #0359cf;}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <div class="row col-xs-12 fix-result">
        <p class="fix-result-info">friendly Match | 23 July 2016 | The Muga | KO 14:30 </p>
        <div class="col-sm-6 text-center">
            <p>WON</p>
            <h4>Team A 2-1 Team B</h4>
        </div>
        <div class="col-sm-6 match-details">
            <p>goalscorers</p>
        </div>
    </div>
</div>

Hope it helps.