CODEWITHSUNDEEP
htmlcssmdbootstrap
user12944651
user12944651

Reputation:

Bootstrap | Inline element inside same div

i have a <div class="col-md-12"></div> i want the two element stay on to text-align:left and another to the right, but i want, when the div is seen in mobile vision, that an element does not go below and one above but are aligned how can I do?

example: 

<div class="col-md-12">
    <p style="text-align: left;" id="element_one">1</p>
    <p style="text-align: right;" id="element_two">1</p>
</div>

Upvotes: 2

Views: 549

Answers (3)

xiedzu1503
xiedzu1503

Reputation: 33

You can use Text alignment:

    <div class="container-fluid">
  <div class="row">
    <div class="col-sm-6 text-left">
      Left content
    </div>
    <div class="col-sm-6 text-right">
      Right content
    </div>
  </div>
</div>

Here you can find more info and examples: https://mdbootstrap.com/docs/jquery/utilities/text/#text-alignment

Upvotes: 0

Sahil Kharya
Sahil Kharya

Reputation: 93

format using bootstrap grid structure

    <div class="row">
        <div class="col-6 text-left">
            <p id="element_one">1</p>
        </div>
        <div class="col-6 text-right">
            <p  id="element_two">1</p>
        </div>
    </div>

Upvotes: 0

znatno
znatno

Reputation: 93

You need to use Bootstrap's Float class, not just aligning of the text element. In your case it will be:

<div class="row">
    <div class="col-md-6" style="background-color: aqua">
        <span class="float-md-left">1</span>
    </div>
    <div class="col-md-6" style="background-color: palevioletred">
        <span class="float-md-right">2</span>
    </div>
</div>

Live example:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-sm-6" style="background-color: aqua">
      <span class="float-sm-left">1</span>
    </div>
    <div class="col-sm-6" style="background-color: palevioletred">
      <span class="float-sm-right">2</span>
    </div>
  </div>
</div>

Upvotes: 1

Related Questions