What is the best way to center an image and text vertically using bootstrap?

I'm currently working on a Bootstrap website and have reached a section where I want to display text on the left and an image on the right. While I've managed to achieve this layout, I'm struggling with vertically centering the image. Despite adjusting the paddings and margins, the alignment still seems off.

Attached is a visual representation of what I have so far:

https://i.stack.imgur.com/dlkRB.png

Below is the code snippet for this particular section:

HTML

    <!-- Section 1 -->
<div class="cssSection cssCenter">
    <div class="container">
        
        <div class="row">
            <div class="col-sm-7">
                <p class="cssInformation">Nam ut tempus lacus, nec porttitor lacus. Integer sit amet lacus risus. Sed pretium justo justo, a faucibus justo pellentesque ac. Nulla lorem ipsum, blandit quis porttitor nec, vestibulum sit amet dui. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras semper fermentum risus, a volutpat nisi interdum eu.</p>
            </div>
            
            <div class="col-sm-5">
                    <img class="img-center img-responsive" src="http://placehold.it/300x300">
            </div>
        </div>

    </div>
</div>

CSS

.cssCenter {
    text-align: center;
}

.cssSection {
    padding: 120px 0 70px;
}

.cssInformation {
    font-size: 18px;
}

.img-center {
    margin: auto;
}

I would greatly appreciate any guidance on correctly aligning the image vertically with the text on the left. Thank you in advance for your help!

htmltwitter-bootstrapcssflexbox

Answer №1

Give this a try and share your thoughts!

I've implemented a flexbox like the following:

.cssSection .row {
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  flex-direction: row;
}

For responsiveness, I have added the following media query:

@media only screen and (max-width: 650px) {

   .cssSection .row {
      flex-direction: column;
    }
}


.cssCenter {
    text-align: center;
}

.cssSection {
    padding: 120px 0 70px;
}

.cssSection .row {
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  flex-direction: row;
}

.cssInformation {
    font-size: 18px;
}

.img-center {
    margin: auto;
}

