Nested Rows in Bootstrap with alternating padding

Question

I have some layouting that needs different padding for a div container of class "row". For example like that

<div class="row row-no-padding">
    <div class="col-md7">
        test content
    </div>
    <div class="col-md5">
        <div class="row">
            <div class="col-sm-6">
                <div class="form-group form-group-default">
                    {!! Form::label('ticket_reference', 'Ticket Referenz') !!}
                    {!! Form::text('ticket_reference', null, ['class' => 'form-control']) !!}
                </div>
            </div>
            <div class="col-sm-6">
                <div class="form-group form-group-default">
                    {!! Form::label('eldis_reference', 'ELDIS Referenz') !!}
                    {!! Form::text('eldis_reference', null, ['class' => 'form-control']) !!}
                </div>
            </div>
        </div>
    </div>
</div>

That works so far, but I would like to achieve a different padding for each row. The outer row should have no padding at all. So I added a class "row-no-padding" to it like this:

.row-no-padding {
  [class*="col-"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

But this is inherited to the row used inside the form where I would like to have a different padding. How do I need to do this?

why did you use [class*="col-"] ? it will work without it, if you want a row to have no padding simply add the row-no-padding class to it. — odedta
– odedta, Commented Apr 23, 2015 at 7:55
I thought because of making sure all col- classes will be affected? — sesc360
– sesc360, Commented Apr 23, 2015 at 7:57
Then just add .row class values to run over the initial values that comes from bootstrap.css — odedta
– odedta, Commented Apr 23, 2015 at 7:59

romuleald · Accepted Answer · 2015-04-23 07:56:25Z

1

Add a specific className:

<div class="col-md5 class-with-no-padding">

So your CSS:

.class-with-no-padding {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

answered Apr 23, 2015 at 7:56

romuleald

1,45416 silver badges32 bronze badges

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

1 Comment

romuleald Over a year ago

Show your complete CSS so we can help

Collectives™ on Stack Overflow

Nested Rows in Bootstrap with alternating padding

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related