How can I place all my buttons in the same row and not stack them up on phone view port?

Question

I have a What We Do section. Each section have a title and paragraph, as you can see that the paragraph is not balance between my 3 sections. My goal is a align my Learn More btn. If I place my learn more btn right after each of my <p> tag, they will look horribly uneven.

---

Action

So I decided to create another row with those 3 btns. Well It look great on the desktop/iPad screen , but unfortunately on the phone size, they're stack up on top of each other.

---

Desktop/iPad

---

Phone

I put together what I have here : JSfiddle

Any hints / suggestions on how should I achieve this ?

Answer 1

        <!--Features-->
        <section class="page-block" id="about">
          <div class="container">
            <div class="row page-header">
              <h2 >What We Do</h2>
            </div>
            <div class="row text-center">
              <div class="col-sm-4">
                <div class="feature-img"> <img class="img-center" width="30%" src="img/features/education.png" alt="Tutti.ed"/> </div>
                <h3><a href="/tutti-ed">Tutti.ed</a></h3>
                <p style="text-align: justify;min-height:200px;" >
                  Tutti.ed is an educational software framework that serves as the backbone for robust digital learning products.
                  Your brand, your content, your instructional vision... our technology.
                  View our gallery to see sample products.
                  </p><p><a class="btn btn-success" href="/tutti-ed">Learn more </a></p>
              </div>  
              <div class="col-sm-4">
                <div class="feature-img"> <img class="img-center" width="30%" src="img/features/code.png" alt="Tutti.dev"/> </div>
                <h3><a href="/tutti-dev">Tutti.dev</a></h3>
                <p style="text-align: justify;min-height:200px;" >
                  Tutti.dev makes the work of software professionals easier by facilitating all stages of the software development lifecycle.
                  Tutti.dev was created by developers, for developers. We set out to create the toolset we always wished we had to make our work easier.</p>
                <p><a class="btn btn-success" href="/tutti-ed">Learn more </a></p>
              </div>
              <div class="col-sm-4">
                <div class="feature-img"> <img class="img-center" width="26%" src="img/features/service.png" alt="Services"/></div>
                <h3><a href="/services">Services</a></h3>
                <p style="text-align: justify;min-height:200px;" >
                  Aveniros can help your company in every or any phase of development.
                  We provide tools and development expertise to every project to ensure a successful launch.
                </p><p><a class="btn btn-success" href="/tutti-ed">Learn more </a></p>
              </div>
            </div>
          </div>
        </section>

        and style  is

            .feature-img{
             height:150px;
            }    

Answer 2

This is done using media queries to hide and show content at different widths

I added the buttons under the p content and added bootstrap classes to hide it on small mid and large displays:

<div class="text-center hidden-md hidden-sm hidden-lg"><a class="btn btn-success" href="/tutti-ed">Learn more </a>

and then added a .hidden-xs to the row at the bottom for extra small displays (mobile).

<div class="row hidden-xs">

http://jsfiddle.net/Bosc/edf7mzdm/8/

This can be done using the .hidden-* class .-hidden-md for example will hide the content with this class on mid sized displays. You can see all of the options available at http://getbootstrap.com/css/#responsive-utilities

Answer 3

Try this out, add min-height to p tag:

html:

<div class="container-fluid">
    <div class="row">
        <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
            <div class="box">
                <div class="icon"></div>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book</p>
                <button class="btn btn-default">
                    <span>Button</span>
                </button>
            </div>
        </div>
        <div class="col-xs-12 col-sm-4 col-md-34 col-lg-4">
            <div class="box">
                <div class="icon"></div>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
                <button class="btn btn-default">
                    <span>Button</span>
                </button>
            </div>
        </div>
        <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
            <div class="box">
                <div class="icon"></div>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
                <button class="btn btn-default">
                    <span>Button</span>
                </button>
            </div>
        </div>
    </div>
</div>

css:

@import url('http://getbootstrap.com/dist/css/bootstrap.css');
.box{
    text-align: center;
}
.box .icon{
    height: 50px;
    width: 50px;
    margin: 12px auto;
    border: 1px solid red;
}
.box p{
    display: block;
    text-align: justify;
    font-size: 12px;
    min-height: 100px;
}

JSFiddle Demo

Answer 4

Okay, this is pretty interesting problem. Here is my solution. First of all, using separate row for buttons is a deadend.

You can try to make buttons in positioned relatively to the row and stacked to the very bottom with bottom: 0. This way you will have buttons aligned properly.

You need to make sure that this positioning is active only for non-mobile resolutions. Use media queries for this:

@media (min-width: 768px) {
    .row-relative {
        position: relative;
    }
    .row-relative > div {
        position: static;
    }
    .row-relative .btn-bottom {
        position: absolute;
        bottom: 0;
    }    
}

And HTML:

<div class="row row-relative">
    <div class="col-sm-4">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
        <button class="btn btn-bottom btn-default">Button</button>
    </div>
    <div class="col-sm-4">
        <p>Architecto, volupt iusto beatae quaerat rem voluptas porro cum sint placeat eveniet aliquid quo quas recusandae natus vero quidem. Sit!</p>
        <button class="btn btn-bottom  btn-default">Button</button>
    </div>
    <div class="col-sm-4">
        <p>Eveniet, eum armagnam. Cum, corrupti, velit, iusto similique sapiente at voluptatem cupiditate dolor voluptas consequatur repellendus praesentium ipsum ab porro autem debitis minima expedita.</p>
        <button class="btn btn-bottom  btn-default">Button</button>
    </div>
</div>

Demo: http://plnkr.co/edit/GsnkSYi10XQKgvOUrWv2?p=info