Achieving Image Center Alignment in Bootstrap for Responsive Designs

My code snippet appears fine in full-width view, but when I resize the browser, the images (cards) are not centered and lean towards the left side. How can I correct this issue?

This is the HTML code I am using:

<div  class="container-fluid">          
        <div class="row ">
            <div class="col-md-2">
                <figure class="imghvr-fold-up">
                    <figcaption class="text-center">
                        Hello                           
                    </figcaption>                        
                    <img src="http://via.placeholder.com/200x200" class="img-thumbnail" alt="Cinque Terre">
                </figure>              
            </div>

            [More code snippets here...]

        </div>
    </div>

Although I am utilizing Bootstrap v4 which should adjust to different screen sizes automatically, I am experiencing alignment issues. Here is a visualization of the problem:

Check out the image

htmlcssbootstrap-4

Answer №1

One solution is to apply a spacer class like mx-sm-auto to the image for smaller screens. More details on these classes can be found at:

Answer №2

To align the image in the center, apply display: inline-block; to the img tag and then apply text-align: center; to its parent element.

If you have applied display: block; to the image tag, it will act as a blocked element and not align in the center properly.

I have used text-align: center; for the imghvr-fold-up class to manage both the caption and images from a single point of control.

Here is the output: 

//CSS
.img-thumbnail {
  display: inline-block;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
    <div class="row ">
        <div class="col-md-2 text-center">
            <figure class="imghvr-fold-up">
                <figcaption class="">
                    Hello
                </figcaption>
                <img src="http://via.placeholder.com/200x200" class="img-thumbnail" alt="Cinque Terre">
            </figure>
        </div>
        <div class="col-md-2">
            <figure class="imghvr-fold-up text-center">
                <figcaption class="">
                    Hello
                </figcaption>
                <img src="http://via.placeholder.com/200x200" class="img-thumbnail" alt="Cinque Terre">
            </figure>
        </div>
        <div class="col-md-2">
            <figure class="imghvr-fold-up text-center">
                <figcaption>
                    Hello
                </figcaption>
                <img src="http://via.placeholder.com/200x200" class="img-thumbnail" alt="Cinque Terre">
            </figure>
        </div>
        <div class="col-md-2">
            <figure class="imghvr-fold-up text-center">
                <figcaption>
                    Hello
                </figcaption>
                <img src="http://via.placeholder.com/200x200" class="img-thumbnail" alt="Cinque Terre">
            </figure>
        </div>
        <div class="col-md-2">
            <figure class="imghvr-fold-up text-center">
                <figcaption>
                    Hello
                </figcaption>
                <img src="http://via.placeholder.com/200x200" class="img-thumbnail" alt="Cinque Terre">
            </figure>
        </div>
        <div class="col-md-2">
            <figure class="imghvr-fold-up text-center">
                <figcaption>
                    Hello
                </figcaption>
                <img src="http://via.placeholder.com/200x200" class="img-thumbnail" alt="Cinque Terre">
            </figure>
        </div>
    </div>
</div>

Check out the demo at CodePen.

Answer №3

To center the image, add margin:auto and display: block

Check out the Fiddle

.img-thumbnail{margin:auto;display:block}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div  class="container-fluid">          
        <div class="row ">
            <div class="col-md-2">
                <figure class="imghvr-fold-up">
                    <figcaption class="text-center">
                        Hello                           
                    </figcaption>                        
                    <img src="http://via.placeholder.com/200x200" class="img-thumbnail" alt="Cinque Terre">
                </figure>              
            </div>
            <div class="col-md-2">
                <figure class="imghvr-fold-up">
                    <figcaption class="text-center">
                        Hello                           
                    </figcaption>                        
                    <img src="http://via.placeholder.com/200x200" class="img-thumbnail" alt="Cinque Terre">
                </figure>    
            </div>
            <div class="col-md-2">
                <figure class="imghvr-fold-up">
                    <figcaption class="text-center">
                        Hello                           
                    </figcaption>                        
                    <img src="http://via.placeholder.com/200x200" class="img-thumbnail" alt="Cinque Terre">
                </figure>    
            </div>
            <div class="col-md-2">
                <figure class="imghvr-fold-up">
                    <figcaption class="text-center">
                        Hello                           
                    </figcaption>                        
                    <img src="http://via.placeholder.com/200x200" class="img-thumbnail" alt="Cinque Terre">
                </figure>    
            </div>
            <div class="col-md-2">
                <figure class="imghvr-fold-up">
                    <figcaption class="text-center">
                        Hello                           
                    </figcaption>                        
                    <img src="http://via.placeholder.com/200x200" class="img-thumbnail" alt="Cinque Terre">
                </figure>    
            </div>
            <div class="col-md-2">
                <figure class="imghvr-fold-up">
                    <figcaption class="text-center">
                        Hello                           
                    </figcaption>                        
                    <img src="http://via.placeholder.com/200x200" class="img-thumbnail" alt="Cinque Terre">
                </figure>    
            </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

Customizing the color of text in the fillText() function on an HTML5 <canvas>

I need help changing the color of each line of text in my canvas messages. I've tried creating variables for them, but haven't had any success. Any assistance would be greatly appreciated. function initialize(){ var elem = document.getElemen ...

javascripthtmlhtml5-canvas

In Bootstrap 4, the Form-Inline module experiences alignment issues on extra small (XS) view

Boostrap 4 has been used to create a .form-inline at the bottom of the page. It appears correctly when the viewport is larger than the XS breakpoint... https://i.sstatic.net/UYaG7.png ...but encounters issues when switching to XS view... https://i.sstat ...

cssbootstrap-4

Unable to fetch css file in Node.js

I am currently in the process of learning Node.js, but I have encountered a small issue with retrieving data from a css file. Interestingly, when I directly add the data to the index file's code, it seems to work perfectly. Let me share the relevant ...

javascripthtmlcssnode.js

What is the best method for deleting a table row after it has been removed from the database using ajax?

After trying to integrate $tr.find('td').fadeOut(1000, function () { $tr.remove(); into my deletion function for removing a row upon clicking the delete button, I realized it wasn't functioning as expected. func ...

jqueryhtmlajaxasp.net-mvcasp.net-ajax

Dynamic banner featuring animated text, automatically resizing divs based on width while maintaining body width

Currently, I am working on creating a banner with moving text. While I have managed to come up with a solution for implementing this effect, there are two significant issues that I am facing. The width values in pixels need to be manually adjusted based ...

javascripthtmlcss

Is it possible to create a Footer with a 100% width in CSS?

I have a simple HTML page with all elements contained within a mainWrapper div and secondWrapper div. Everything is currently sized to 960px, including the pageHeader, pageContent, and pageFooter. However, I need to keep everything at 960px except for th ...

htmlcss

Guide on incorporating interactive visuals or features within a panoramic image viewer through the use of THree.js and webGL

Seeking advice on how to incorporate more images and hyperlinks within a panoramic viewer, similar to the examples below: This particular link Panorado js viewer. I have noticed that these viewers feature embedded hyperlinks and overlays, I have attempt ...

javascripthtmlthree.jswebglpanoramas

Issue with ngbCollapse feature when attempting to collapse multiple dynamically generated divs on a single page

When dynamically generating ngbCollapse in a main loop that checks for the presence of the Sun in a JSON object, if the Sun is not there, it provides an option to Add_Sun(). Since it is within a loop, it allows adding a sun to every row. When clicking th ...

angularbootstrap-4

Dynamic Content Sorting with JavaScript and jQuery

I am presenting various courses that are available, and I am utilizing JavaScript/jQuery to display or hide them based on element classes. You can view the page here. Currently, the script conceals all content on the page and then reveals items that matc ...

javascriptjqueryhtml

The Slim POST function is not successfully uploading data to MySQL database

I have encountered a strange issue. Despite receiving no errors or console messages, everything appears to return a 200 status successfully. I am utilizing the Slim framework to POST data into my database. When I access existing data via the URL, everythi ...

phphtmlmysqlrestslim

Efficiently filter through numerous options with a search-enabled multiselect feature

I am working on a Sveltekit Project that uses Bootstrap (Sveltestrap), and I am looking to implement a search function for it. My goal is to have an input field where users can type in the desired value and then be able to select multiple values like in a ...

csssveltesveltekitsvelte-component

What is the best way to pass the ng-repeat value to the controller in AngularJS

On my webpage, I am trying to utilize ng-repeat with an array like the one below: var array = [{name: Bill, age: 12, number: 1}, {name: Tyrone, age: 11, number: 2}, {name: Sarah, age: 14, number: 3}]; I want to have a button that, when clicked, sends eit ...

javascripthtmlangularjssubmit

File.type cannot be obtained in IE 11 and IE Edge due to compatibility issues

"change .btn-file :file" : "getfileinfo", getfileinfo: function(e){ var fileInput = document.getElementById('fileupload'); var file = fileInput.files[0]; if(!file || (file.type != 'text/plain' && file.type != ' ...

htmlinternet-explorer-11microsoft-edge

Achieving Equal Heights for Nested DIVs within Containers

Below is the snippet of code I need help with: <table cellpadding="0" cellspacing="0" style="background-color:Aqua"> <tr> <td> <div style="background-color:Yellow">Navigation</div> </td> ...

javascripthtmlcss

Attempting to obtain a score value from the input, but unsuccessful in doing so

Prior to posing this question, I had already managed to successfully retrieve the score value. Below is my original script: <script> $.ajax({ type: "POST", url: "https://example.com/paylist.php?acc=useraccount&json=1", ...

javascriptjqueryhtml

Enhancing Vertical Expansion of List Items (Twitter Ticker) through Responsive Design

Hey there! I've added a Twitter feed to my website, and you can check it out here: anibalcascais.com/tweet/twitter.html I'm working on making the layout of the feed responsive. Right now, the container div adjusts nicely, but when the browser wi ...

jquerycssresponsive-design

Adjusting the width of rows in tables for th and td elements

Hi there, I'm having trouble with aligning the data inside a table. The table alignment seems off, and I'm struggling to fix it. Can anyone lend a hand with this? The only thing I can't remove is the height: calc(100vh - 346px); as it's ...

htmlcss

Tips for disabling automatic sliding in Bootstrap 5 carousel specifically on larger screens

I am working with a Bootstrap 5 carousel that I need to configure to stop autosliding on large screens, but maintain autoslide functionality on mobile devices. Is there a way to achieve this using only HTML and CSS/SCSS? I am aware of the data-bs-interval ...

htmlcsssasscarouselbootstrap-5

What could be causing the span class data to not be retrieved by the getText method

Looking to retrieve the value of a span class called 'spacer-right big project-card-measure-secondary-info' <span class="spacer-right big project-card-measure-secondary-info">1</span> snippet of code: browser.waitForEl ...

javascripthtmlcssautomated-testsnightwatch.js

What is the client side event triggered when the drop-down list is first initialized?

My question pertains to a drop down list set up as follows: <asp:DropDownList ID="ddlAuthenticationMode" DataMember="AuthenticationMode" runat="server" CssClass="ddlAuthenticationMode" AppendDataBoundItems="true" on ...

.netasp.nethtmldrop-down-menuweb