I am having a tough time aliging my two divs in the same row. I am using bootstr

Question

I am having a tough time aliging my two divs in the same row. I am using bootstrap to do this, but my second div keeps falling into the next row. I even checked my columns, and everything seems correct. But it is not working. It looks fine when I am using it via desktop, but when I use a cell phone emulator in Goggle it does not display properly.




<div class="container ">
<div class="panel panel-primary">
<div class="panel-heading">Product </h3></div>
<div class="panel-body">
<div class="row">
<div class="col-md-6">
<h4>###</h4>
<p>999</p>
</div>
<div class="col-md-6 text-right">
   <h4>Date</h4>
<p>7/25/2017</p>
</div>
</div>
<div class="row">
<div class="col-md-6 col-centered text-center">
<div>
<div class="alert-info"> <h4>Amount</h4>
<p class="alert-info">$25</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Explanation / Answer

Here is code:

<div class="container ">
<div class="panel panel-primary">
<div class="panel-heading">Product </h3></div>
<div class="panel-body">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<h4>###</h4>
<p>999</p>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 text-right">
    <h4>Date</h4>
<p>7/25/2017</p>
</div>
</div>
<div class="row">
<div class="col-md-6 col-centered text-center">
<div>
<div class="alert-info"> <h4>Amount</h4>
<p class="alert-info">$25</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Related Questions

Navigate

• Browse (All)
• Browse I
• Subjects

Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.