Using Bootstrap to create a grid layout with an image

Where can I find a custom bootstrap grid similar to the one shown in the image below, with the red square being an image?

https://i.sstatic.net/rgg0H.jpg

I attempted to use this code but it didn't give me the exact outcome. How can I modify it to achieve the desired 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+PCFbQ0RBVEFbI2hvbGRlcl8xNjBiNjU1ZGVjYyB0ZXh0IHsgZmlsbDojQUFBQUFBO2ZvbnQtd2VpZ2h0OmJvbGQ7...

cssbootstrap-4

Answer №1

Since you added the css tag, I wanted to show you how to achieve the same effect using pure CSS and CSS Grid.

Here is the HTML:

<div class="container">
  <div class="item-1">One</div>
  <div class="item-2">Two</div>
  <div class="item-3">Three</div>
  <div class="item-4">Four</div>
  <div class="item-5">Five</div>
  <div class="item-6">Six</div>
  <div class="item-7">Seven</div>
</div>

And here is the CSS:

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

Check out this example: https://i.sstatic.net/mZlk4.png

Answer №2

Utilizing nesting is the key to achieving this design. In Bootstrap 3, the structure is as follows:

<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/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAv...


                </div>
            </div>
        </div></answer2>
<exanswer2><div class="answer" i="48265257" l="3.0" c="1516016747" v="1" a="V2ViRGV2Qm9vc3Rlcg==" ai="8270343">
<p>This design technique relies on nesting elements. Below shows how you implement it in Bootstrap 3 with an example for Bootstrap 4 included:</p>

<p><div>
<div>
<pre><code><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>
           </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>

To achieve this layout, follow the pattern of placing another row and column inside the main column where your image is located.

Repeat this nested structure throughout your design.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ways to customize the color of a ReactSelect component?

Hey there! I'm currently utilizing the React select component, with the following import statement: import ReactSelect, {ValueType} from 'react-select'; Here is what my component currently looks like: https://i.stack.imgur.com/yTmW4.png Th ...

cssreactjsreact-select

Html content overlapping div rather than being stacked vertically

My goal is to arrange a group of divs inside another div in a vertical stack. However, I am facing an issue where the text from the last div is overlapping with the second div instead of following a proper vertical alignment where the text in the third div ...

javascripthtmlcss

Ways to recover HTML elements that have been eliminated by jQuery's remove

$(document).ready(function() { $('#remove').click(function() { $('.test').remove(); }); }); <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="test-wra ...

javascripthtmlcss

Is it not possible to update the innerHTML stored in a variable in real-time?

I am attempting to link a div's text with a variable that changes its value based on different button clicks (using plain JavaScript), but I am struggling to update the inner HTML dynamically. It only displays the initial value set on page load. What ...

javascripthtmlcss

Maintaining CSS elements in position

Hello everyone, I have a project at work where I need to create a map with specific cities pinpointed. I've completed it on my computer and now I'm trying to ensure that when I transfer it to another device, like a laptop, the points remain in t ...

htmlcss

The art of masonry is not effective

I'm having trouble getting the Masonry cascading grid layout library to work in my code. Stylesheet: .post { background: #FFF; padding: 10px; border-bottom: 3px solid #e6e6e6; width: 30.7%; margin: 10px; } Source code: <div ...

javascriptjqueryhtmlcssmasonry

Finding a predecessor with Selenide through tag and class identification

Trying to find the ancestor element using Selenide library on a website. The ancestor element is <div class="BorderGrid-cell" ...>. The .closest(".BorderGrid-cell") method works well. However, the .closest("div.BorderGrid-ce ...

cssselenide

Tips for increasing a variable by one with each button click?

I have a simple JavaScript function called plusOne() that is designed to increment a variable by 1 each time a button is clicked, and then display the updated value on a webpage. However, I'm encountering an issue where the addition only occurs once. ...

javascriptjqueryhtmlcss

Struggling with Getting My Animation to Function Correctly

I am trying to create a JQuery Animation that will move a div covering a text box up into the border when clicked. Despite multiple attempts, I can't seem to get the animation to work properly. Any suggestions? JavaScript function moveup(title,text ...

javascripthtmlcssanimation

How to make a div expand to full width using CSS animations

Issue with Div Animation I am currently facing an issue where I am trying to animate a div to expand to 100% of its child's width on hover. However, the animation is not working smoothly as expected. Instead of gradually expanding to the right, the d ...

htmlcssanimation

Centering an item using Bootstrap

I am using bootstrap in reactjs and attempting to center a text in the middle of the screen, but it seems to not be working. Can someone please point out what I am doing wrong? <div className="h-100 d-flex align-self-center justify-content-center&q ...

cssreactjsbootstrap-4bootstrap-5

Collapse the columns and set them to float on the left side

My current setup might not be the most visually appealing, but it gets the job done. I have several col-md-4 tags in place. The issue arises when the height of the first tag is larger than the ones next to it, causing the subsequent tag to appear in the mi ...

angularjstwitter-bootstrapcsstwitter-bootstrap-3

Is it possible to remove certain 'css-' class names that MUI automatically applies to its components? (Using Next JS and MUI)

After successfully migrating my create-react-app project to Next JS using the latest version (12.1.0) and following the migration guide at https://nextjs.org/docs/migrating/from-create-react-app, I encountered an unexpected issue. Despite still using MUI a ...

javascriptcssmaterial-uinext.jsstyles

What could be the reason for my flex items not shrinking when the browser window size is decreased?

Here is the CSS code for the header component using flexbox: .header { display: flex; flex-direction: row; justify-content: space-between; padding: 15px 20px; background-color: #ffffff; position: sticky; top: 0; z-index: ...

cssreactjsflexboxmaterial-ui

Javascript is experiencing a decrease in the variability of its content

I currently have multiple pages structured like this: <body> <table><tr><td align="center" width="100%"> --PAGE HTML-- </td></tr></table> </body> For a temporary period, I need to change the str ...

javascriptjqueryhtmlcss

Is there a way to modify a scope variable using the on-scroll event in an Ionic app?

I am trying to update a variable's value when the scroll position exceeds 100 from the top, but for some reason it is not working as expected. The value of the variable does not change in $scope. Here is the code snippet: <div ng-show="title===tr ...

htmlcssangularjsionic-framework

Problem with CSS: In Chrome, text fields have 3px additional margin-right

https://i.sstatic.net/I8mzi.jpg I am facing an issue with the margins of my text fields. Even though I have set a margin-right of 5px for each field, Google Chrome seems to be adding an additional 3-4px automatically. This problem is evident when I dynami ...

javascriptjqueryhtmlcssgoogle-chrome

Ways to exclusively trigger the onclick function of the primary button when dealing with nested buttons in React.js

Let me elaborate on this issue. I have a List component from material-UI, with ListItem set to button=true which makes the entire item act as a button. Within the ListItem, I have added a FontAwesomeIcon. To hide the button, I set its style to visibility: ...

javascripthtmlcssreactjsmaterial-ui

How to Align HTML Menu in the Middle of the Page

I've been struggling to center my menu on the page. I tried setting the display to block and using margin auto for left and right, but it's not working as expected. You can see the issue in this JSFiddle. Any help would be appreciated. <ul id ...

htmlcss

Ensuring DIVs are completely contained within their parent DIV using Fullscreen CSS and a height of

I found a nearly-perfect design using the code below: https://i.sstatic.net/56i2E.png This code provides the layout mentioned: <!DOCTYPE html> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="http://maxcdn. ...

htmlcss