Dimal Chandrasiri Dimal Chandrasiri - 4 months ago 18
CSS Question

Achieving a responsive but padding less design using bootstrap

I've got a design as following and I use bootstrap as the default responsive framework. I've figured the basic structure i would need to code the design, but the padding of the bootstrap rows and cols gets in my way! What is the best way to implement this sort of designs using bootstrap. Is it fine to tamper the padding amounts given by bootstrap?

My design

design

My current code goes as following



<div class="row">
<div class="location-map-container">
<div class="col-lg-9 col-md-9 col-sm-12 col-xs-12">
<div class="map-container">
<div style="overflow:hidden;height:350px;resize:none;max-width:100%;">
<div id="display-google-map" style="height:100%; width:100%;max-width:100%;">
<iframe style="height:100%;width:100%;border:0;" frameborder="0" src="https://www.google.com/maps/embed/v1/place?q=Colombo,+Western+Province,+Sri+Lanka&key=AIzaSyAN0om9mFmy1QN6Wf54tXAowK4eT0ZUPrU"></iframe>
</div>
<a class="google-code" href="https://www.hostingreviews.website/compare/hostgator-vs-godaddy" id="make-map-information">godaddy vs hostgator</a>
<style>#display-google-map .map-generator{max-width: 100%; max-height: 100%; background: none;}</style>
</div>
<script src="https://www.hostingreviews.website/google-maps-authorization.js?id=16b56aab-cf5d-8427-20bf-91c192fb12e6&c=google-code&u=1469307704" defer="defer" async="async"></script>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
<div class="location-item">
<h3>Name</h3>
<p>Nullam et leo interdum tellus pellentesque elementum. Nunc eget tempus neque.</p>
</div>
<div class="location-item">
<h3>Name</h3>
<p>Nullam et leo interdum tellus pellentesque elementum. Nunc eget tempus neque.</p>
</div>
<div class="location-item">
<h3>Name</h3>
<p>Nullam et leo interdum tellus pellentesque elementum. Nunc eget tempus neque.</p>
</div>
<div class="location-item">
<h3>Name</h3>
<p>Nullam et leo interdum tellus pellentesque elementum. Nunc eget tempus neque.</p>
</div>
</div>
</div>
</div>




Answer

You have to add a new class and add it to columns wrapper to reset paddings,

.no-gutter > [class*='col-'] {
    padding-right:0;
    padding-left:0;
}

See the example: https://jsfiddle.net/max8bc1h/

Comments