Can someone guide me on replicating this design with Bootstrap?

How do I achieve this layout using Bootstrap? https://i.sstatic.net/Ffvog.jpg

I have checked my code but can't seem to find the mistake. Can someone please help me out?

<div class="row">
     <div class="img-5">
         <div class="col-md-4">
             <div class="hn-img-1">
                 <img src="img/1.jpg" alt="">
             </div>
         </div>
         <div class="col-md-4">
             <div class="hn-img-1">
                <img src="img/2.jpg" alt="">
             </div>
         </div>
         <div class="col-md-4">
             <div class="hn-img-1">
                 <img src="img/3.jpg" alt="">
             </div>
         </div>
         <div class="col-md-4">
             <div class="hn-img-1">
                 img src="img/5.jpg" alt="">
              </div>
          </div>
          <div class="col-md-4">
             <div class="hn-img-1">
                 <img src="img/4.jpg" alt="" class="mt-top">
             </div>
          </div>
     </div>
 </div>

Here is the result of my code:

https://i.sstatic.net/5WLmO.gif

htmlcsstwitter-bootstrap

Answer №1

By utilizing nested rows, you can create a customized structure to meet your requirements. The following code snippet serves as an example that can guide you towards achieving the desired design.

<div class="row">
    <div class="col-md-4">
        <div class="row">
            <div class="col-md-12">
                <div class="well">2</div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div class="well">4</div>
            </div>

        </div>
    </div>
    <div class="col-md-4">
        <div class="well">1
            <br/>
            <br/>
            <br/>
            <br/>
            <br/>
        </div>
    </div>
    <div class="col-md-4">
        <div class="row">
            <div class="col-md-12">
                <div class="well">2</div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div class="well">4</div>
            </div>

        </div>
    </div>
</div>

Visit JSFIDDLE for more information.

Answer №2

Bootstrap comes with a 12 column grid system, so it's important to divide your grids in a way that adds up to 12.

The Error: Using 5 col-md-4 divs with 4 grids each results in a total sum of 20 instead of the required 12. While sometimes having a sum greater than 12 might work (when using col-sm-*), it's recommended to stick to the 12 grid system.

To correct this issue:

  1. Instead of using 5 col-md-4 divs, opt for just 3 to achieve a total sum of 12 grids.
  2. Distribute 2 images in the first div (Left), 1 image in the second div (Central), and the remaining 2 images in the third div (Right).

Following these steps should resolve the problem. You can view a demonstration on JSFiddle here. Just ensure that the output window on JSFiddle is at maximum width to properly visualize the results, as the md class adjusts column widths for medium devices (992px and above).

I hope this information proves helpful. Feel free to reach out if you encounter any issues.

Answer №3

When structuring your layout, it's important to remember that under the ROW element, you should only include what you want to appear in the grid. This can be achieved by using classes such as col-sm-* or col-md-*. Additionally, if you need to create empty space before a particular div within the grid, you can utilize classes like .col-md-offset-*.

Answer №4

When using Bootstrap, the screen is divided into a grid of 12 columns. For this specific layout, you should utilize only 3 columns with the classes "md-4" to create one row. Place two images in the first column, the large image in the middle column, and the remaining two images in the last column.

Answer №5

Gain a better understanding of grids by viewing this helpful image. Utilize the grid layout to organize your page according to your preferences. https://i.sstatic.net/X8kdm.jpg

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

How to Implement Button Disable Feature in jQuery When No Checkboxes Are Selected

I need help troubleshooting an issue with a disabled button when selecting checkboxes. The multicheck functionality works fine, but if I select all items and then deselect one of them, the button disables again. Can someone assist me with this problem? Be ...

javascriptjqueryhtml

Tips on avoiding scrolling when toggling the mobile navigation bar:

While working on a website using HTML, CSS, and BS3, I have created a basic mobile navigation. However, I am facing an issue where I want to disable scrolling of the body when toggling the hamburger button. The problem arises when the menu is toggled on, ...

javascriptjqueryhtmlcssmobile

What could be causing my grid to malfunction once the media query is triggered?

I am in the process of creating a straightforward navigation bar. My goal is to have the <nav> content, which includes the navigation links, positioned inside the header along with the logo (a random image from unsplash.it). To achieve this layout, I ...

htmlcssmedia-queriescss-grid

Slide the first div upward to display the text in the second div when hovering over the first div

I'm facing an issue where a div needs to move upwards when hovering over it. To see an example, take a look at this JSfiddle. The desired outcome is as follows: As illustrated, the right div is the one being hovered. I have attempted to create this ...

htmlcss

Preventing HTML form submission after displaying an alert in Vanilla JavaScript

I have created a quiz using HTML with validation. The next step is to score the quiz in JavaScript. The scoring system works fine, but I want to prevent the form from posting to result.html if the user scores 0 on the quiz. I've managed to display an ...

