Images are not being properly aligned in a single row when using Bootstrap

I'm struggling to figure out how to display multiple images in a single row instead of one-by-one.

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

Below is the code I've been working with:

# CSS:
.emblems-section {
    z-index: 1;
    text-align: center;
}

<header>
    <div class="container">
        <div class="row">
            <div class="col-md-12 emblems-section justify-content-center align-items-center">
                <div class="col-lg-4 col-md-4 col-xs-4">
                    <img src="img/leagueEmblem.png" class="img-fluid" alt="Statistics for League of Legends">
                </div>
                <div class="col-lg-4 col-md-4 col-xs-4">
                    <img src="img/overwatchEmblem.png" class="img-fluid" alt="Statistics for Overwatch">
                </div>
                <div class="col-lg-4 col-md-4 col-xs-4">
                    <img src="img/dotaEmblem.png" class="img-fluid" alt="Statistics for Dota2">
                </div>
            </div>
        </div>
    </div>
</header>
htmlcssbootstrap-5

Answer №1

If you're searching for a similar fix, the solution is using d-flex inside the main div container.

Answer №2

<div class="container">
    <div class="row">
        <div class="col-md-12 emblems-section justify-content-center align-items-center">
            <div class="row">
                <div class="col-lg-4 col-md-4 col-xs-4">
                    <img src="img/leagueEmblem.png" class="img-fluid" alt="Statistics for League of Legends">
                </div>
                <div class="col-lg-4 col-md-4 col-xs-4">
                    <img src="img/overwatchEmblem.png" class="img-fluid" alt="Statistics for Overwatch">
                </div>
                <div class="col-lg-4 col-md-4 col-xs-4">
                    <img src="img/dotaEmblem.png" class="img-fluid" alt="Statistics for Dota2">
                </div>
            </div>
			<div class="row"></div>
        </div>
    </div>
</div>

//you have to add row after col-md-12

Answer №3

In order to maintain clean code structure, it is advisable to minimize the usage of unnecessary div or other elements. Instead of using col-md-12, simply replace it with the row class and eliminate any redundant row div.

The following code snippet demonstrates an improved version that removes an unnecessary div element for a more concise and aesthetically pleasing code:

<header>
    <div class="container">            
          <div class="row emblems-section justify-content-center align-items-center">
              <div class="col-lg-4 col-md-4 col-xs-4">
                  <img src="img/leagueEmblem.png" class="img-fluid" alt="Statistics for League of Legends">
              </div>
              <div class="col-lg-4 col-md-4 col-xs-4">
                  <img src="img/overwatchEmblem.png" class="img-fluid" alt="Statistics for Overwatch">
              </div>
              <div class="col-lg-4 col-md-4 col-xs-4">
                  <img src="img/dotaEmblem.png" class="img-fluid" alt="Statistics for Dota2">
              </div>
          </div>
    </div>
</header>

Answer №4

<div class="container">
    <div class="row">
        <div class="col-md-12 d-flex emblems-section justify-content-center align-items-center">
            <div class="col-lg-4 col-md-4 col-xs-4">
                <img src="img/leagueEmblem.png" class="img-fluid" alt="Statistics for League of Legends">
            </div>
            <div class="col-lg-4 col-md-4 col-xs-4">
                <img src="img/overwatchEmblem.png" class="img-fluid" alt="Statistics for Overwatch">
            </div>
            <div class="col-lg-4 col-md-4 col-xs-4">
                <img src="img/dotaEmblem.png" class="img-fluid" alt="Statistics for Dota2">
            </div>
        </div>
    </div>
</div>

It's possible to enhance the layout by including the d-flex class with col-md-12 in this section.

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

Adjust the height of the HTML overlay to span the entire visible page

I have a website that utilizes AJAX to load content dynamically. To enhance user experience, I implemented an overlay with a loading indicator during the loading process using jQuery and the jQuery BlockUI plugin. When invoking $(element).block(), everyth ...

htmlcssdomjquery-ui

Searching for a table row that corresponds to the content of a cell using Python and Selenium

If you need to retrieve the row element from an HTML table where the text in a specific cell matches the string 'Mathematik & Informatik'. Here is the structure of the HTML: <table class="views-table cols-4"> <thead> ...

pythonhtmlseleniumxpath

The jQuery prop("disabled") function is not operating as expected

Although I've seen this question answered multiple times, none of the suggested solutions seem to be working for my specific example. Hopefully, a fresh set of eyes can help me figure out what's going wrong. Even after adding alerts to confirm t ...

javascriptjqueryhtmljquery-mobile

Bug with the animation of height in Jquery

Unfortunately, I can't share my entire source code here because it's quite lengthy. However, maybe someone can provide some insight into a common issue that may be happening elsewhere. The problem I'm facing is with a DIV element that has r ...

