Is it possible to dynamically center align an image based on varying column widths in Bootstrap 4?

Hello everyone, I am currently working with Bootstrap 4 and have a column containing an image as shown in the code snippet below:

 <div className='col-xs-12 col-sm-5 col-md-4 col-lg-3'>
     <img src={movie.Poster} className='movie-poster img-fluid mx-auto d-block' />
 </div>

I am facing an issue where I would like to center the image when the screen size corresponds to col-xs-12 and col-sm-5, but not center it when the screen size is larger such as col-md-4 or col-lg-3. Is there a way to conditionally apply styles based on certain screen sizes?

Thank you for your help.

htmlcssbootstrap-4

Answer №1

Absolutely. It is recommended to adhere to the following notation: https://getbootstrap.com/docs/4.0/utilities/spacing/#notation

In this scenario, the appropriate usage would be: mx-auto mx-lg-0

<img src={movie.Poster} class='movie-poster img-fluid mx-auto mx-lg-0 d-block' />

mx-auto: used for xs, sm, and md screen sizes, positioning elements centrally with auto margins.

ml-lg-0: applied to lg and xl displays, setting the left margin to 0. Alternatively, mx-lg-0 can also be employed if required.

Answer №2

Absolutely, the mx-auto class is designed to be responsive. When you add mx-md-auto, it will only center the content on screens that are medium sized (md) and larger.

In your situation, using both the img-fluid class along with trying to center the image may not have the intended effect. The img-fluid class already stretches the image to fill the column width completely, making centering unnecessary.

Take a look at this code snippet below to see how it functions (click "run code snippet" and expand to full page view):

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container">
    <div class="row">
        <div class="col-12 col-sm-5 col-md-4 col-lg-3 bg-secondary">
           <p>Lorem ipsum.</p>
            <img src="https://placeimg.com/50/50/animals" class="movie-poster img-fluid mx-md-auto d-block" />
        </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

Display the jQuery validation message in the final td cell of the table

