Arranging two elements side by side using Bootstrap for optimal positioning

I am currently working on a page layout that includes a grid system with columns col-md-8 and col-md-4. My goal is to have two image thumbnails in the col-md-4 section appear side by side on one line, and then move to the next line for the next set of two images. The HTML structure I am using is as follows:

<div class="row">    
  <div class="col-md-8">
      <!-- some text here -->
  </div>   
  <div>  
    <div class="col-md-4">
      <div class="tool">
        <img src="image.jpg" style="width:100px; height:75px;"> 
      </div>
    </div>  
  </div>
</div>

To see an example of what I'm trying to achieve, you can check out this JSFIDDLE link, where I aim to display four small images to the right of a larger image with a 2x2 arrangement.

htmlcsstwitter-bootstrap

Answer №1

Here is the suggested code snippet:

HTML

<div class="row">    

<div class="col-md-8">
    <img src="http://www.extremetech.com/wp-content/uploads/2013/09/4Vln8-640x428.jpg" />
</div>   

<div class="col-md-4">
    <div class="row">

    <div class="col-md-6">
        <img src="http://www.extremetech.com/wp-content/uploads/2013/09/4Vln8-640x428.jpg" style="width: 100px; height: 75px;" />
        </div>

        <div class="col-md-6">
        <img src="http://www.extremetech.com/wp-content/uploads/2013/09/4Vln8-640x428.jpg" style="width: 100px; height: 75px;" />
 </div>
        <div class="col-md-6">
            <img src="http://www.extremetech.com/wp-content/uploads/2013/09/4Vln8-640x428.jpg" style="width: 100px; height: 75px;" />
             </div>

        <div class="col-md-6">
            <img src="http://www.extremetech.com/wp-content/uploads/2013/09/4Vln8-640x428.jpg" style="width: 100px; height: 75px;" /> 
             </div>
    </div>
</div>

Answer №2

Unsure of how you'd like to arrange the two images on each line, here's one approach you can take: create a row for each row of images:

<div class="col-md-4">
    <div class="tool">
        <div class="row">
            <div class="col-md-12">
                <img src="http://www.extremetech.com/wp-content/uploads/2013/09/4Vln8-640x428.jpg" style="width: 100px; height: 75px;">
                <img src="http://www.extremetech.com/wp-content/uploads/2013/09/4Vln8-640x428.jpg" style="width: 100px; height: 75px;">
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <img src="http://www.extremetech.com/wp-content/uploads/2013/09/4Vln8-640x428.jpg" style="width: 100px; height: 75px;">
                <img src="http://www.extremetech.com/wp-content/uploads/2013/09/4Vln8-640x428.jpg" style="width: 100px; height: 75px;">
            </div>
        </div>
    </div>
</div>

To enhance this further, you can place each image in a specifically sized div, such as putting each image in a col-md-6 div instead of both in a col-md-12. However, this depends on your specific requirements.

Additionally, remember that images in bootstrap 3 are not responsive by default. Don't forget to add the img-responsive class to all your images so they can be resized properly.

Answer №3

It appears that in your specific case, there were some missing closing divs and the jsfiddle window was too narrow to respond to col-md-4.

To address this issue, I have added the necessary closing divs and changed the col-md-4 to col-xs-4. You can view the corrected fiddle by clicking on this link: http://jsfiddle.net/1ezk5oev/

<div class="row">    
    <div class="col-xs-4">
        <img src="http://www.extremetech.com/wp-content/uploads/2013/09/4Vln8-640x428.jpg" width="200"/>
    </div>    
    <div class="col-xs-4">
        <div class="tool">
            <img src="http://www.extremetech.com/wp-content/uploads/2013/09/4Vln8-640x428.jpg" style="width: 100px; height: 75px;"/>
                <img src="http://www.extremetech.com/wp-content/uploads/2013/09/4Vln8-640x428.jpg" style="width: 100px; height: 75px;"/>
                <img src="http://www.extremetech.com/wp-content/uploads/2013/09/4Vln8-640x428.jpg" style="width: 100px; height: 75px;"/>
                <img src="http://www.extremetech.com/wp-content/uploads/2013/09/4Vln8-640x428.jpg" style="width: 100px; height: 75px;"/>    
        </div>
    </div>
</div>

Answer №4

If you're facing an issue, the code below will help you solve it. Also, don't forget to update your styling with class='img-responsive' if you wish for your images to adjust their size accordingly.