jqueryhtmlcssanimation

Assign individual buttons to specific CSS files to update the background image on my webpage

I'm experimenting with changing the background of my webpage using Angular framework. I want to switch between different CSS files by clicking on buttons within the same page. CSS1.css body { background-image: url("./Images/mg.jpg"); } CSS2.cs ...

javascripthtmlcssangular

Is there a way to remove this specific element from an inherited hyperlink?

My website can be found at whensayfeed.meteor.com. Each post on the site is enclosed within an <a></a> element. The heart symbol on the right side of each post is intended to be a "like button" that users can click on. However, because it is ...

javascripthtmlcss

What is the process of initializing divs in DataTables?

My application has a DataTable installed, but I encountered an error message stating "DataTables warning: Non-table node initialisation (DIV). For more details about this error, please visit http://datatables.net/tn/2". I'm aware that DataTables is d ...

javascriptjqueryhtmlcssdatatables

Utilizing the Primevue theme for a fresh new look

Update: Since I couldn't resolve the issue, I decided to switch back to Vue2 and opted for Vuetify instead of Primevue. I'm new to Vue and chose Vue3 for my project, which is related to my master's thesis. Due to a lack of UI libraries comp ...

cssvue.jsvuejs3primevue

Using jQuery to remove any HTML tags from user input

I have multiple inputs with text, but they are displaying with unwanted HTML tags. I attempted various solutions without success. Below is my jQuery code to extract data from a table: $(editModal+" #Website").val(n);; Here is an example of my input code: ...

javascriptphpjqueryhtml

Can search criteria be saved for later use?

I operate a classifieds website that allows users to search through ads. I am contemplating ways to save search criteria so that users can easily reuse them for future searches without having to input the same details over and over again. For instance, th ...

phpsqlmysqlhtmlsearch

Exploring Laravel 4: Navigating Tables with Relational Models

Edit: error fixed I am managing two interconnected Models: Project and Task. Their relationship is defined as follows: Project.php class Project extends Eloquent { public function tasks() { return $this->hasMany('Task'); ...

phphtmllaravellaravel-4

Guide on aligning all list items to the left using React Material-UI, incorporating fontAwesome icons, and styling with Tailwind.css

I am trying to align the text of my list items to the left. Here is what I have currently: https://i.stack.imgur.com/a5o5e.png Is there a way to left-align the text in this code snippet? import React from 'react'; import PropTypes from 'p ...

cssreactjsfont-awesomematerial-uitailwind-css

I need to style a blockquote so that it floats to the right, but I also want it to be

I want to enhance the appearance of my blockquotes by giving them a different color background and ensuring they stand out from the regular text. Although using float:right helps achieve this effect, I prefer not to force the blockquote to the right side o ...

csscss-floathtml

spontaneous angular rotations in a constantly shifting CSS environment

Is it possible to apply a random CSS rotation to an image just once, rather than having it continuously spin when hovering over a leaflet map? http://jsfiddle.net/J03rgPf/mzwwfav4/3/ I want the random CSS rotation to be set only one time. How can I achie ...

cssangularjsrotationleafletangular-leaflet-directive

Creating an engaging user experience with a Django form

Creating a dynamic calculator <div id="calculator"> <h2>Calculate the price of sawing materials</h2> <form method="post" action="{% url 'products' %}"> {% csrf_token %} & ...

javascripthtmldjango

"Preventing scrolling in Safari with CSS overflow:hidden isn't working as expected

Why does overflow: hidden on the body tag not disable scrolling on the page in Safari? It works in Chrome but not in Safari. I'm struggling to find a solution. Can anyone help? ...

cssreactjssafarioverflow

How can you create a hovering effect for the heading in BOOTSTRAP 5?

I am seeking assistance on how to create a hover effect for this heading in Bootstrap. I have tried using CSS without success. Thank you in advance. NOTE: I have not included the Bootstrap links as I am utilizing downloaded compiled files. <!doct ...

javascripthtmlcssbootstrap-5

Steps for creating a square button

Is it possible to create a square button on my website that still functions like a traditional button? I want the button to change appearance slightly when scrolled over. Currently, I have an example where the button is not clickable: http://jsfiddle.net ...

css

Troubleshoot: OffCanvas feature in Bootstrap 5 not functioning properly within navbar on small screens

I'm having trouble implementing Bootstrap 5 OffCanvas within the Navbar on laptop/desktop screens. It seems to only work properly on mobile screens with a size of sm or lower, displaying the hamburger menu. Any suggestions on how to make it functional ...

htmlcsstwitter-bootstrapbootstrap-5

Manipulating CSS content property in React using Material UI

I am trying to set content: "" on my i element: "& i::before": { content: "" }, "& i::after": { content: "" }, However, the style is not being applied and I am seeing an ...

cssreactjsmaterial-ui