Troubles with aligning a figure in Bootstrap 4

I am in the process of updating my website layout from an old version marked by Old HTML, which can be found at 

JFiddle: https://jsfiddle.net/LybeppL3/11/

The new version I am working on, known as Current Code: 

https://jsfiddle.net/5c2sm9s1/23/
OR at PreemPrice.com

However, I am facing challenges with making my new layout responsive like the old one. There are two specific issues that I am encountering:

  1. The figure/image collapses below instead of above the body of paragraphs as intended.
  2. The image collapses un-centered compared to the previous code.

While the new code looks better on desktop in terms of not interfering with the text, it is lacking in a visually pleasing appearance on mobile devices unlike the old version.

Desired Mobile Look for New Code:

https://i.sstatic.net/17rtE.png

Aesthetic Issues in New Code Requiring Correction:

This showcases the problems mentioned earlier - stacking below instead of above the paragraphs and lack of centering.

I am looking for solutions to align the new code with the visual appeal of the old code (1).

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

Your assistance in resolving these issues and achieving the desired outcome is greatly appreciated. Thank you!

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

To ensure proper alignment, it is necessary to rearrange the elements by placing the picture div before the text block div. Additionally, adding an ID to the picture div and center-aligning it using CSS will provide the desired layout.

The revised HTML structure would appear as follows:

    <html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

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

    <title>Issue</title>
  </head>
  <body>

  <section id= "about">
            <div class= "container containerPadding">
             <div class= "row justify-content-center">
                 <div class= "col-sm-12">
                     <h1 class="text-center ExperienceName">About Us</h1>
                     <h4 class="text-center pb-3">From Humble Beginnings.</h4>
                 </div>

             </div>

            <div class= "row justify-content-center">

                     <div id='profile-pic' class="col-sm-3">
                      <figure class="figure ez-animate text-center" id="profilePic" data-animation="fadeInRight">
                           <img src="http://via.placeholder.com/250x250" width="250" height="250" class="figure-img img-fluid rounded ez-animate" alt="A generic square placeholder image with rounded corners in a figure." data-animation="fadeInRight">
                      <figcaption class="figure-caption"><a href="https://josephromo.com">Joseph A. Romo</a> | Co-Founder & CEO</figcaption>
                  </figure> 
              </div>
                 <div class= "col-sm-9">
                    <!-- Text content here -->
                 </div>


             </div>
         </div>          
     </section>



   <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  </body>
</html>

The updated CSS code for center-aligning the picture div would be:

#profile-pic {
  text-align: center
}

For more details, you can access the modified Fiddle here.

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

Unable to insert flag image into the <option> tag

Struggling to add a flag image to the options using any method (html,css)! <select> <option value="rus" selected>Rus</option> <option value="Uzb" >Uzb</option> <option value="eng">Eng</option> </s ...

htmlcss

Aligning text with a scalable vector graphic (SVG) illustration

Is there a way to position the text next to the SVG object? The current output is as follows: The desired outcome is to have the text displayed alongside the SVG image: Below is the HTML code snippet: <div class="alert alert-success smallFont" id="i ...

htmlsvg

In order to properly adjust the HTML content when resizing the window, it

I'm facing an issue with a toggle setup for displaying content differently based on screen width. Specifically, when the screen size decreases below 600px, it switches to the correct content. However, upon increasing the screen width again, it fails t ...

htmljquery

Issues with CSS causing items to not line up in a single row

I'm currently working on an html/css page and trying to align the items of the agenda class in the same row, centered on the page. https://i.sstatic.net/8TjG8.png Here's the code I've been using: <html lang="en" xmlns="ht ...

htmlcss

HTML and Javascript Form Integration for Sage Pay Purchase Button

Currently, I am working on a project that includes online payment options via PayPal and Google Wallet, with a "buy now" button. Now, my next step is to incorporate the Sage Pay "buy now" button onto the website using HTML and JavaScript. Although I have ...

javascripthtmlopayo

Storing information in a database without the need for a page refresh using ajax in laravel

My form allows users to input multiple fields and save them to a database using AJAX. Below is the HTML for my form: <form id="paramsForms" method="POST"> {{csrf_field()}} {{ method_field('POST') }} <div class="modal-body" ...

