Issue with Bootstrap small column vertical alignment not functioning as expected

I am working on a bootstrap layout with two columns. One column contains multiple elements and text, making it quite long, while the other column only has an image. I am trying to center this image vertically within the left column of content. Here is the code snippet:

<div class="row">
  <div class="col-sm-6 features">
    <div class="col-sm-12">
      This column is filled with content and can stretch up to 700px.
    </div>
  </div>
  <div class="col-sm-6 small-column-align">
    <img src="inc/img/robot-warrior.jpg" width="717" height="837" alt="" style="max-width:80%; height:auto;"/>
  </div>
</div>

Here is my CSS for the "small-column-align" class:

.small-column-align{
    display: inline-block;
    vertical-align: middle;
    float: none;
}

However, despite this code, the image in the right column remains aligned to the top. Any suggestions on how to correct this?

htmlcsstwitter-bootstrap-3

Answer №1

The issue stems from setting the column width to col-sm-6 for both divs, causing them to stack vertically. Instead, try changing it to col-sm-5 for both and add the "small-column-align" class to each div as well.

Here's the updated HTML code:

<div class="row">
<div class="col-sm-5 small-column-align">
    <p>This is a text content for sm 5</p>
    <p>This is a text content for sm 5</p>
    <p>This is a text content for sm 5</p>
    <p>This is a text content for sm 5</p>
    <img src="http://labs.sogeti.com/wp-content/uploads/2015/03/google-car.jpg" width="717" height="837" alt="" style="max-width:80%; height:auto;"/>


    <p>This is a text content for sm 5</p>
    <p>This is a text content for sm 5</p>
    <p>This is a text content for sm 5</p>
    <p>This is a text content for sm 5</p>
</div>
<div class="col-sm-5 small-column-align">


    <p>This is a text content for sm 5</p>
    <p>This is a text content for sm 5</p>
    <img src="http://labs.sogeti.com/wp-content/uploads/2015/03/google-car.jpg" width="717" height="837" alt="" style="max-width:80%; height:auto;"/>
    <p>This is a text content for sm 5</p>
    <p>This is a text content for sm 5</p>
</div>

In the CSS section, make sure to include the following style for the "small-column-align" class:

.small-column-align {
    display: inline-block;
    vertical-align: middle;
    float: none;
}

You can also view a working example here.

If you have any feedback or questions, feel free to let me know!

-Leo

Answer №2

Could you give this a shot?

.features-wrap {
  display: flex;
  align-items: center;
}

.features-wrap > div {
  float: none;
  display: inline-block;
}

.features {
  flex: 1;
}

.small-column-align {
  width: 10%;
  position: relative;
}
<div class="row features-wrap">
  <div class="col-sm-6 features">
    <div class="col-sm-12">
      This column has lots of content and expands to around 700px
    </div>
  </div>
  <div class="col-sm-6 small-column-align">
    <img src="inc/img/robot-warrior.jpg" width="717" height="837" alt="" style="max-width:80%; height:auto;"/>
  </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

Unable to get CSS transition to function properly after adding a class using jQuery

