css - Nested Rows in Bootstrap with alternating padding -
i have layouting needs different padding div container of class "row". example 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 far, achieve different padding each row. outer row should have no padding @ all. added class "row-no-padding" this:
.row-no-padding { [class*="col-"] { padding-left: 0 !important; padding-right: 0 !important; } }
but inherited row used inside form have different padding. how need this?
add specific classname:
<div class="col-md5 class-with-no-padding">
so css:
.class-with-no-padding { padding-left: 0 !important; padding-right: 0 !important; }