CODEWITHSUNDEEP
csstwitter-bootstrap-3
sesc360
sesc360

Reputation: 3255

Nested Rows in Bootstrap with alternating padding

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?

Upvotes: 0

Views: 429

Answers (1)

romuleald
romuleald

Reputation: 1434

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;
}

Upvotes: 1

Related Questions