I am struggling to add a column in HTML for this specific layout. Can someone please provide me with guidance on how to proceed?

This is the code I have:

<div class="container">
  <div class="row">
    <div class="col-md-4">
      <img src="https://s21466.pcdn.co/wp-content/uploads/2018/02/Logo-FIVB-Liga-nacija-1.jpg" width="500" height="640">
    </div>
    <div class="col-md-3">
      <img src="https://i.ytimg.com/vi/hDUG_ZCg5N8/maxresdefault.jpg" width="320" height="213">
      <img src="https://www.4baht.com/wp-content/uploads/2019/05/turkey-women-team-preview-volley.jpg" width="320" height="213">
      <img src="https://www.4baht.com/wp-content/uploads/2019/05/germany-women-team-preview-volle.jpg" width="320" height="213">
    </div>
    <div class="col-md-3">
      <img src="https://cdn8.volleyball.it/wp-content/uploads/2018/10/VNL-Femminile-2019.jpeg" width="320" height="426">
      <img src="https://seekvectorlogo.net/wp-content/uploads/2019/04/federation-internationale-de-volleyball-fivb-vector-logo.png" width="320" height="213">

This layout is what I want to achieve:

https://i.sstatic.net/cPfrhm.png

Currently, this is what I have:

https://i.sstatic.net/0zCWfm.jpg

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

How can I make it work?

htmlcssbootstrap-4

Answer №1

To structure the layout, I recommend using a Grid layout approach. You can utilize grid-template to define the areas available and then designate specific areas to elements with grid-area.

main {
  display: grid;
  grid-template: 
     "c1 c1 c2 c5"
     "c1 c1 c3 c5"
     "c1 c1 c4 c6"
}

section {
  border: 1px #446 solid;
  margin: 2px;
  min-height: 100px;
}

.c1 { grid-area: c1; }
.c2 { grid-area: c2; }
.c3 { grid-area: c3; }
.c4 { grid-area: c4; }
.c5 { grid-area: c5; }
.c6 { grid-area: c6; }
<main>
  <section class="c1">1</section>
  <section class="c2">2</section>
  <section class="c3">3</section>
  <section class="c4">4</section>
  <section class="c5">5</section>
  <section class="c6">6</section>
</main>

Answer №2

Your column structure needs adjustment. Follow this code snippet to rectify it

 <div class="container">
        <div class="row">
            <div class="col-md-6">
                <img src="https://s21466.pcdn.co/wp-content/uploads/2018/02/Logo-FIVB-Liga-nacija-1.jpg" width="500" height="640">
            </div>
            <div class="col-md-3">
                <img src="https://i.ytimg.com/vi/hDUG_ZCg5N8/maxresdefault.jpg" width="320" height="213">
                <img src="https://www.4baht.com/wp-content/uploads/2019/05/turkey-women-team-preview-volley.jpg" width="320" height="213">
                <img src="https://www.4baht.com/wp-content/uploads/2019/05/germany-women-team-preview-volle.jpg" width="320" height="213">
            </div>
            <div class="col-md-3">
                <img src="https://cdn8.volleyball.it/wp-content/uploads/2018/10/VNL-Femminile-2019.jpeg" width="320" height="426">
                <img src="https://seekvectorlogo.net/wp-content/uploads/2019/04/federation-internationale-de-volleyball-fivb-vector-logo.png" width="320" height="213">
            </div>
        </div>
    </div>

Answer №3

Make sure to verify that bootstrap is correctly connected in your document.

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

Having trouble retrieving the contents of a <div> tag within a JavaScript function

Javascript Code In First ContentPlaceHolder :- <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server"> <script type="text/javascript" > function PrintElem(elem) { alert(elem); Popup($(elem).html()); } ...

c#javascriptjqueryasp.nethtml

What is the best way to customize the appearance of radio buttons to have distinct backgrounds when selected and unselected?

One of the features on my website is the ability to choose from various colors, and I would like for the selected color to be highlighted. Shown below is an image depicting the current state: I would like to transform it to look like this: Thank you in ...

htmltwitter-bootstrapcssradio-buttonbootstrap-4

CSS - Struggles with Keeping Div Positioned to the Right of Another

I'm facing a simple layout issue here - trying to align two divs next to each other. Image on the left, text on the right. However, when the text is too long, it pushes the div down instead of wrapping around. I want the cs-summary div to automaticall ...

csscss-float

Applying personalized CSS to an element based on the condition of a child element in the previous sibling element

I am trying to apply styles to a span element only when a child element in a preceding sibling div element is active, which means a radio button has been checked. I am unable to modify the code and can only use CSS for this task. Any ideas on how to achi ...