<div class="row">    
<div class="col-md-8">
    <img src="http://www.extremetech.com/wp-content/uploads/2013/09/4Vln8-640x428.jpg"/>
</div>   
<div>  
<div class="col-md-4">
    <div class="tool">
        <div class="row">
            <div class="col-md-6">
                 <img src="http://www.extremetech.com/wp-content/uploads/2013/09/4Vln8-640x428.jpg" class="img-responsive"/>
            </div>
            <div class="col-md-6">
                <img src="http://www.extremetech.com/wp-content/uploads/2013/09/4Vln8-640x428.jpg" class="img-responsive"/>
             </div>
        </div>
        <div class="row">
            <div class="col-md-6">
                <img src="http://www.extremetech.com/wp-content/uploads/2013/09/4Vln8-640x428.jpg" class="img-responsive"/>
            </div>
            <div class="col-md-6">
                <img src="http://www.extremetech.com/wp-content/uploads/2013/09/4Vln8-640x428.jpg" class="img-responsive"/>
            </div>
        </div>
     </div>
  </div>
</div>

Answer №5

In my experience, using tables for this type of layout is the most effective approach. If you agree, feel free to utilize this example:

<table>
<tr>
    <td rowspan="2">
        <div class="col-md-8">
            <img src="http://www.extremetech.com/wp-content/uploads/2013/09/4Vln8-640x428.jpg"/>
        </div>
    </td>
    <td>
        <div class="col-md-4">
            <div class="tool">
                <img src="http://www.extremetech.com/wp-content/uploads/2013/09/4Vln8-640x428.jpg" style="width: 100px; height: 75px;"/>
            </div>
        </div>
    </td>
    <td>
        <div class="col-md-4">
            <div class="tool">
                <img src="http://www.extremetech.com/wp-content/uploads/2013/09/4Vln8-640x428.jpg" style="width: 100px; height: 75px;"/>
            </div>
        </div>
    </td>
</tr>
<tr>
    <td>
        <div class="col-md-4">
            <div class="tool">
                <img src="http://www.extremetech.com/wp-content/uploads/2013/09/4Vln8-640x428.jpg" style="width: 100px; height: 75px;"/>
            </div>
        </div>
    </td>
    <td>
        <div class="col-md-4">
            <div class="tool">
                <img src="http://www.extremetech.com/wp-content/uploads/2013/09/4Vln8-640x428.jpg" style="width: 100px; height: 75px;"/>
            </div>
        </div>
    </td>                    
</tr>

For more information and code access, visit: http://jsfiddle.net/9se6Lep0/

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

What steps can I take to stop my browser from displaying the "waiting for MyHostName" message while performing an ajax Post/Get operation?

Whenever I access a website using Chrome, a message appears in the status bar saying "Waiting for MyHost name" along with an Ajax Loader circle in the browser tab. Here is a javascript function that I am working with: function listen_backend_client_reques ...

javascripthtmlajaxbrowsergoogle-chrome

How to implement HTML5 Application Cache in an ASP.NET MVC4 project to enable offline functionality for a web application?

Exploring the concept of app caching in HTML5 with static content and file extensions such as index.html, theme.css, and app.js. When it comes to using MVC4 for a web app, how can we cache dynamic data obtained from an API and stored in localStorage? I a ...

javascriptasp.net-mvchtmlweb-applicationsapplication-cache

The React Component fails to function properly when placed within a form element

I am currently working on a project in React where I need to create an interactive form. However, I am facing some challenges when it comes to using components within the form tag. It seems that both the component and the button are not executing function ...

htmlformsreactjscomponents

Customize your Google Translate experience by choosing your own option values

Is there a way to trigger the same JavaScript calls by clicking on an option value in an HTML select element as with text-based links in the Google Translate widget? Check out this jsfiddle for more information <html> <body> <select i ...

javascriptjqueryhtmlcss

What is the process for adjusting the color of a particular date in the <input type=Date> field?

Is there a way to modify the styling, such as color, of the input type date in HTML 5? In HTML 5, we can display a calendar using <input type=date>. For example, if March 23rd is a holiday and I want to highlight this specific date in red, how can I ...

jquerycsshtmldatecalendar

Adsense displays empty ad banners regardless of their predetermined size

Having trouble with Adsense banners? I have a page with three fixed-size banners (336 x 280) and sometimes they appear blank. It's random - one might work while the others don't, or none may work at all. The code is the same for each banner: < ...

