CODEWITHSUNDEEP
htmlcsstwitter-bootstrapimagebootstrap-4
Sergio
Sergio

Reputation: 127

Bootstrap grid overflow with images

I´m trying to acchive this image gallery using bootstrap grid layout:

enter image description here

but I can´t overflow the last image on the second row into the first row...

Here is my html code:

.gal-container {
    display: block;
    width: 100%;
    padding: 16px;
}
    
.nopadding {
    padding: 0 !important;
    margin: 0 !important;
}
    
.box {
    padding: 32px;
}
    
.row img {
    max-width: 100%;
    max-height: 100%;
}
<section>
    <div class="gal-container">
        <div class="box">
            <div class="row">
                <div class="col-sm-6 nopadding"><img src="img/image1.jpg"></div>
                <div class="col-sm-3 nopadding"><img src="img/image2.jpg"></div>
                <div class="col-sm-3 nopadding"><img src="img/image3.jpg"></div>
            </div>
            <div class="row">
                <div class="col-sm-3 nopadding"><img src="img/image4.jpg"></div>
                <div class="col-sm-3 nopadding"><img src="img/image5.jpg"></div>
                <div class="col-sm-6 nopadding"><img src="img/image6.jpg"></div>
            </div>
        </div>
    </div>
</section>

The result of this code is this:

enter image description here

I would appreciate the help to put the Stranger Things image at the bottom of the two small pictures :)

Upvotes: 1

Views: 834

Answers (3)

Stewartside
Stewartside

Reputation: 20905

If you just swap around positioning and the wrappers, you should be able to get your desired effect

Also, you will have to take into account the paddings and widths you need as they will affect the positioning of the elements.

Demo works in full screen due to size

.gal-container {
  display: block;
  width: 600px;
  padding: 16px;
}

.nopadding {
  padding: 0 !important;
  margin: 0 !important;
}

.box {
  padding: 30px;
}

.row img {
  max-width: 100%;
  max-height: 100%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="gal-container">
  <div class="row">
    <div class="col-sm-6 nopadding">
      <div class="col-sm-12 nopadding"> <img src="http://via.placeholder.com/300x150"> </div>
      <div class="col-sm-6 nopadding"> <img src="http://via.placeholder.com/150x100"> </div>
      <div class="col-sm-6 nopadding"> <img src="http://via.placeholder.com/150x100"> </div>
    </div>

    <div class="col-sm-6 nopadding">
      <div class="col-sm-6 nopadding"> <img src="http://via.placeholder.com/150x100"> </div>
      <div class="col-sm-6 nopadding"> <img src="http://via.placeholder.com/150x100"> </div>
      <div class="col-sm-12 nopadding"> <img src="http://via.placeholder.com/300x150"></div>
    </div>
  </div>
</div>

Upvotes: 0

DeadCoderz
DeadCoderz

Reputation: 237

Your markup is not matching as per your desired layout.It should be something like this :

<div class="box">
        <div class="row">
            <div class="col-sm-6 nopadding">
                <div class="col-sm-12 nopadding">
                    <img src="img/image1.jpg">
                </div>
                <div class="row">
                    <div class="col-sm-6 nopadding">
                        <img src="img/image2.jpg">
                    </div>
                    <div class="col-sm-6 nopadding">
                        <img src="img/image3.jpg">
                    </div>
                </div>
            </div>
            <div class="col-sm-6 nopadding">
                <div class="col-sm-12 nopadding">
                    <img src="img/image4.jpg">
                </div>
                <div class="row">
                    <div class="col-sm-6 nopadding">
                        <img src="img/image5.jpg">
                    </div>
                    <div class="col-sm-6 nopadding">
                        <img src="img/image6.jpg">
                    </div>
                </div>
            </div>
        </div>
    </div>

Also add overflow:hidden in nopadding. Hope it helps !

Upvotes: 0

WebDevBooster
WebDevBooster

Reputation: 14954

There's absolutely no custom css needed for this and the job can be done with less code using native Bootstrap 4 classes alone: 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">

<section class="container">
    <div class="row no-gutters">
        <div class="col-sm-6">
            <div class="row no-gutters">
                <div class="col-12"><img src="img/image1.jpg"></div>
                <div class="col-sm-6"><img src="img/image2.jpg"></div>
                <div class="col-sm-6"><img src="img/image3.jpg"></div>
            </div>
        </div>
        <div class="col-sm-6">
            <div class="row no-gutters">
                <div class="col-sm-6"><img src="img/image4.jpg"></div>
                <div class="col-sm-6"><img src="img/image5.jpg"></div>
                <div class="col"><img src="img/image6.jpg"></div>
            </div>
        </div>
    </div>
</section>

Upvotes: 2

Related Questions