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

Experiencing difficulties with retrieving form data in req.body using Express and node.js

I am facing an issue while trying to create a registration form for new users with profile picture upload. Despite adding body-parser middleware, the form data is not passing correctly to the route and I cannot identify the reason behind it. Error: D:&bso ...

javascripthtmlnode.jsexpress

When using angular.less, the @import feature is functioning correctly but a 404 error is displayed in the

Currently, I am working on a project using AngularJS along with angular.less. To centralize all my constants, I have stored them in one .less file and imported it at the beginning of all my other less files using a relative path: @import "constants" Even ...

cssangularjsless

What could be the reason my SVG images are not displaying?

My website contains SVGs that are not loading consistently. I acquired some from freeicons/icon8 and created a couple using Inkscape. Initially, I inserted them using HTML but switched to CSS after doing research online on how to ensure they load properly ...

htmlcsssvg

How come my menu is not showing up in the same format as the code?

I'm struggling to make the menu align with the text logo. Every time I try, the menu ends up below the logo instead of beside it. Can anyone provide some assistance? nav{ width: 1330px; margin: 0px auto; } nav ul li{ text-transform: up ...

htmlcss

Ensure that radio buttons are positioned next to their respective labels on separate lines

My HTML form is structured with sections as described below: I prefer having the labels inline to prevent the section from being excessively tall, but I'm facing an issue where the radio buttons are not staying aligned with their respective labels. ...

htmlcssforms

Is there a way to specifically import only variables and mixins from Sass stylesheets?

Using the Zurb Foundation 4 (S)CSS framework has presented a challenge with massively duplicated styles. Each file that I import 'foundation' into brings along all of Foundation's styles, resulting in redundant declarations for body, .row, . ...

cssruby-on-railssasszurb-foundationmodularity

Tips on appending a parameter to an image URL using JavaScript

On my website, I am able to insert images with specified width and height using this code: <img src="image.php?w=100&h=100"> I would like the image size to change based on the device screen width. For screens smaller than 600px, I want to displa ...

javascripthtmlimageurl-parameters

Applying inline styles in PHP using if/else conditions

I want to customize the appearance of my table based on the status of each entry. Specifically, Completed = Green & Pending = Orange This involves PHP code that retrieves data from a MySQL database. $query = mysql_query("SELECT * FROM cashouts WH ...

phphtmlmysqlcss

What is the best way to pass values from PHP to an HTML tag?

My initial HTML document includes a form with radio buttons. I want my second PHP file to display a message based on the user's selection, and include some formatting such as text size and color. file.html: <html> <body> <form action ...

phphtmlforms

What is the method for invoking a function with arguments within an HTML `<p>` element?

I am looking to display like and dislike percentages on cards. <v-card v-if="software[2] == searched || searched == ''" class="software-card" > <h3>{{ software[2] }}</h3> ...

javascripthtmlvue.js

Adjustable Text Size with HTML5 and CSS3

Looking to enhance the accessibility of a website by implementing text size adjustment buttons ' A A A ' using just HTML5 and CSS3. Avoiding the use of jQuery or Javascript for this task. Inspiration drawn from this link. Appreciate any assistan ...

htmlcss

If the user confirms it with a bootstrap dialog box, they will be redirected to the corresponding links

Firstly, I am not interested in using javascript confirm for this purpose. Please read on. For example, adding an onClick attribute to each link with a function that triggers a system dialog box is not what I want. Instead of the standard system dialog bo ...

javascripthtmlcsstwitter-bootstraphttp-redirect

Any suggestions for solving the issue of breaking the line at the end of a <td> within a <table> element using jQuery or JavaScript?

Here is a table format that I have: $(document).ready(function() { var enteredText = document.getElementById("textArea").value; var numberOfLineBreaks = (enteredText.match(/\n/g)||[]).length; var characterCount = enteredText.length + numberOfLineB ...

javascriptjqueryhtml

The HTML anchor tag paired with the italic tag is a powerful combination for

Here is some example code: <a href="#"> <i class="some-bg" /> Some Text </a> Along with some Javascript: $("a").bind("touchstart", function (e) { e.preventDefault(); console.log("Tag: " + e.target); console.log("Tag Nam ...

javascriptjqueryhtml

How can I make an absolutely positioned div slide down from a specific area on the page using jQuery's slideDown() function?

I have a website project in progress where the main image on the homepage is of a house with windows and a door. The idea is that when a user clicks on a window, a <div> should appear with some text. Similarly, clicking on the door should trigger a & ...

jquerycsshtmlcss-positionslidedown

Adjust the height of images to be consistent

I'm currently working on creating a grid layout with 4 images in a row using DaisyUI card component. However, I've run into an issue where there is white space at the bottom of some images due to varying image heights. Is there a solution that wo ...

javascripthtmlcssfrontendtailwind-css

Is it time to advance to the next input field when reaching the maxLength?

In my Vue form, I have designed a combined input field for entering a phone number for styling purposes. The issue I am facing is that the user needs to press the tab key to move to the next input field of the phone number. Is there a way to automaticall ...

javascripthtmlvue.jsnuxt.jsvuelidate

Why is this specific element showing as undefined in the form during editing, but appearing correctly in both the debugger and console.log?

I've encountered an error that keeps popping up: "Cannot read property 'textContent' of undefined at HTMLDocument". This error specifically occurs when dogName, dogBreed, and dogSex are set within the 'click' listener. It's st ...

javascripthtmlfetchpatchjson-patch

Different method for adding child elements to the DOM

When creating a DOM element, I am following this process: var imgEle = document.createElement('img');     imgEle.src = imgURL;             x.appendChild(imgEle); Instead of appending the last line which creates multiple img elements ev ...

javascripthtmlcssdomappendchild

The html function does not contain the value of the textarea

While attempting to retrieve the HTML content of a div using the code below, I noticed that it does not include the text entered in the textarea or input field. var mywindow = $(printDiv).html(); The variable mywindow will contain all the HTML except fo ...

javascriptjqueryhtml