@media only screen and (max-width: 650px) {

   .cssSection .row {
      flex-direction: column;
    }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<body>
<!-- Section 1 -->
<div class="cssSection cssCenter">
    <div class="container">

        <div class="row">
            <div class="col-sm-7">
                <p class="cssInformation">Nam ut tempus lacus, nec porttitor lacus. Integer sit amet lacus risus. Sed pretium justo justo, a faucibus justo pellentesque ac. Nulla lorem ipsum, blandit quis porttitor nec, vestibulum sit amet dui. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras semper fermentum risus, a volutpat nisi interdum eu.</p>
            </div>

            <div class="col-sm-5">
                    <img class="img-center img-responsive" src="http://placehold.it/300x300">
            </div>
        </div>

    </div>
</div>
  </body>

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

Evaluating the criteria and presenting two distinct notifications with setCustomValidity

When validating text fields in an HTML form, I am looking to check two conditions. Currently, the code below checks if the phone number entered is in the correct format and displays a message 'Enter a valid mobile number' if it is incorrect using ...

javascripthtml

Running a CSS keyframes animation can be achieved by removing the class associated with it

Is there a way to reverse the CSS animation when a class is removed? I'm trying to achieve this on my simple example here: https://codepen.io/MichaelRydl/pen/MWPvxex - How can I make the animation play in reverse when clicking the button that removes ...

javascripthtmlcss

adjusting label widths using jQuery mobile

I am currently using jQuery mobile to develop my user interface, however I am facing an issue with adjusting the width of my labels. Can anyone provide guidance on how to set the width of all my labels to 108px? http://jsfiddle.net/GZaqz/ Check out the c ...

htmljquery-uicssjquery-mobile

Can you provide an example of JSON for a MultiStep Form that includes a variety of control types for viewing

Could someone please provide me with JSON examples of multi-step forms that include various types of controls such as radio buttons, checkboxes, dropdown menus, and calendars? I am in need of JSON for both the view and edit forms. Your help would be grea ...

javascriptjqueryhtmlarraysjson

Tips for transferring data from a table row to a bootstrap modal in Angular 2

Attempting to remove a record from a table involves the user clicking on the delete button, which triggers a confirmation box. Once the user confirms deletion by clicking another delete button in the modal, the record should be deleted. The desired action ...

twitter-bootstrapangular

Tips for creating a multi-line text field with ellipsis using a div in CSS

Similar Question: How to Insert Ellipsis in HTML Tag for Content that is Too Wide Using CSS to Display “…” on Overflowing Multiline Blocks Hello, I am attempting to create a div tag to present a question. The size of this div bo ...

csshtmltextellipsis

What is the Best Way to Toggle the Visibility of Specific Buttons in a Table Using Jquery?

<html> <head> <script> $( "#clickMeButton" ).click(function() { $(this).next("#hiddenButton").slideToggle( "slow", function() { // Animation complete. }); }); </script> </head> <body> <table> <tr& ...

javascriptjqueryhtml

Attempting to divide the main page into quadrants

I want to split my homepage into four equal images without any scrolling. When you click on the website, I want the four images to expand and cover the entire screen with no scrollbars. I've made some progress with my code, but it's not quite the ...

htmlcssimage

Is there a way to redirect links within an iframe when a user decides to open them in a new tab?

I am currently developing a web application that allows users to access multiple services, such as Spark and others. When a user selects a service, like Spark for example, the app will open a new tab displaying my page (service.html) with user information ...

javascriptpythonhtmlweb

jQuery accordion's visibility``onChange in jQuery accordion``

Currently, I am in the final stages of developing my custom Jquery accordion. However, I am facing a challenge with having it start in a closed position without explicitly using $(".wrap-faq li p").slideUp(); before the function, as it automatically slid ...

jquerycsshtmlfunctionaccordion

Executing a jQuery script on various elements of identical types containing different content (sizes)

I am currently working on a jQuery script that will center my images based on the text block next to them. Since I am using foundation 5, I have to use a jQuery script to override the CSS instead of using vertical-align: middle. The script looks like thi ...

javascriptjqueryhtmlcsszurb-foundation

The div element is experiencing a resizing issue

I am currently working on the following HTML markup: <div class="card" style="height:100%"> <div class="controlPanelContainer"> <div class="card" style="background-color:yellow;height:200px"> </div> <div class= ...

cssbootstrap-4

Explore bar with search button

I'm facing an issue with the code I have for searching on my website. Currently, when a user fills in their search word and presses enter, it executes the command. However, I would like to only run the search script when the user clicks a button inste ...

javascriptjqueryhtmlsearch

Achieve a seamless transition for the AppBar to extend beyond the bounds of its container in Material

I am finalizing my app structure by enclosing it within an MUI Container with maxWidth set to false. The issue I'm facing is that the AppBar inside the container doesn't span the full width of the screen due to paddingX property enforced by the c ...

cssreactjssassflexboxmaterial-ui

Persist the checkbox value in the database and update the status of the label accordingly

I need a checkbox for user preference selection that is stored in a MySQL database for constant availability. The label should change to "Enabled" when the checkbox is selected and vice versa. Upon saving (submitting) the page, an alert message should disp ...

javascriptphpjqueryhtml

If an AngularJS Form Item is hidden with jQuery's hide() method, will it still be validated?

Even though we're in 2020, I'm still working with AngularJS 1.x instead of the newer version due to work requirements. Despite this limitation, I am facing a challenge with setting up a form that requires exclusive-or validation between two field ...

javascripthtmljqueryangularjsangularjs-forms

Tips for highlighting a Material UI Button when pressing the Enter key

Once the user has completed the final input, they need to press the save button The 'Tab' key typically moves the focus to the next element (in this case a button), but I want to use the 'Enter' key for this action. Can anyone advise o ...

htmlnode.jsreactjsmaterial-ui

How to retrieve and delete a row based on the search criteria in an HTML table using jQuery

Here is the HTML code snippet: <table class="table" id="myTable"> <tr> <th>Type</th> <th>Counter</th> <th>Remove</th> <th style="display:none;">TypeDistribution</t ...

javascriptjqueryhtmlsearchhtml-table

What is preventing the table from extending to the full 100% width?

Displayed above is an image showing an accordion on the left side and content within a table on the right side. I have a concern regarding the width of the content part (right side) as to why the table is not occupying 100% width while the heading at the ...

javascriptjqueryhtmlcssjqgrid

jQuery - Enhancing User Experience with Dynamic Screen Updates

Is there a way to update the screen height when resizing or zooming the screen? Whenever I zoom the screen, the arrows break. I'm also curious if the method I'm using to display images on the screen is effective. It's supposed to be a paral ...

javascriptjqueryhtmlcss