javascripthtmlformsvalidation

Having trouble centering an icon in a cell within AG Grid?

I am struggling with aligning my checkmarks within the cells of my AG Grid. Currently, they are all left aligned but I need them to be centered. Adjusting the alignment for text is not an issue, but I can't seem to center the material icons. It appear ...

cssangularag-grid

Designing an interactive HTML table that adapts to various screen

Currently utilizing Bootstrap to create a responsive HTML table on smaller devices like the iPad, but seeking a more polished and professional alternative. Searching for a JQuery/JavaScript or CSS solution without relying on plugins. Would appreciate any ...

javascriptjqueryhtmlcss

Issues with aligning div elements centrally

I have a dilemma with aligning two divs on my webpage. I am trying to position the second div in such a way that it is centered between the first div and the end of the page, like this: | | | | | | | | | | | | | | div1 | ...

htmlcss

I have configured my CSS styles in the module.css file of my Next.js application, but unfortunately, they are not being applied

I recently developed a nextjs with electron template application: Here is the link to my code on CodeSandbox: https://codesandbox.io/s/sx6qfm In my code, I have defined CSS classes in VscodeLayout.module.css: .container { width: '100%'; he ...

cssreactjsnext.js

Python Selenium is having trouble finding the elements

I've been struggling for hours to extract the specific text from a variety of elements on a website. I attached 2 images in hopes that they will help in identifying these elements by their similarities, such as having the same class name. The black un ...

pythonhtmlseleniumselenium-chromedriver

Phonegap enables iOS keyboard to dynamically adjust screen size during use

Currently, I am developing an iOS app using phonegap 3.0 and have encountered a particular issue. In my app, there is a window where users are required to enter a promo code. The problem arises when I click on the input area (see this example) and then pr ...

javascriptioscsscordovakeyboard

The field 'post_id' cannot be identified. Available options include: comment, id, name, post_list

An error occurred while trying to process the request for post number 1. This error is related to a field resolution issue with the keyword 'post_id'. Available fields include: comment, id, name, post_list. The method used was GET and the URL req ...

htmldjango

Conquering Bootstrap 3's Image Gallery Customizations

I am currently working with Bootstrap 3 RC1 and struggling to set up the image gallery properly. Issue 1 - The ul is adding unnecessary padding-left or margin-left. What do I need to do to eliminate this? Issue 2 - Each li is extending across the contain ...

htmltwitter-bootstrap-3

Align the child element to the baseline and have it aligned to the right within an `<li>` list item

I am interested in aligning the price of coffee to the right end of the coffee name. For example, the price 1.80 should be in line with Americano and 10.00 should be in line with Macchiato. https://i.sstatic.net/unm26.jpg ul { list-style: none; pad ...

htmlcssposition

The min-height property does not seem to be compatible with -webkit-calc

I've been experimenting with this code: .main{ min-height: -moz-calc(100% -50px); min-height: -webkit-calc(100% -50px); min-height: calc(100% -50px); background-color:#000; color:white; } html{ height:100%; } <html ...

htmlcss

Custom Component in React Bootstrap with Overflowing Column

I am working on a custom toggle dropdown feature in my React application: import React from 'react'; import 'react-datepicker/dist/react-datepicker.css'; const DateRange = props => ( <div className="dropdown artesianDropdo ...

javascripthtmlcsstwitter-bootstrapreactjs

Discover the key steps to extracting codes within a string in React or Javascript

I am currently developing an application that could potentially receive a string from the backend server. The string might look something like this: If you were to fold a piece of paper in half 50 times, its width would be three-quarters of the distance fr ...

javascripthtmlreactjs

Importing pixi-sound in the right way for PIXI JS

I have a question regarding the proper way to import pixi-sound into my project. I am facing an issue with the following code snippet: import * as PIXI from "pixi.js"; import PIXI_SOUND from "pixi-sound"; const EFFECT_SOUNDS = [...list of music] for (le ...

javascripthtmlimportpixi.js

Utilizing Selenium automation to navigate a website that features a custom jQuery plugin-checkbox functionality

Utilizing Selenium WebDriver along with JavaScript to automate the testing of a website that features a custom jquery plugin named "jcf" (JavaScript Custom Forms) for aesthetically pleasing forms. You can find more information about this plugin here. I am ...

javascriptjqueryhtmlseleniumcheckbox

Tips for eliminating additional white space within a bootstrap row

I'm having trouble removing the extra space on my website while using Bootstrap 5. I've tried various Bootstrap classes like pr-0, mr-0, p-auto, m-auto but none of them seem to work. I also attempted using CSS margin-right: 0; but that didn' ...

javascriptphpcssbootstrap-5