css

Troubleshooting Problems with display:table and display:table-cell Alignment in Internet Explorer Versions 7 and 9

I have been struggling with the layout of a website that contains multiple columns. After extensive work, I believed I had everything properly aligned. Adobe BrowserLab seemed to confirm this, aside from various issues in IE6 and IE7 which I decided to ove ...

htmlcssinternet-explorercss-tables

Using the background-size cover property in Firefox

While working on a website, I encountered an issue where the background image did not display correctly across different browsers. Specifically, when using the background-size: cover property in Chrome and Safari, the image filled up the entire screen as i ...

cssfirefoxbackground-image

Buttons and JavaScript: A Comprehensive Compilation

I'm facing an issue with my HTML buttons and JavaScript. When a button is clicked, an AJAX call should be triggered to display data. However, JavaScript seems unable to detect the button. Below is the HTML code: <ul> <li><input ...

javascripthtmlajax

Determining if a Website is Responsive with PHP

One way to determine if a website is responsive or not is by analyzing its HTML code. A previous inquiry on this topic can be found here: . This method only focuses on checking for the <meta name="viewport" content="width=device-width"> tag. It&apos ...

phphtmlcssresponsive-design

Is there a way to align certain buttons to the left and others to the right within a DIV?

One of the strategies I experimented with was: <div class="block-footer"> <div> <button class="align-left">xx</button> <button class="align-right">yy</button> </div> </div> I'm ...

htmlcss

Issue with remote function and validation in dropdownlistfor within a pop-up modal is not functioning as expected

Things were running smoothly until I implemented a pop-up modal for create/edit operations. After updating the code to include the modal, the remote function stopped firing and the validation for dropdownlistfor was not working correctly. Here is the code ...

asp.netasp.net-mvcasp.net-corebootstrap-4modal-dialog

How can jQuery be used to dynamically update a checkbox value based on a radio field selection?

The objective is to update the checkbox fields to TRUE or FALSE based on the radio button selection. If FALSE is selected, the checkboxes should be unchecked. I am only successful in checking the checkboxes when TRUE is selected. Could this be because I h ...

javascriptjqueryhtmlcheckbox

Incorporating background-image in PHP code

After fetching an image from the database using PHP, I aim to display this image as a background in HTML. I attempted to do so with the following code, however it was not successful: <div class="fill" style="background-image:url('<?php echo "& ...

phphtmlcssimage

When a user clicks on the product id field, I would like to add my data underneath the table and then conduct a search

When adding data to a table, I noticed that it is being added at the top instead of below the table, I implemented a search feature where the user can enter a product id, but I cannot seem to locate the error in my code, Is there a way to add a search fiel ...

javascriptjqueryhtmlcss

Creating a HTML5 Geolocation object using Python: A step-by-step guide

For my software analytics testing, I am looking to send GET requests with a geolocation object that includes variable timestamps and locations. The website utilizes the HTML5 navigator.getcurrent.location() function. While I can use the random module to r ...

javascriptpythonhtmlgeolocation

I aim to create a tool that randomly selects numbers, although the outcome often exceeds initial expectations

My page is filled with various items, and among them, I have a random number generator. When I tested it, the result turned out to be higher than expected. Can anyone help me figure out why? Here's the code snippet: <div> <h2>G ...

javascripthtmlmath

Executing a C# function from an HTML hyperlink

I am in the process of developing a website using ASP.NET C#. The site will feature a GridView with data that can be exported, such as to Excel or other formats. To handle the export functionality, I plan to utilize code from this resource. When a user c ...

c#javascripthtmlasp.net

Troubleshooting the issues with implementing cross-browser jscrollpane functionality

Hey there! I've been exploring this tool to customize the default scroll-bar, and here's a fiddle showcasing my experimentation. In the fiddle, I've included the following code snippet <div class="scroll-pane horizontal-only">(located ...

javascriptjqueryhtmlcss

Clear SELECT After Submission

I have a jQuery script and need a function to reset the SELECT input after it has been submitted. <script> $(document).ready(function() { //elements var progressbox = $("#progressbox"); var progressbar = $("#progressbar"); var statustxt = ...

javascriptjqueryhtml

Craft a stunning transparent border effect using CSS

I am trying to achieve a unique border effect for an element using CSS, where the transparency is maintained against the background: This is the desired outcome: https://i.stack.imgur.com/6Z1MU.png However, the border I am currently able to create looks ...

htmlcssborder

Text alignment validation in jQuery

utilizing the validation capabilities of the jQuery validation plugin check out: http://jsfiddle.net/Kn3v5/205/ <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.js"></script> <div> <form id ...

jquerycssvalidation