JavaScript Animation Library rules:{ gender: { required: true }, }, messages:{ gender: { required: "Please indicate your gender" }, }, errorPlacement: function (error, element) { if (element.attr("type") == "radio") { ...

javascriptjqueryhtml

Dynamically updating multiple rows in Bootstrap datepicker

I have a table with multiple rows from a database. Each row in the table contains a date column that selects today's date for only one row. However, since there are multiple rows, I need to update the datepicker for all the rows. I attempted to add t ...

node.jsbootstrap-4ejs

Using the jquery stop() function will halt any ongoing hover effects from being applied

I am currently experiencing a problem with the code found on http://jsfiddle.net/eSbps/. This specific code pertains to a menu system that reveals second levels when hovering over the top levels, using slideDown('slow'). To prevent queuing effe ...

jqueryhtmlcss

Adding rows to a database can be done by utilizing a dynamic form that consists of both repeatable and unique fields

Here is my follow-up post addressing the issue I previously encountered. Initially, I erroneously used mysql instead of mysqli, but I have now made the necessary updates based on recommendations. I have a form that contains variable sets of fields (rangin ...

phpjqueryhtmlformsmysqli

Editing the app.js file can cause it to malfunction and stop working

As I work on designing a webpage for a construction company using a template, I face an issue with the js file named app.js. Whenever I make edits to the script, the entire HTML page loses its responsiveness as if the js file was never included in the firs ...

javascriptjqueryhtmlcss

The various sections of my website are neatly tucked away under one tab, only revealing themselves to users as they click on each individual tab

My recently published website is experiencing a strange issue. When the site loads, all contents including paragraphs and videos from other pages are displayed under one tab (the HOME tab). However, once any other tab is clicked, the issue fixes itself. Yo ...

javascriptjqueryhtmlwebtabs

A distinctive web page featuring an engaging image backdrop: captivating content effortlessly scrolling beneath

On my website, I have implemented a background image with a fixed transparent header. When scrolling down, I want the main content to be hidden beneath the header. To achieve this effect, I used the -webkit-mask-image property. However, this approach affec ...

htmlcssimagescrolltransparency

What is the advantage of parsing values in a switch statement compared to an if condition?

function checkInput() { let value = document.getElementById('test').value; if (value == 1) { console.log("It works with if statement"); } } function checkSwitch() { let value = document.getElementById('test').value; switc ...

javascripthtmlfunctionif-statement

Ensure that the text is wrapped properly when implementing innerHTML functionality

Within my Angular 5 application, I am faced with a requirement to display HTML content retrieved from a database. An example of the text stored in the database is: <div><u>Documents and Files</u></div><ul><li>These docu ...

javascriptcssangularinnerhtml

Swapping out a code snippet within an HTML document using JavaScript

As a new member of this community, I present to you my very first problem that needs solving. It might be a piece of cake for some of you, but for me, it's proving to be quite tricky. The task at hand involves replacing or removing a string to make ev ...

javascripthtmlnotepad++

Is there a possible CSS-only alternative to the calc() function that can be used as a fallback

I'm aware of a CSS backup plan for calc() in IE6-7. Also, I've come across an alternative using jQuery. But what about a CSS-only substitute for calc() specifically for IE8? Is there one available? ...

css

The footer is displaying unusual white space beneath it

Recently, I attempted to create a sticky footer using Flexboxes and the <Grid container> Check out the code on Codesandbox However, an issue arose - there was a strange whitespace below the footer. https://i.sstatic.net/2YdaJ.png After some exper ...

htmlcssreactjsmaterial-ui

How can we use Jquery to add animation effects to our styling

I am a beginner with JQuery and struggling to make the code below work correctly. $('.announcement_panel_button').click(function(e){ $('#site_logo').animate({ 'margin-top': '5px' }, 5000); e.pre ...

jquerycssjquery-animate

Determining the top element displayed in a div: A guide

Looking for an answer on how to determine the top visible element while scrolling? You may find some insights in this post: (Check if element is visible after scrolling). My scenario is slightly different - I have a scrollable div containing multiple ele ...

javascriptjquerycssangularjs

Using dynamic jquery to target specific elements. How can we apply jquery to selected elements only?

Hello everyone! I have been working on a simple hover color change effect using jQuery, but I noticed that I am repeating the code for different buttons and service icons. Is there a way to achieve the same result so that when a button is hovered, the co ...

javascripthtmljquerycsshover

What are the steps to incorporate fading effects into a jQuery popup box?

Currently, I have implemented a jQuery function to display a popup box using .show() and hide it using .hide(). Is there a way to incorporate charming animations such as fading into the popup box? // display pop up $('.mypopup').show(); // con ...

jqueryhtmlcss

Mandatory tick box needed for submitting PHP form

Although the topic of PHP form validation is frequently discussed, I am a complete beginner in PHP and I am currently experimenting with a PHP form script that I discovered here. As a result, I am unsure about how to proceed with incorporating two specific ...

phphtmlformsvalidation

What is the best way to toggle a sticky footer menu visibility using div elements with JavaScript instead of relying on pixel measurements?

Just wanted to mention that I'm pretty new to this, so if I use the wrong terms, I apologize in advance. I am trying to replicate Morning Brew's sticky footer opt-in form (check it out here). However, the code I have now only tracks pixels. Is t ...

javascripthtmljquerycss

Attempting to alter an image with a click and then revert it back to its original state

I'm currently working on a feature that toggles an image when a specific class is clicked. The code I have so far successfully switches from 'plus.png' to 'minus.png' upon clicking, but I need it to switch back to 'plus.png&ap ...

javascriptjqueryhtmltoggle

Center-align the text vertically in relation to the icon

A query has arisen, regarding a div that contains text and an icon. The issue at hand is that on larger screens the text is not vertically aligned in the center. For further reference, please visit this bootply link: http://www.bootply.com/CHKeRxKOX6 http ...

htmltwitter-bootstrapcss