Nested bootstrap rows & columns

Question

Hi i am trying to achieve the following layout

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.

Am i nesting the rows and columns correctly?

Thanks Paul

row just means no carriage return. since you're already in a row, you shouldn't have another one — neaumusic
– neaumusic, Commented Aug 13, 2016 at 12:47
The best and easiest way would probably be to simply treat this as two separate rows, the first one containing a col-12 and the second one two col-6 elements. — C3roe
– C3roe, Commented Aug 13, 2016 at 12:52

Community · Accepted Answer · 2017-05-23 11:48:20Z

1

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.

edited May 23, 2017 at 11:48

CommunityBot

11 silver badge

answered Aug 13, 2016 at 12:45

Irfan434

1,71115 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Paul Over a year ago

Hi sorry, i do have a conatiner but forgot to add it to my example. I was looking at the Nesting columns part on this page getbootstrap.com/css. It appears to nest a row. Thanks for your suggestions ill give it a go

C3roe Over a year ago

"I don't think you're supposed to nest rows" - neither are you supposed to use row and col- classes on the same element. While this might "work" here, I'd not be surprised if it causes additional alignment problems later on or within a bigger context.

Paul Over a year ago

The col and row was a syntax error sorry. Lot of copy and paste happening. thanks for pointing out

rohit raut · Accepted Answer · 2016-08-13 12:51:38Z

0

I updated your code

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

just make change in tag of . It will work.

answered Aug 13, 2016 at 12:51

rohit raut

531 gold badge2 silver badges15 bronze badges

Collectives™ on Stack Overflow

Nested bootstrap rows & columns

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related