Creating a design that resembles boxes for the div elements while ensuring the grid layout remains undisturbed

Hey there! I'm new to using Bootstrap and I'm trying to create boxes that look like the ones on the right side of this page:

Unfortunately, I haven't had much luck so far. I tried using padding, but it messed up my grid system. I assigned a col-sm-8 for the picture side and a col-sm-4 for the boxes, but it always seems to cause issues with the grid system. Here's the HTML I've been working with, could you lend me a hand?

<div class="container">
    <div class="row">
        <div class="col-sm-8">
            <img src="xxxx" />
        </div>
        <div class="col-sm-4">
            <div class="col-sm-6">
                <div style="background-color: grey; padding: 25px; text-align: center; vertical-align: middle">
                    Oven
                </div>
            </div>
            <div class="col-sm-6">
                <div style="background-color: grey; padding: 25px; text-align: center; vertical-align: middle">
                    Cookers
                </div>
            </div>
            <div class="col-sm-6">
                <div style="background-color: grey; padding: 25px; text-align: center; vertical-align: middle">
                    Microwave Ovens
                </div>
            </div>
            <div class="col-sm-6">
                <div style="background-color: grey; padding: 25px; text-align: center; vertical-align: middle">
                    Steamers
                </div>
            </div>
            <div class="col-sm-6">
                <div style="background-color: grey; padding: 25px; text-align: center; vertical-align: middle">
                    Cooker hoods
                </div>
            </div>
            <div class="col-sm-6">
                <div style="background-color: grey; padding: 25px; text-align: center; vertical-align: middle">
                    Hobs
                </div>
            </div>
        </div>
    </div>
</div>
htmlcsstwitter-bootstrap

Answer №1

Make sure to include the row class for nested rows/columns. Here is an example of how you can implement it:

.box {
  background-color: grey;
  padding: 25px;
  text-align: center;
  vertical-align: middle;
  margin: 10px;
}

