How can I center align all images using Bootstrap?

My current grid images are aligned in a specific way.

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

However, I aim to adjust the grid images to look like this, specifically focusing on centering "img 1". How can I achieve this?

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

HTML

<div class="container">
    <div class="row imagetiles">
        <div class="col-lg-3 col-md-3 col-sm-3 col-xs-6">
            <img src=https://i.imgur.com/nXSiWbw.jpg class="img-responsive">
        </div>
        <div class="col-lg-3 col-md-3 col-sm-3 col-xs-6">
            <img src=https://i.imgur.com/0dXOdvZ.jpg class="img-responsive">
        </div>
        <div class="col-lg-3 col-md-3 col-sm-3 col-xs-6">
            <img src=https://i.imgur.com/nXSiWbw.jpg class="img-responsive">
        </div>
        <div class="col-lg-3 col-md-3 col-sm-3 col-xs-6">
            <img src=https://i.imgur.com/0dXOdvZ.jpg class="img-responsive">
        </div>
    </div>
</div>

CSS

div.imagetiles div.col-lg-3.col-md-3.col-sm-3.col-xs-6{
  padding: 0px;
}

Check out the jsfiddle demo here

htmlcssbootstrap-4

Answer №1

Here is a simple way to achieve this using Bootstrap 4.

To align elements in a row, just include the d-flex align-items-center classes within the row element:

<div class="container">
    <div class="row imagetiles d-flex align-items-center">
        <div class="col-lg-3 col-md-3 col-sm-3 col-xs-6 p-0">
            <img src=https://i.imgur.com/nXSiWbw.jpg class="img-fluid">
        </div>
        <div class="col-lg-3 col-md-3 col-sm-3 col-xs-6 p-0">
            <img src=https://i.imgur.com/0dXOdvZ.jpg class="img-fluid">
        </div>
        <div class="col-lg-3 col-md-3 col-sm-3 col-xs-6 p-0">
            <img src=https://i.imgur.com/nXSiWbw.jpg class="img-fluid">
        </div>
        <div class="col-lg-3 col-md-3 col-sm-3 col-xs-6 p-0">
            <img src=https://i.imgur.com/0dXOdvZ.jpg class="img-fluid">
        </div>
    </div>
</div>

In your JSFiddle, make sure you are using the correct version of Bootstrap 4 and jQuery to avoid any errors. Also, remember to use the p-0 class for zero padding on specific divs without needing custom CSS.

Lastly, keep in mind that img-responsive is for Bootstrap 3, while img-fluid is meant for Bootstrap 4. Make sure not to mix them up.

See the updated JSFiddle example here: https://jsfiddle.net/shivanraptor/bq8covg5/7/

Answer №2

Revise your CSS like so:

div.imagetiles div.col-lg-3.col-md-3.col-sm-3.col-xs-6{
  padding: 0px;
  align-self: center;
}
div.imagetiles{
  display: flex;
}

Check out the jsfiddle link

Answer №3

To apply this layout to your design, simply include the following CSS code:

.imagetiles {
  align-items: center;
  display: flex;
}

Check out the live demo on jsfiddle: https://jsfiddle.net/3bfmLn2q/

Answer №4

There are several methods to achieve this, but one of the simplest is using flex like so:

.imagetiles{
  display: inline-flex;
  align-items: baseline;
}

Answer №5

  1. Consider adding the class my-auto to your image tag
  2. If the first suggestion doesn't work, try converting the entire row into a flex-wrap using classes 
    d-flex align-content-center flex-wrap

For more information on vertical centering with Bootstrap 4, check out this article.

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

Align an image in the center vertically within a left-floated div with a minimum height

I am currently attempting to vertically align an image within a div that is positioned to the left, and has a minimum height of 150 pixels. The issue I am facing is that none of my attempts seem to be successful. I have tried various methods, including ut ...

htmlcss

Issue with the JQuery FadeIn effect on my website when a div is repositioned for visibility

I have been working on revamping an existing website at www.gjelavoie.com. To enhance the user experience, I decided to use jquery fadein() and fadeout() functions for displaying my Contact form without visitors having to temporarily access the main page. ...

jquerycssfirebug

Steps for building a Bootstrap grid of thumbnails

I need to display an unknown number of thumbs. Below is a sample of the HTML rendered: <div class="row-fluid"> <ul class="thumbnails"> <li class="span3"> <a href="#" class="thumbnail"> &l ...

javascriptcsslayouttwitter-bootstrapweb

Empowering user accessibility through intricate custom elements

In the world of web accessibility guidelines, labels are typically associated with form controls like <input> or <textarea>. But what happens when dealing with complex Angular / React / ... components that function as form controls? Picture a ...

