CODEWITHSUNDEEP
cssbootstrap-4
th3g3ntl3man
th3g3ntl3man

Reputation: 2106

Bootstrap grid with image

How can I obtain a custom bootstrap grid like this in the picture? Where the red square is an image?

final result

I try with this code but it is not exactly the same. How can I improve it to get the same result?

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">


<div class="container">
    <div class="row">
        <div class="col-sm-2">
            <img alt="66x66" class="media-object" data-src="holder.js/64x64" style="width: 70px; height: 70px;"
                            src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCA2NCA2NCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PCEtLQpTb3VyY2UgVVJMOiBob2xkZXIuanMvNjR4NjQKQ3JlYXRlZCB3aXRoIEhvbGRlci5qcyAyLjYuMC4KTGVhcm4gbW9yZSBhdCBodHRwOi8vaG9sZGVyanMuY29tCihjKSAyMDEyLTIwMTUgSXZhbiBNYWxvcGluc2t5IC0gaHR0cDovL2ltc2t5LmNvCi0tPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PCFbQ0RBVEFbI2hvbGRlcl8xNjBiNjU1ZGVjYyB0ZXh0IHsgZmlsbDojQUFBQUFBO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjEwcHQgfSBdXT48L3N0eWxlPjwvZGVmcz48ZyBpZD0iaG9sZGVyXzE2MGI2NTVkZWNjIj48cmVjdCB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSIxMy40Njg3NSIgeT0iMzYuNSI+NjR4NjQ8L3RleHQ+PC9nPjwvZz48L3N2Zz4="
                            data-holder-rendered="true"> 
        </div>
        <div class="col-sm-5" style="border: 1px solid black;">1</div>
        <div class="col-sm-5" style="border: 1px solid black; float: right;">2</div>
        <div class="col-sm-5" style="border: 1px solid black;">3</div>
        <div class="col-sm-5" style="border: 1px solid black; float: right;">4</div>
        <div class="col-sm-5" style="border: 1px solid black;">4</div>
        <div class="col-sm-5" style="border: 1px solid black;">6</div>
    </div>
</div>

Upvotes: 0

Views: 119

Answers (2)

sore-spot
sore-spot

Reputation: 125

As you added the css tag I thought you might like to see how to use pure css and cssgrid to do the same thing.

HTML:

<div class="wrapper">
  <div class="one">One</div>
  <div class="two">Two</div>
  <div class="three">Three</div>
  <div class="four">Four</div>
  <div class="five">Five</div>
  <div class="six">Six</div>
  <div class="seven">Seven</div>
</div>

CSS:

* {box-sizing: border-box;}
.wrapper {
  max-width: 940px;
  margin: 0 auto;
}
.wrapper > div {
  border: 2px solid rgb(233,171,88);
  border-radius: 5px;
  background-color: rgba(233,171,88,.5);
  padding: 1em;
  color: #d9480f;
}
.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
  grid-auto-rows: minmax(100px, auto);
}
.one {
  grid-column: 1 / 1;
  grid-row: 1 / 4;
}
.two { 
  grid-column: 2 / 4;
  grid-row: 1 / 1;
}
.three {
 grid-column: 2 / 4;
 grid-row: 2 / 3;
}
.four {
  grid-column: 2 / 4;
  grid-row: 3 / 3;
}
.five {
  grid-column: 6;
  grid-row: 1;
}
.six {
  grid-column: 6;
  grid-row: 2;
}
.seven {
  grid-column: 6;
  grid-row: 3;
}

Example: enter image description here

Upvotes: 1

WebDevBooster
WebDevBooster

Reputation: 14954

This is accomplished by nesting. This is how you do it in Bootstrap 3 (further down below is the Bootstrap 4 version): 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="container">
    <div class="row m-top-30">
        <div class="col-sm-2">
           <div class="row">
               <div class="col-sm-12">
                   <img alt="66x66" class="media-object" data-src="holder.js/64x64" style="width: 70px; height: 70px;" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCA2NCA2NCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PCEtLQpTb3VyY2UgVVJMOiBob2xkZXIuanMvNjR4NjQKQ3JlYXRlZCB3aXRoIEhvbGRlci5qcyAyLjYuMC4KTGVhcm4gbW9yZSBhdCBodHRwOi8vaG9sZGVyanMuY29tCihjKSAyMDEyLTIwMTUgSXZhbiBNYWxvcGluc2t5IC0gaHR0cDovL2ltc2t5LmNvCi0tPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PCFbQ0RBVEFbI2hvbGRlcl8xNjBiNjU1ZGVjYyB0ZXh0IHsgZmlsbDojQUFBQUFBO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjEwcHQgfSBdXT48L3N0eWxlPjwvZGVmcz48ZyBpZD0iaG9sZGVyXzE2MGI2NTVkZWNjIj48cmVjdCB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSIxMy40Njg3NSIgeT0iMzYuNSI+NjR4NjQ8L3RleHQ+PC9nPjwvZz48L3N2Zz4="
                        data-holder-rendered="true"> 
               </div>
           </div>
        </div>
        <div class="col-sm-10">
            <div class="row">
                    <div class="col-sm-6">1</div>
                    <div class="col-sm-6">2</div>
                    <div class="col-sm-6">3</div>
                    <div class="col-sm-6">4</div>
                    <div class="col-sm-6">4</div>
                    <div class="col-sm-6">6</div>
            </div>
        </div>
    </div>
</div>

And this is how you do it in Bootstrap 4:

<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">


<div class="container">
    <div class="row m-top-30">
        <div class="col-sm-2">
           <div class="row">
               <div class="col">
                   <img alt="66x66" class="media-object" data-src="holder.js/64x64" style="width: 70px; height: 70px;" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCA2NCA2NCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PCEtLQpTb3VyY2UgVVJMOiBob2xkZXIuanMvNjR4NjQKQ3JlYXRlZCB3aXRoIEhvbGRlci5qcyAyLjYuMC4KTGVhcm4gbW9yZSBhdCBodHRwOi8vaG9sZGVyanMuY29tCihjKSAyMDEyLTIwMTUgSXZhbiBNYWxvcGluc2t5IC0gaHR0cDovL2ltc2t5LmNvCi0tPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PCFbQ0RBVEFbI2hvbGRlcl8xNjBiNjU1ZGVjYyB0ZXh0IHsgZmlsbDojQUFBQUFBO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjEwcHQgfSBdXT48L3N0eWxlPjwvZGVmcz48ZyBpZD0iaG9sZGVyXzE2MGI2NTVkZWNjIj48cmVjdCB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSIxMy40Njg3NSIgeT0iMzYuNSI+NjR4NjQ8L3RleHQ+PC9nPjwvZz48L3N2Zz4="
                        data-holder-rendered="true"> 
               </div>
           </div>
        </div>
        <div class="col border border-dark">
            <div class="row">
                    <div class="col-sm-6 border border-dark">1</div>
                    <div class="col-sm-6 border border-dark">2</div>
                    <div class="col-sm-6 border border-dark">3</div>
                    <div class="col-sm-6 border border-dark">4</div>
                    <div class="col-sm-6 border border-dark">4</div>
                    <div class="col-sm-6 border border-dark">6</div>
            </div>
        </div>
    </div>
</div>

So, inside the column where you have the image you put another row AND a column. And then put your image inside.

In a similar fashion you nest the rest.

Upvotes: 1

Related Questions