How to center an image in a flex-row using Bootstrap 4

For my layout, I am attempting to create a flex-row with 3 components: [TEXT, IMG, TEXT]. My goal is to have the IMG centered perfectly within the row.

To achieve this, I am aiming to make both of my paragraphs the same width so that the IMG appears centered.

Below is the code snippet I am currently using:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>



<div class="jumbotron shadow-sm">

    <div class="d-flex flex-row justify-content-center align-items-center">

        <div class="d-flex justify-content-start flex-grow-1 ml-3">
            <p>Small content on the left</p>
        </div>
        <div class="d-flex justify-content-center flex-grow-1">
            <img src="https://d1guu6n8gz71j.cloudfront.net/system/video/previews/1939344/big.png?1549617786" width="100px">
        </div>
        <div class="d-flex justify-content-end flex-grow-1 mr-3">
            <p>very big content on the right very big content on the right</p>
         </div>

    </div>

</div>

I have explored using flex-basis as a solution but have not achieved the desired results yet. There might be something crucial that I am missing.

htmlcssbootstrap-4

Answer №1

Consider incorporating the col class for layout flexibility

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>



<div class="jumbotron shadow-sm">

  <div class="d-flex justify-content-center align-items-center">

    <div class="col">
      <p>Small content on the left</p>
    </div>
    
    <div class="col text-center">
      <img src="https://d1guu6n8gz71j.cloudfront.net/system/video/previews/1939344/big.png?1549617786" width="100px">
    </div>
    
    <div class="col">
      <p>very big content on the right very big content on the right</p>
    </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

The Datalist feature in the MVC application is malfunctioning on the production server, yet it is functioning properly

In my application, I am facing an issue with the datalist functionality. It works perfectly in the Development environment but fails to show any lookup results in the Production environment. Using datalists is crucial for providing auto-complete features, ...

asp.net-mvchtmlautocompletehtml-datalist

When data is submitted through the POST method, it mysteriously disappears

When I send the "user" variable to another page called Survey.php, here's how it looks: In the index.html file: <form action="Survey.php" method="post" name="frm"> <div><input type="text" name= ...

javascriptphphtmlformspost

button for submission within a table

I'm looking for an alternative to using forms. Instead, I want to include a submit button that will send information upon being clicked. <div id="tab" > <table> <td>Num</th> <tr>Name </th> < ...

jqueryhtml

Determine the number of XML elements and display the results for each XML element counted

I need assistance with a problem I am facing. I am extracting data from an XML API using PHP. Below is my code snippet: <?php $gigatools = simplexml_load_file('http://gigs.gigatools.com/u/A2LTD.xml'); echo "<table id='gigs_parse&apos ...

phphtmlxml

Dynamic list choices determined by prior selections

As someone new to Wordpress, I am working on a car platform theme but facing some challenges with the car-selling functionalities. One specific issue is the need to show or hide options based on previous selections made with dropdown lists. For instance, ...

javascriptphpjqueryhtml

Unable to see Primereact styles reflected on components

After some investigation, I've pinpointed the issue to be related to preflight from tailwind. Upon reviewing the documentation, I came across this helpful information: CSS Layer It seems that using Tailwind CSS with styled or unstyled modes of PrimeR ...

cssreactjsnext.jstailwind-cssprimereact

Center the content of the HTML body

Despite my best efforts, I seem to be making a mistake somewhere. While creating a bootstrap website at , the site appears well and aligned in the center. However, when I try to adjust the screen size to less than 850px or even smaller, all the content shi ...

phphtmlcsstwitter-bootstrap

The AngularGrid library has been reported to generate blank areas in certain unique scenarios

I have implemented Angular grid to create a fluid layout of items on my page, similar to Pinterest. While it generally works well, I am encountering an issue where there is empty space in some cases because the position of item7 seems to be calculated inco ...

javascripthtmlcssangularjsangular-grid

"Click here for additional details" hyperlink, featured in an Email Bulletin

I need assistance with adding a "Read more..." link to my HTML newsletter that will expand and hide additional content within the email. I have been able to achieve this on a website using CSS, but it is not working in an email, particularly when viewed in ...

htmlcssoutlookhtml-emailnewsletter

What is the best way to incorporate one Div within another Div using JavaScript?

I have a single main div with an id, and I am looking to insert 4 additional child divs inside it. Each of these child divs will then contain 5 more divs each. The code snippet that I currently have is as follows: $( document ).ready(function() { for( ...

javascriptjqueryhtmlfunction

Styling a header using CSS

I successfully coded a header and navigation bar, but I am struggling with setting up elements like "Contact me" properly. My goal is to separate them, add icons, and align the text to the right. I am using Bootstrap 4, but nothing seems to be working, n ...

htmlcssbootstrap-4

Retrieve the HTML content once the webpage has completed loading

As I attempt to download multiple HTML pages using a loop and scrape the data within, I am facing an issue with pages that have JavaScript running during loading. This has made me reconsider using WebClient for this task. Instead, I tried using a WebBrow ...

javascriptc#html

Adding elements to a JavaScript array from within a PHP loop

I'm working with a php loop that is outputting geolocation values. I want to save these values in a javascript array so that I can use them to plot points on an HTML5 canvas. How can I achieve this? Here is the php loop: <ul id = "geo-list"> ...

phpjavascriptarrayshtmlcanvas

Retrieve data from a different div, perform a subtraction operation, and dynamically update yet another div using jQuery

Looking to extract a specific div class value, subtract 500 from it, and display the result in another div. Unclear about the steps needed to show the subtraction outcome on the other div. Consider this scenario: <div class="main-value">6000</d ...

javascriptjqueryhtml

Issue with aligning Bootstrap 5 card tiles in a specific position

Can anyone guide me on the correct way to use the Bootstrap 5 card component to display an attached image in a card view? Here is my code: <!DOCTYPE html> <html lang="en"> <head> <!-- Required meta tags --> <me ...

htmlcsstwitter-bootstrapbootstrap-5

Issues with animation functionality in Google Chrome

Does anyone know why the blink effect isn't working on Google Chrome? <p class="blink">at least it's not Comic Sans</p> <style> .blink { animation-duration: 1s; animation-name: blink; animation-iteration-count: infinite; anima ...

htmlcssgoogle-chrome

Duplicate the LI element in a way that it is inserted after the original LI instead of at the end

I am looking for a way to clone an item immediately after clicking on it instead of cloning it at the end of the list. Currently, it always clones to the END and adds it after the last LI in the list. Here is a link to the jsFiddle I created jsfiddle test ...

javascriptjqueryhtml

Modify the fluid containers on a webpage seamlessly without any gaps

I'm working on aligning multiple divs with dynamic content of varying height on my page. Here's how the divs are currently designed: I would like to achieve a design like this using CSS: What modifications can be made to the CSS for the DIV to ...

htmlcssheight

What is the best way to add character limits to an HTML form?

Hello there, I am currently working on creating an HTML form to generate a PDF file. However, I am facing difficulties in figuring out how to create the character placeholders for text input fields (as shown in the screenshot of a sample PDF file below). ...

htmlforms

disable hover effect

Kindly visit the link below and click on 'Story': Upon mouseover, the animation can be observed: How can I remove this effect? The CSS I am using for this is as follows: .storypageThumb1 { float:left; width:175px; height:91px; ...

javascriptjqueryhtmlcss