phphtmllaravelhttppost

Is it possible to maintain child divs in a single line?

Despite trying numerous recommendations (many involving white-space:nowrap and display:inline-block), I have been unsuccessful in keeping these child divs on a single line with horizontal scrolling. This is my code: <div id="list"> < ...

csshtmlparent-child

Steps to ensure that a singular button is visible within a specific jQuery function

I am looking for a solution regarding the placement of a button labeled "add to profile" within a jQuery div. Specifically, I would like this button to only appear after the last "next" button in the sequence. For example, after question 1 and its respect ...

htmlajaxjquery

Keep the link underlined until a different button is pressed

I need help with a webpage that displays a list of partners organized by categories. When clicking on sidebar categories, the link remains underlined. However, if you click anywhere else on the page, the link becomes inactive. CSS: button:hover { t ...

javascriptjqueryhtmlcss

Example of a functional typoscript implementation for a bootstrap navbar

Currently using typo3 8 and considering transitioning from bootstrap3 to bootstrap4. Does anyone have a proven typscript for implementing a bootstrap4 navbar? Your help is greatly appreciated. Thank you in advance! ...

bootstrap-4typo3

Ensure that the control button is pressed during the JavaScript onclick event function

I am looking to create a JavaScript function that checks if the CTRL button is pressed. Here is my PHP code: <tr class="clickable" onclick="gotolink('<?= base_url() . invoices/createinvoice/' . $customer->Id; ?>')"> And here ...

javascriptphphtmlfunction

Creating visually appealing Jquery-ui tab designs

Trying to customize the jquery tabs, I experimented with styling them to my liking. One thing I did was attempt to reduce the size of the tabs by adding a height:45px; to the UI stylesheet shown below. .ui-tabs-vertical .ui-tabs-nav li { clear: left; ...

jqueryhtmlcss

Updating part of a page while also changing the navigation

Apologies in advance, as this is my first attempt at coding a website. I have a specific need where I want to update only one div on my web page when a link in the navigation bar is clicked. <body> <div id="wrapper"> <header id= ...

javascriptjqueryhtmlajax

The file you are trying to import, bootstrap-sass, cannot be located or is unreadable

Experimenting with Django Shop and following a tutorial that can be found here: (stable version). After starting the server and navigating to localhost, the following error message is displayed: Error: File to import not found or unreadable: bootstrap-s ...

cssdjangobootstrap-4django-shop

Move the option from one box to another in jQuery and retain its value

Hey guys, I need some assistance with a jQuery function. The first set of boxes works perfectly with the left and right buttons, but the second set is not functioning properly and doesn't display its price value. I want to fix it so that when I click ...

javascriptjqueryhtml

"Handling Errors in JavaScript when a Button Click Event Triggers a

There are 2 buttons intended for "Add to Favorites" and "Remove from Other Favorites". Here is the code snippet: <button type="submit" class="btn btn-warning btn-xs" id="FavoriButonex" data-id="<?php echo $sorid ?>"> <i class="fa fa-hea ...

javascriptphphtml

What steps can be taken to ensure that the header elements such as the image, text, and button are

I am currently working on a website project using Bootstrap 5. For the header section of the site, I have incorporated a carousel from Bootstrap that includes images, text, and buttons. My main objective is to ensure that all elements within the carousel ...

htmlcssresponsive-designfrontendbootstrap-5

Designing a loading animation with rotating lines converging towards the center to form a circular motion

Check out my code snippet below: .circle { border: 1px solid transparent; border-radius: 50%; width: 100px; overflow: hidden; } .div7 { width: 100px; height: 10px; background: red; color: white; font-weight: bold; positi ...

htmlcsscss-animations

Interacting with Apexcharts: Exploring a Tiny Column with Hover

While using apexcharts, I encountered an issue with small columns. It can be quite challenging to render the tooltip properly because you have to hover very precisely over the column. Query: Is there a way to expand the hover area to make it easier to int ...

javascriptcssreactjschartsapexcharts

Is there a way to include all images from a local/server directory into an array and then utilize that array variable in a different file?

I'm currently using Netbeans version 8.0.1 with PHP version 5.3 Here is a PHP file example: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/199 ...

javascriptphphtmlarraysnetbeans