CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
tryintolearn
tryintolearn

Reputation: 53

template and p tag in the same line

https://jsfiddle.net/dhaileytaha/ghuj4jL8/7/ as in the above fiddle i need the p tag on the left hand side and the template on the right hand side at the same level

 <p>abcdefg</p>
 <!-- Offers List - START -->
  <div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
        <div class="listing listing-default">
            <div class="shape">
                <div class="shape-text">buy</div>
            </div>
            <div class="listing-content">
                <h3 class="lead">Standard listing</h3>
                <p>Buy items on normal prices. No discounts available for this listing.</p>
            </div>
        </div>
      </div>
    </div>
  </div>
<p>uvwzyx</p>

Upvotes: 0

Views: 107

Answers (1)

Lucfia
Lucfia

Reputation: 671

The basic is always

<div class="row">
    <div class="col-...">column1</div>
    <div class="col-...">column2</div>
    ...
</div>

12 columns represent the whole width.

Bootstrap grid

The example has three columns:

<div class="row">
    <div class="col-xs-2 col-sm-2 col-md2">
      <p>abcdefg</p>
    </div>
    <div class="col-xs-8 col-sm-8 col-md-4 col-lg-4">
        <div class="listing listing-default">
            <div class="shape">
                <div class="shape-text">buy</div>
            </div>
            <div class="listing-content">
                <h3 class="lead">Standard listing</h3>
                <p>Buy items on normal prices. No discounts available for this listing.</p>
            </div>
        </div>
    </div>
    <div class="col-xs-2 col-sm-2 col-md2">
      <p>uvwzyx</p>
    </div>
</div>

JSFiddle

Upvotes: 1

Related Questions