html - container-fluid leaving blank space -


i want use full width div, added container-fluid class leaves blank space on left , right. solved using negative margin left , right. problem negative margin afftects bootstrap responsive nature. when resize left side contents hidden , there horizontal scrollbar on resizing.

<div class="container-fluid"> <div class="row" style="background-color:gainsboro">  <div class="col-md-10">  </div>  </div>  </div> 

the problem you're having padding result of classes calling. both col-md series , container-fluid come out of box with

padding-left: 15px; padding-right: 15px; 

for padding of 30px on each side combined. simplest way fix content being clipped creating own class include

.container-margin {     margin-left: -15px;     margin-right: -15px; } 

the row class take care of -15px, , above take care of rest. way if ever chose use container-fluid again, wouldn't same result of them.

here fiddle code updated.


Comments

Popular posts from this blog

c++ - llvm function pass ReplaceInstWithInst malloc -

Cross-Compiling Linux Kernel for Raspberry Pi - ${CCPREFIX}gcc -v does not work -

java.lang.NoClassDefFoundError When Creating New Android Project -