I am trying to create a hover effect that shows an image when the mouse is over a specific div, but for some reason, the transition is not working as expected. I understand that using visibility: hidden cannot be animated. Here is the code snippet: $(d ...

javascripthtmljquerycss

Adjust the width of the unordered list to match the width of its widest child element

I'm encountering a minor issue with displaying a ul element as I am just starting to learn CSS. My goal is to set the width of my ul to match the widest listitem it contains. Below is the HTML code I have used: <div id="sidebar"> <ul i ...

jqueryhtmlcss

What is the best way to showcase two data frames side by side in an HTML template or webpage without using frames?

Is there a way to showcase two data frames side by side in an html template? <h3> TITLE </h3> {{stat1 | safe}}. {{stat | safe}} I attempted the above solution, but unfortunately it only displays the data frames vertically stacked instead of ...

pythonhtmlpython-3.xflaskjinja2

Designing a fixed bottom footer enclosed within a wrapper that expands from the top header to the bottom footer

I have created the basic structure of my webpage using HTML / CSS. However, I now realize that I need a sticky footer that remains at the bottom of the screen with a fixed position. Additionally, I want the main content area, known as the "wrapper," to str ...

javascriptjqueryhtmlcss

What are the best strategies for ensuring this website is fully optimized for all devices

Hi there, I've been struggling to make the header on my website responsive, but it doesn't appear to be functioning properly. Any assistance would be greatly appreciated. <!DOCTYPE html> <html lang="en"> <head> <meta name="v ...

htmlcssweb

Is the float floating within another float?

This question may have a strange title, but I couldn't think of anything better to call it. So, here's the situation: I have a grid layout where I need my .search-wrapper to be 50% wide and floated to the right. In my demonstration on jsfiddle, ...

csscss-float

The value in the textarea will stay unchanged even after the form has been submitted

I recently resolved my previous issue, but now I am seeking advice on how to prevent a textarea from clearing its input after submitting a form. You can view the jsFiddle here: http://jsfiddle.net/rz4pnumy/ Should I modify the HTML form? <form id="for ...

javascriptjqueryhtmlforms

Ways to retain specific div elements following the execution of .html(data) command

Imagine I have a div structured in this way: <div id = "foo" style = "display: grid"> <div id = "bar"> keep me! </div> </div> If I use JQuery's .html(data) method like shown below: $('#foo').html(data); when m ...

javascriptjqueryhtml

Is it possible to create a fading effect on an image using a border-radius of 50%?

Struggling with fading out an image that's circular in shape due to the border-radius: 50%. <section id="main"> <h1>Non-Important-Text</h1> <h4> it's all fun and games until you can't find a damn sol ...

htmlcss

Using jQuery to retrieve the values of two distinct sliders and executing a specific mathematical operation

I have two sliders with their own values and properties: https://i.stack.imgur.com/3OZqr.gif My goal is to retrieve the values of these two sliders and calculate a result that will be displayed next to the interest label. The calculation formula is: poun ...

javascriptjqueryhtml

How is it possible for a JavaScript variable sharing the same name as a div Id to automatically pass the div?

This is just ridiculous. Provided HTML <p id = "sampleText"></p> Javascript var sampleText = "Hello World!"; Execution console.log(sampleText); // prints <p id = "sampleText"></p> How is this even possible? I ...

javascripthtmlcss

Printing Apex Oracle reports using Internet Explorer

I am facing a challenge with printing my page that contains two interactive reports. To enable printing, I have utilized a JavaScript function that triggers window.print(). I have incorporated CSS to adjust the layout of my tables when printed. @media pr ...

javascriptcssoraclemediaoracle-apex

Implementing dynamic database content into a Wow Slider on a jQuery Mobile platform

I am currently using static data in a slider with wow slider jquery mobile. However, I would like to retrieve data from a database and display it in the slider. Can someone provide suggestions on how to do this? Thank you. <script type="text/javascri ...

phphtmljquery-mobile

Element not found: {"method":"name","selector":"markUp"}

Snippet : System.setProperty("webdriver.chrome.driver", "C:\\Users\\pkshirs3\\SeleniumMaterial\\chromedriver.exe"); WebDriver webDriver = new ChromeDriver(); String urlToBeUsed = "internalURL"; webDri ...

javahtmlselenium-webdriver

Modifying button appearance upon clicking using JavaScript

JavaScript: const buttons = document.getElementsByClassName("togglebtn"); for (let i = 0; i < buttons.length; i++) { buttons[i].onclick = function () { this.classList.toggle("active"); } } html: <md-butt ...

javascripthtmlcssangularjs

The alignment in Firefox and Google Chrome does not appear to be consistent

The appearance of the content is correct in Google Chrome but incorrect in Firefox. Does anyone have any suggestions on how to fix this for Firefox? ...

htmlcsspositionlesscss-position

What can be done to improve the elegance of this jQuery function?

I am facing an issue on my webpage where I have a drop-down select box with a default value of (empty). The problem arises when the user selects an entry, and the appropriate form for that entry type should be displayed. However, there are a couple of iss ...

javascriptjqueryhtmlformshtml-select

Implementing AJAX notifications in a contact form integrated with PHP, Google reCAPTCHA, and SweetAlert

I've implemented an AJAX script to handle the submission of a basic contact form with Google reCAPTCHA at the end of my HTML. Here's the relevant HTML code: <div class="col-md-6"> <form role="form" id="form" action="form.php" method ...

javascriptphpjqueryhtmlforms

display data labels within the chart - utilizing the power of angular.js in conjunction with chart.js

My goal is to display the chart's information without requiring the user to hover over any part of the chart. I am utilizing Chart.js with Angular.js I have the same question as this one posted here: question here! html code: <div class="wrapper ...

javascripthtmlangularjschart.jsangular-chart

How can we ensure that the borders of a text field automatically adjust to fit the dimensions of the text field using CSS?

I've encountered an issue with the borders of text fields while working on a project involving CSS/HTML. The problem is that in the browser, the borders appear shorter than the text fields. Initially, I attempted to adjust the border size to match th ...

htmlcss