What is the best way to arrange three images within a Bootstrap card so that they are all next to each other in a row?

Is there a way to align 3 images side by side within a single bootstrap card? I've managed to align the first 2 images, but the third one keeps appearing below the first two. I've been attempting to get the third image to fit next to the first two images all day.

        <div class="well text-center">
            <div class="col-md-12">Club Hierarchy:</div>
            <div class="row">
                <div class="col-md-6">
                    <a href="#"><img src=".\Pictures\BM.jpg" alt="css_logo"  class="img-fluid"></a>
                    <div class="card-body">
                        <h5 class="card-title">Rod Little</h5>
                        <p class="card-text"> freddrf34 trrfefwerrf frewferfrf erf ref </p>

                    </div>
                </div>
                <div class="col-md-6">
                    <a href="#"><img src=".\Pictures\TM.jpg" alt="ccs_logo"  class="img-fluid"></a>
                    <div class="card-body">
                        <h5 class="card-title">Rod Little</h5>
                        <p class="card-text"> freddrf34 trrfefwerrf frewferfrf erf ref </p>
                    </div>

                    <div class="col-md-6">
                    <a href="#"><img src=".\Pictures\TM.jpg" alt="ccs_logo"   class="img-fluid"></a>
                    <div class="card-body">
                    <h5 class="card-title">Rod Little</h5>
                    <p class="card-text"> freddrf34 trrfefwerrf frewferfrf erf ref </p>


                    </div>
                </div>
            </div>
        </div>
htmlcssbootstrap-4

Answer №1

When working with 3 images on a 12 column grid, using col-md-6 will display two images side by side and the third one below. To correct this, you should use col-md-4 instead, as it aligns better with a 4x3 grid.

Here's an example:


<div class="well text-center">
    <div class="col-md-12">Club Hierarchy:</div>
    <div class="row">
        <div class="col-md-4">
            <a href="#"><img src=".\Pictures\BM.jpg" alt="css_logo" class="img-fluid"></a>
                <div class="card-body">
                    <h5 class="card-title">Rod Little</h5>
                    <p class="card-text"> freddrf34 trrfefwerrf frewferfrf erf ref </p>
                </div>
        </div>
        
        <div class="col-md-4">
            <a href="#"><img src=".\Pictures\TM.jpg" alt="ccs_logo" class="img-fluid"></a>
                <div class="card-body">
                    <h5 class="card-title">Rod Little</h5>
                    <p class="card-text"> freddrf34 trrfefwerrf frewferfrf erf ref </p>
                </div>
        </div>

        <div class="col-md-4">
            <a href="#"><img src=".\Pictures\TM.jpg" alt="ccs_logo" class="img-fluid"></a>
                <div class="card-body">
                    <h5 class="card-title">Rod Little</h5>
                    <p class="card-text"> freddrf34 trrfefwerrf frewferfrf erf ref </p>
                </div>
        </div>

    </div>
</div>

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 is the best way to link and store invoice formset with the main form foreign key in Django?

