CODEWITHSUNDEEP
csstwitter-bootstrapbuttontextalignment
okass
okass

Reputation: 81

Responsive vertical alignment of text and button

I'm having some trouble ensuring my text and bootstrap button stay in the vertical middle of my bootstrap row as the screen size reduces/expands. There must be an easy way to achieve this...

<div class="cta-promo">
  <div class="container">

    <div class="row">

      <div class="hidden-xs col-sm-7 col-md-7 col-lg-8">
        <p class="cta-promo-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent posuere pharetra rhoncus. Sed et lorem vehicula, tincidunt quam at, pharetra nunc. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus eget mollis magna, a fermentum mauris. Mauris orci neque, egestas nec diam nec, vestibulum vestibulum nibh.</p>
      </div>

      <div class="col-xs-12 col-sm-offset-1 col-sm-4 col-md-offset-1 col-md-4 col-lg-offset-1 col-lg-3">
        <button>Apply for this today</button>
      </div>
    </div>

  </div>

Here's a fiddle https://jsfiddle.net/74vsr332/

The text is hidden on xs view.

Upvotes: 1

Views: 665

Answers (1)

Nenad Vracar
Nenad Vracar

Reputation: 122027

To do this in Bootstrap you can combine Flexbox and media queries and add rule when min-width: 768 because you are using sm DEMO

@media(min-width: 768px) {
  .flex {
    display: flex;
    align-items: center;
  }
}

Upvotes: 2

Related Questions