user3494047 February 2016

Put two objects in the same row with bootstrap

I have here my example in fiddle. I am using bootstrap. What I want to do is have the '150' and the 'points' be in the same row right next to each other. Is this possible? How can I do this?

My html looks like this:

<div class="container">
 <div class="row">
  <div class="col-md-6">
   <h4>Content Submissions: </h4>

  </div>
  <div class="col-md-6">
   <div class="col-md-4 pull-right">
     <h2>user name</h2>
     <div class="row-fluid">
      <h2><strong>150 </strong></h2>
      <p><small>Points</small></p>
     </div>
     <a href="#" class="btn btn-success btn-block"> Account Settings </a>
   </div>
  </div>
 </div>
</div>

Answers


ketan February 2016

Use following css:

.row-fluid {
    display: flex;
}

h2 {
    margin-top: 0;
}

Working Fiddle


sukesh sudharman February 2016

hi i have made few changes to your html, try this

<div class="container">
  <div class="row">
    <div class="col-md-6">
      <h4>Content Submissions: </h4>

    </div>
    <div class="col-md-6">
      <div class="col-md-4 pull-right">
        <h2>user name</h2>
        <div class="row-fluid">
         <div class="col-lg-6 col-xs-6">
         <h2><strong>150 </strong></h2>
         </div>
         <div class="col-lg-6 col-xs-6">
         <p><small>Points</small></p>
        </div>
        </div>
        <a href="#" class="btn btn-success btn-block"> Account Settings </a>
      </div>
    </div>
  </div>
</div>


<style>
    h2{margin:0;}
</style>


saranyakl February 2016

.row-fluid {
    display: flex;
    align-items: center;
}

h2 {
    margin-top: 0;
    margin-right: 10px;
}

Post Status

Asked in February 2016
Viewed 2,577 times
Voted 11
Answered 3 times

Search




Leave an answer