CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Ram kumar
Ram kumar

Reputation: 3162

Bootstrap have no gutter

Can I use bootstrap grid with no gutter? I want 3 columns with one row http://prntscr.com/6gpmhm I had posted the markup about css I am using default css of framework 

<section class="team-block">
	<div class="row">
		<div class="col-sm-4">
			<img src="images/photo-01.jpg" height="534" width="534" alt="image description">
		</div>
		<div class="col-sm-4">
			<img src="images/photo-02.jpg" height="267" width="266" alt="image description">
			<img src="images/photo-10.jpg" height="267" width="266" alt="image description">
			<img src="images/photo-03.jpg" height="267" width="266" alt="image description">
			<img src="images/photo-04.jpg" height="267" width="266" alt="image description">
		</div>
		<div class="col-sm-4">
			<img src="images/photo-05.jpg" height="534" width="534" alt="image description">
		</div>
	</div>
</section>

Upvotes: 0

Views: 130

Answers (2)

user7393078
user7393078

Reputation:

You have to use external class for it.

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

Upvotes: 0

AndrewL64
AndrewL64

Reputation: 16311

For the images to stack on one column, you need to remove px widths and re-define rows like this:

<div class="col-sm-4">
    <div class="row">
        <div class="col-sm-6">
            <img src="images/photo-02.jpg" class="img-responsive" alt="image description">
        </div>
        <div class="col-sm-6">
            <img src="images/photo-10.jpg" class="img-responsive" alt="image description">
        </div>
    </div>
    <div class="row">
        <div class="col-sm-6">
            <img src="images/photo-03.jpg" class="img-responsive" alt="image description">
        </div>
        <div class="col-sm-6">
            <img src="images/photo-04.jpg" class="img-responsive" alt="image description">
        </div>
    </div>
</div>

You can add this to your css to remove the gutter:

.col-sm-4    {
    padding: 0px;
}
.col-sm-6    {
    padding: 0px;
}

Upvotes: 1

Related Questions