I am new to Django and need help. I am trying to save my invoice in a database, but the issue I'm facing is that I can't retrieve the foreign key from the main form when I try to save the formset. View.py def createInvoice(request):` if requ ...

javascriptpythonhtmldjango

Discovering Unnecessary CSS & JS Code

Currently, I am tackling a freelance project focused on upgrading a website. The client is requesting specific features from their old site be replicated on the new one. However, the challenge lies in the fact that the old site's CSS and JS are consol ...

javascriptcssoptimization

Getting rid of the scrollbar in Internet Explorer

Instead of just removing the scrollbar, I want to ensure that scrolling capabilities remain intact. This is important because I want to create a 'slide show' effect on the website where users can click 'next' and scroll through content ...

javascripthtmlcssinternet-explorerscrollbar

What is the best way to display a new line when printing a string as <pre> in HTML without using ` `

I receive a text file from the PHP server that has the following content: "File version: 5\n\nstart: 1410355285955(2014/09/10 11:58:05.955)\nend: 141090402750(2014/09/10 12:00:02.750)\nUEID: 301660031\nCNC: 1181 ...

javascriptphphtmlangularjs

Transitioning the color of links in Firefox causes flickering when switching between the hover and visited state

I have been working on testing this code snippet in Firefox 49.0 on Linux Mint: a{ font-size:50px; color:gray; font-weight:1000; transition:color 1s; } a:hover{ color:black; } a:visited{ color:lightgray; } <a href="">VISITED LINK</a>&l ...

cssfirefox

Django: Occasionally, text entered into a text field may not be successfully submitted after a post request

Encountering a strange bug that is difficult to replicate consistently. In my HTML file, I use jQuery to populate a text field with Summernote. However, when I populate the text field, do not make any changes, and submit the form, the outcome is inconsiste ...

jquerypythondjangohtmlsummernote

Updating Bootstrap Indicators with jQuery on Click Event

Unfortunately, I am unable to share an image due to limited internet data. My goal is to switch each image to its sprite equivalent. There are three list items that I'm struggling to change because they each have two classes that need to be updated. ...

javascriptjqueryhtmlcsstwitter-bootstrap

Add drop caps to every individual word within a hyperlink

Is there a way to recreate the menu effect similar to using CSS fonts and drop caps for each word? I'm aware of the CSS code: p.introduction:first-letter { font-size : 300%; } that enlarges the first character of the first word, but I want this ef ...

javascripthtmlcsscapitalization

What methods does Coinbase use to achieve this effect? Is it possible to recreate it in a React application? (Dropdown menu positioned relative to a button on hover or click

Notice the hover effect on the Businesses section, where a prepositioned dropdown menu appears, spanning the full width of the screen. How was this effect achieved and can it be recreated in React if it wasn't originally coded using React? https://i. ...

htmlcssreactjsdrop-down-menumaterial-ui

Email in HTML format: content rendering poorly in Outlook

Below is the code I am using to display text with an image. <table width="220" align="right" style=""> <tr> <td> <table align="left" width="100" style="padding: 0; Margin: 0; Margin-top:15px;"> <tr& ...

htmlcssoutlookhtml-table

unable to display images from a folder using v-for in Vue.js

Just getting started with Vuejs and I have two pictures stored on my website. The v-for loop is correctly populating the information inside databaseListItem. The path is /opt/lampp/htdocs/products_db/stored_images/cms.png https://i.stack.imgur.com/969U7.p ...

javascripthtmlvue.js

section containing image on the left side and title and text on the right side

In order to replicate the layout shown in the image, I need to create a div. The left side should contain an image, while the right side should have a title and description below it. It's important to consider that the left side should take up roughly ...

htmlimagetextbootstrap-4

Tips for setting a uniform width for all bars in apexcharts bar column width

When working with dynamic data, the length of the data should also be variable. For instance, if the data has a length of 24, the column width should be 35px; similarly, even if the data has a length of 2, the column width should still be 35px. Apexchart ...

javascripthtmlcssapexcharts

Creating SEO-friendly URLs for a website that utilizes Ajax technology has been a challenge for me

I am facing a challenge where I need to create URL-friendly links in a completely ajax-based website. What I am currently doing is having an index.php file with only a div of id #content-container. Additionally, I have separate include files such as Home.p ...

javascriptphphtmljqueryajax

`Weaving mesh into place with three.js`

I'm struggling to grasp how to position my cubes on the canvas. I can't quite figure out how positioning actually works. I'm trying to find a way to determine if my mesh reaches the limits of the canvas. But what exactly is the unit of posit ...

javascripthtmlcanvasthree.js

Having trouble with implementing jQuery fadeIn for thumbnail images inside a div?

I'm trying to create a functionality where clicking on a thumbnail image in a div will display the full-size version of that image in another div. I want to implement this using the jQuery fadeIn function, but my code isn't working and I am not v ...

jquerycssimagehtmlfadein

Out of reach: Menu div slides up on click outside

<a class="btn">Click ME </a> <div class="content"> Content </div> $('.btn').click(function(){ $('.content').slideToggle(); }); Check out the example here Everything is working properly, but I have a q ...

jqueryhtmlslideup

How can I stack images on top of each other using Div, CSS, and ZIndex?

Currently, I am facing a challenge with overlapping 5 pictures. Despite reading numerous tutorials on CSS and div overlapping techniques, I still don't quite understand how to achieve it. The container where I want these images to overlap has a widt ...

css

Utilizing a dropdown list in HTML to dynamically change images

On my HTML page, I have implemented a dropdown list box. My objective is to change an image and update a label based on the selection made from the dropdown list box. I already have an array called 'temp' which represents the number of items. The ...

javascripthtml

I am interested in displaying or hiding a table depending on a specific condition in MVC 4

Looking at this MVC 4 Razor code snippet: <h4>You have @Model.Count() items up for sale currently. @Html.ActionLink("Add a new listing by clicking here", "Create")</h4> <br /> <table style="visibility: hidden"> .... I am seeking ...

asp.net-mvchtmlasp.net-mvc-4