html - How to remove the spacing between the columns or grids in bootstrap? -
i trying build tile view using bootstrap grids dont want spacing between adjacent columns or rows. tried many ways remove not able to. can 1 please same ?
following code
<div class="container"> <div class="row"> <div class="col-lg-8 col-sm-12 col-md-8 col-xs-12"> <div class="col-lg-12 col-sm-12 col-md-12 col-xs-12"> <div class="col-lg-6 col-sm-12 col-md-6 col-xs-12"> //a vertical long image </div> <div class="col-lg-6 col-sm-12 col-md-6 col-xs-12"> <div class="col-lg-12 col-sm-12 col-md-12 col-xs-12"> //square image </div> <div class="col-lg-12 col-sm-12 col-md-12 col-xs-12"> //square image </div> </div> </div> <div class="col-lg-12 col-sm-12 col-md-12 col-xs-12"> <!-- <horizontal image> --> </div> </div> <div class="col-lg-4 col-sm-12 col-md-4 col-xs-12 pull-right"> <div class="col-lg-12 col-sm-12 col-md-12 col-xs-12" > //square image </div> <div class="col-lg-12 col-sm-12 col-md-12 col-xs-12" > //vertical long image </div> </div> </div> </div>
bootstrap not provide such functionality, easy have grid columns without having space.
.no-gutter > [class*='col-'] { padding-right:0; padding-left:0; }
you can use .no-gutter
class adding .row
class.
<div class="row no-gutter"> <div class="col-md-4"> ... </div> <div class="col-md-4"> ... </div> <div class="col-md-4"> ... </div> </div>
source: https://scotch.io/bar-talk/bootstrap-3-tips-and-tricks-you-still-might-not-know
Comments
Post a Comment