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