javascripthtmlcssadsadsense

Creating dynamic web content using PHP and JavaScript

I stumbled upon a tutorial on the PHP.net website within the "PHP and HTML" manual which includes an example titled Generating JavaScript with PHP. Currently, I am experimenting with a basic demo of this concept on my own to grasp the process before attem ...

phpjavascripthtmljson

The scrollbar track has a habit of popping up unexpectedly

Is there a way to prevent the white area from showing up in my divs where the scroll bar thumb appears? The issue seems to occur randomly on Chrome and Safari. https://i.sstatic.net/jFzTf.png This is the div in question .column-content{ height:60vh; ...

htmlcssangularscrollscrollbar

Using the CSS overflow scroll property with Bootstrap

I am attempting to resize Section A in Column 1 to match the height of the row. 1 row, 2 columns: +---------------------+---------------------+ | Column 1 | Column 2 | | | | | +--------------- ...

cssbootstrap-4

Sending items from a dynamically created list to a different webpage

In my JavaScript file, I have an appended list that looks like this: $("#ultag").append($("<li onclick=\"next(this.id);\" id=\"litag\"><div id=\"litagdiv\"><div id=\"imgdiv\"><img id=\"list ...

javascriptjqueryhtmlcsstizen-web-app

What is the best way to conceal the broken image icon using PHP?

UPLOAD PICTURES IN DATABASE: if (!isset($_FILES['gambarid']['tmp_name'])) { echo ""; }else{ $rand5=rand(); $image_name5= addslashes($_FILES['gambarid']['name']); $fileext5=explode('.&ap ...

phphtmlimageicons

Changing the background color of radio buttons using Chrome and the power of WebGL<script>canvas</script>

When using the Three.js WebGL renderer, I noticed that radio buttons have white backgrounds, but this issue only seems to occur in Chrome. If you want to see the problem for yourself, check out this fiddle: http://jsfiddle.net/5pL8v/328/ Does anyone know ...

javascriptcssradio-buttonwebglthree.js

Maintaining image ratio on the entire screen

I am in search of a way to create a webpage that includes the following elements from top to bottom: Full-screen width image/background-image (maintaining aspect ratio) Navigation bar (aligned at the top right of the image) Some text Another full-screen ...

htmlcss

Percentage-based vertical scroll bar

Is there a way to add a vertical scroll bar using percentages for height and width instead of pixels? Check out this link to see an example on my website: http://codepen.io/anon/pen/FLlvG. I would like the scrollbar to be in the leftcontent section. ...

htmlcss

Using jQuery to create interactive forms with events triggered by dynamic input fields

Currently, I am in the process of developing a dynamic form using jQuery to generate questions one at a time. However, there appears to be an issue with an event related to the dynamic content. div class="container"> <h1>Add or Remove te ...

jqueryhtmlforms

Is there a way to control the text animation loop on iTyped, both starting and stopping it?

Currently utilizing React, MUI, along with iTyped The animation implemented involves backspacing text and typing the next word in a specified array until reaching the final word. I am looking to enable a click function on the div containing this animation ...

javascripthtmlcssreactjsanimation

How can I access the .ts variable value within an *ngIf statement in HTML?

My goal is to showcase images every 2 seconds, but currently I am only able to display all of them at once. Below is the HTML line I am using: <img id="bh" routerLink="/" *ngIf="bh?.id == count" [src]="bh?.src" height="42" width="42"/> Here is t ...

htmlangularvar

Need help resolving an issue with an HTML header that's overlapping in JavaScript?

Hey there! I was working on implementing a dynamic header that resizes as you scroll on the page. I also decided to try out Headroom as an additional solution, and it seems to be functioning well in terms of hiding the header. You can check out my progress ...

javascripthtmlcss

Adjust Node visibility as User scrolls to it using CSS

Suppose I have a structure like this: <br><br><br>...Numerous BRs...<br><br><br> <div id="thetarget"></div><div id="show"></div> <br><br><br>...Numerous BRs...<br><br&g ...

javascripthtmlcss

Contrast between using .trigger('play') and invoking .play() with jQuery

Can someone explain the difference between the jQuery functions ".trigger('play')" and ".play()"? I am trying to make my website play a sound when a navigation button is pressed, using an HTML5 audio tag. I have some jQuery code that works: $(& ...

jqueryhtml