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

Popular posts from this blog

c# - ODP.NET Oracle.ManagedDataAccess causes ORA-12537 network session end of file -

matlab - Compression and Decompression of ECG Signal using HUFFMAN ALGORITHM -

utf 8 - split utf-8 string into bytes in python -