img {
  max-width: 100%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<div class="container">
  <div class="row">
    <div class="col-sm-8">
      <img src="https://lorempixel.com/800/400/" />
    </div>
    <div class="col-sm-4">
      <div class="row">
        <div class="col-sm-6">
          <div class="box">
            Oven
          </div>
        </div>
        <div class="col-sm-6">
          <div class="box">
            Cookers
          </div>
        </div>
        <div class="col-sm-6">
          <div class="box">
            Microwave
          </div>
        </div>
        <div class="col-sm-6">
          <div class="box">
            Steamers
          </div>
        </div>
        <div class="col-sm-6">
          <div class="box">
            Cooker hoods
          </div>
        </div>
        <div class="col-sm-6">
          <div class="box">
            Hobs
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

For more information on grid nesting, refer to the Bootstrap documentation.

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

Break the page after generating specific charts with JQuery

I have a task to create multiple charts, where the first page needs to include a header and the first 8 charts. How can I insert a page break after the 8th chart and move on to a second page without a header? Each student has different subjects and score ...

jqueryhtmlcss

Angular child component displaying of table data is not looping properly

Currently, I am using Angular 13 along with Bootstrap 3 to develop an application that consists of two main components: form-component (dedicated to inputting user details) and list-component (designed to showcase all data in a table format). Within the HT ...

javahtmlangulartypescript

Move a div to line up with a table row when clicked using jQuery

As I mentioned in a previous post, my experience with jQuery is limited and I apologize for that. The task I am attempting to accomplish seems relatively straightforward. Here's an overview of the situation: I have a table enclosed within a div. Each ...

jquerycssmodel-view-controller

How can I select a specific value within an Autocomplete bar by clicking on it in the div ul li strong

I have a multitude of li tags nested under both div and ul. Each li tag contains a strong element: <div style="width:380px" id="autoComplete" class="suggest fl"> <div class="sWrap"> <div class="iconWrap"> <span ...

javahtmlseleniumxpathselenium-webdriver

Utilizing JavaScript Modules to Improve Decoupling of DOM Elements

Currently, I am tackling portions of a complex JavaScript application that heavily involves DOM elements. My goal is to begin modularizing the code and decoupling it. While I have come across some helpful examples, one particular issue perplexes me: should ...

javascripthtmldom

Moving from the center to the bottom-right with a CSS transition

I have a specific requirement where I need the container to cover the entire page and shrink when clicked, with an animation. Currently, I am using CSS transition to animate the container shrinking towards the top: The container shrinks slowly to the sp ...

javascripthtmlcsscss-transitions

Two HTML elements positioned alongside each other with inline word wrapping

Apologies for the vague question title, which may not accurately reflect my requirements. This is one reason why I am struggling to find a solution through a simple Google search - I'm unsure of what terms to use. I am attempting to align some "label ...

htmlcsslayout

Expand the initial expansion panel within an Angular Material accordion by opening the first attachment

In Angular Material expansion panels, the expanded input can be used to automatically open a specific panel when the page loads. However, in my dynamic accordion where all panels are optional, I want the first panel to be opened by default. I could manual ...

javascripthtmlangularangular-materialaccordion

What is the process for transferring selections between two select elements in aurelia?

I am attempting to transfer certain choices from select1 to select2 when a button is clicked. Below is my HTML code: <p> <select id="select1" size="10" style="width: 25%" multiple> <option value="purple">Purple</option> &l ...

javascripthtmlaurelia

Is it possible for me to send JSON data using a form to HTTP_RAW_POST_DATA?

Currently, I am in the process of creating a web interface for code that is typically designed to run on Android devices. I transmit JSON data and retrieve the data by using the following method: $json = json_decode($HTTP_RAW_POST_DATA,true); Is there a ...

phphtmljsonpost

Different approach to handling overflow without using the hidden property in CSS

Having trouble with my CSS layout I've created a form within a fixed 500 pixel width div that is centered on the page using margin auto; To create a table-like structure within the div, I used div elements as rows. Due to varying heights of these ro ...

htmlcss

Combining an Image with a CanvasJS Graph and Generating a Downloadable Image of the Composite

I am attempting to combine an image (a background image for my graph) with my canvasJS chart. Once these elements have been merged on a canvas, I aim to obtain a DataURL of this canvas, enabling me to download an image of it (depicting the graph along wit ...

javascriptjqueryhtmlimagecanvas

What's the best way to add line numbers to source code on an HTML webpage after parsing?

I am currently working with AngularJS and MongoDB. In my MongoDB data, there are some text elements that contain a \n, causing each line to be displayed on a new line based on the occurrence of \n. However, I also want to add line numbers to each ...

javascripthtmlcssangularjs

Show a plethora of images using the express framework

I have two closely related questions that I am hoping to ask together. Is there a way for express (such as nodejs express) to handle all requests in the same manner, similar to how http treats requests with code like this: pathname = url.parse(request.url ...

javascripthtmlnode.jshttpexpress

Activate event in jQuery when clicking on a blank area, away from any div element

I need help figuring out how to hide a div when empty space on the margins of the page is clicked, as opposed to just any area outside of the div. I've managed to achieve this functionality when certain other divs are clicked, but I'm stuck on im ...

javascriptjqueryhtmlcssclick

What is the best way to retrieve the file and directory tree structure from git using php?

I am looking to streamline the process of downloading zip files from my public git repository on Bitbucket. Rather than manually creating a download button for each zip file, I want to dynamically generate a PHP page that displays all available zip files a ...

phphtmlgit

The division of columns in the Bootstrap grid is malfunctioning

Recently, I embarked on my journey with Bootstrap and encountered an issue with the Grid Col System. I am aiming to center the logo and navigation bar on the page by dividing the Grid layout into 4 col-lg-4 (md-4). Subsequently, I inserted the image and na ...

htmlcsstwitter-bootstrap

Incorporate a glyphicon into a webpage design that wasn't originally built with bootstrap while maintaining the original layout

Looking to jazz up my vintage website with some cool glyphicons on a specific page. Don't want to mess up the entire look of my site by installing bootstrap. Is there a way to add just the "glyphicons functionality" without changing everything else? ...

csstwitter-bootstrapglyphicons

What is the best way to ensure my content is properly placed across all of my pages?

I could use some assistance, please. I am currently working on my website's structure, but I'm encountering some issues... I have created a file named "page-container.php" and its content is: <!DOCTYPE html> <html> <head> ...

phphtml

Increased pixels being incorporated into my line spacing

Looking for a solution: A <div> containing only one word at a font size of 16px with a line-height set to 1. Encountering issues with extra space above the text in Chrome and Firefox, while the text bleeds slightly out of the bottom. IE exacerbates t ...

css