[Solved] Bootstrap – middle p in column

[Ruegen]

Need some help with twitter bootstrap

I’m using two columns at md-6 and in the first I have an image with “im-responsive”

I’m trying to make the content in the second column (same, col-md-6) to be vertically in the middle. I add paragraphs as content and sometimes images however whatever it is it needs to be centred.

This link below works however the text moves into it’s own column per paragraph – I want it to spread across the column.
https://css-tricks.com/almanac/properties/f/flex-direction/

any suggestions?

[tomhanson1985]

if you could supply a codepen or something similar with your basic code in it that would be really handy to help A. identify and B. fix it.

[Ruegen]

Hi tomhanson1985

How do I paste in code on this forum? I have tried the “code” tag

markdown… oh

[Ruegen]

the image is 600px in height – this makes the column to that size.

    <!-- CONTENT -->
<div class="container custom-background custom-nav20" >

  <div class="row vertical-align">

             <div class="col-md-6 col-xs-12" >
                 <img class="img-responsive" src="GDayAsia/images/P1010231.png"  />
             </div>


             <div class="col-md-6 col-xs-12">


<p>Lorem ipsum consectetur interdum suscipit quam fermentum scelerisque vehicula suspendisse, nullam arcu porta vivamus litora dictumst etiam suspendisse, ullamcorper phasellus ultricies auctor facilisis cursus imperdiet feugiat.</p>
<p>Nisl in pulvinar leo nibh integer platea a fermentum fusce, mollis aptent dapibus ornare ultricies cras semper aliquam auctor habitant, bibendum curabitur condimentum sagittis dapibus ad convallis risus egestas odio consequat augue blandit egestas tincidunt.</p>
<p>Vulputate porttitor phasellus quisque lorem tortor quam turpis tortor gravida leo, pulvinar volutpat suspendisse enim egestas aenean imperdiet orci nam rhoncus, massa mi lorem duis vehicula platea consequat a eu.</p>
<p>Aliquet vel mauris maecenas duis sem rhoncus conubia class, mollis sollicitudin morbi euismod nisl faucibus etiam consectetur etiam, nec aliquam molestie sed orci fames pulvinar mi integer orci vehicula orci purus ut.</p>
<p>Viverra lorem euismod curabitur himenaeos dictumst interdum curabitur etiam suscipit auctor ullamcorper ut porta semper metus lorem per molestie convallis himenaeos sagittis ultricies duis hendrerit.</p>






             </div>

    </div>
  </div>

[Ruegen]

Nevermind – sorted it out using this

http://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/

[Author]

Posts