htmlreactjsangularaccessibility

Encircling the most recently selected image with a border

I have successfully made some <img> elements act like <input type="radio"> buttons and now I want to visually indicate the user's selection by adding a border around the chosen image. My challenge is that there are multiple rows of images ...

javascriptjqueryhtmlcss

Using Javascript to choose an option from a dropdown menu

const salesRepSelect = document.querySelector('select[name^="salesrep"]'); for (let option of salesRepSelect.options) { if (option.value === 'Bruce Jones') { option.selected = true; break; } } Can someone please ...

javascriptjqueryhtml

Adding -moz & -o prefixes to code that only has -webkit tags can be done by manually duplicating each line of

Imagine having a webpage located at this link: After saving the page and running the HTML file on my localhost, everything seems to work smoothly in Chrome due to the presence of -webkit prefixes in the CSS. Now the question arises - how can I ensure that ...

cssvendor-prefix

CSS only rendering in Firefox, not displaying in other browsers

After all the hard work I put into my website, I have encountered an issue while conducting browser compatibility checks. There seems to be something strange happening with the CSS of a specific link. I have applied a CSS class and included some PHP code ...

phphtmlcsscross-browser

Implementing a two-column infinite scrolling feature using ISCroll

I am looking to incorporate multi-column infinite scrolling using IScroll infinite scrolling. I want the content of my HTML to appear as follows: <ul> <li>A</li> <li>B</li> <li>C</li> <li>D</li> ...

javascripthtmlcssinfinite-scrolliscroll

How can I effectively showcase the content of a text file in HTML using Flask/Python?

Let's discuss the process of displaying large text/log files in HTML. There are various methods available, but for scalability purposes, I propose taking a log file containing space-separated data and converting it into an HTML table format. Here is ...

pythonhtmlflaskjinja2

Dynamic row Material-UI input field

Is there a way to create a multiline TextField component that expands to take full height on different devices? https://i.sstatic.net/5y3lG.png* I am familiar with fullWidth, but is there an equivalent for setting the height of the component to full on r ...

cssreactjsmaterial-ui

Having trouble adjusting the height of <a> elements in the navbar

My navbar has an issue where the listed items do not fill the entire height of the navbar. I have tried adjusting padding and margin, but it doesn't seem to be affecting the layout. Any suggestions would be greatly appreciated. Thank you. #navbar { ...

htmlcss

Simple inquiry: PHP and HTML formatting essentials

I've reached a point in my coding where there is an abundance of code and a heavy reliance on certain server conditions for HTML outputs. Is there a way to work around this issue, similar to the following PHP snippet: <?php if (cond) echo '& ...

phphtmlformatting

How to target and style multiple descendants of an element using CSS

Can you target multiple elements with a common ancestor in CSS using class, id, etc? For example: table.exams caption, tbody, tfoot, thead, tr, th, td If not, is there a method to select all nested elements within that particular element? ...

csscss-selectors

Customize your Outlook emails with HTML and CSS to right-align content for a polished look

My current project involves generating a report to be sent via email, with Outlook being the mandatory application in our system. The report's content is HTML-based and utilizes a table layout. Part of the content needs to appear right-aligned within ...

htmlcssoutlook

Python web scraping is unable to access span elements

Attempting to extract data from the provided link: The goal is to determine the industry group using a checkbox, but encountering difficulty accessing the span element in the code snippet below: <td><table border="0" summary="Table with single C ...

pythonhtmlselenium-webdriverweb-scrapingbeautifulsoup

Nav bar taking up full width of page, centered to the right with content area

I am facing an issue with aligning my full-width navbar with my fixed content area. The ul keeps changing based on the browser or resolution. Check out this fiddle for reference: http://jsfiddle.net/fwyNy/ subject site CSS Code: #topribbon{ width: 10 ...

htmlcssnavmenubarnavbar

Tips for creating semi-circular shapes using CSS gradients

I am trying to design a div element with a background made up of two colors divided by a half circle: My preference is to use gradients for easier animation purposes. I am looking to avoid using pseudo-elements or border-radius, and my HTML structure limi ...

cssbackground-imagegradient

Transforming jQuery into Angular - Press Button to update choices in Dropdown List

I am looking to integrate some AngularJS features into a website that currently utilizes jQuery. Here is the issue I am facing: With jQuery, clicking a button triggers a dropdown item change. Please refer to the jsfiddle below for an example: $('# ...

javascriptjqueryhtmlangularjsforms

Can a faulty image be cached?

Is there a way to ensure that the browser caches invalid or broken images so that when they are re-fetched, the loading time is immediate? I am particularly interested in two scenarios: 1) The first scenario involves trying to load an image from a URL co ...

javascripthtml