Add pulled-right button in bootstrap theme

Question

I've been using this bootstrap example: https://getbootstrap.com/docs/4.1/examples/offcanvas/

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

     <div class="d-flex align-items-center p-3 my-3 text-white-50 bg-dark rounded box-shadow">
    <img class="mr-3" src="https://getbootstrap.com/docs/4.1/assets/brand/bootstrap-outline.svg" alt="" width="48" height="48">
    <div class="lh-100">
      <h6 class="mb-0 text-white lh-100">Bootstrap</h6>
      <small>Since 2011</small>
    </div>
  </div>

I wanted to add a button on the right side of this but pull-right won't work: Desired result

Any ideas how can I work it out in the code?

score 2 · Accepted Answer · answered Jul 07 '18 at 15:07

Move the small tag out of the 1h-100 div and add class ml-auto to it

 <small class="ml-auto text-white">Since 2011</small>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="d-flex align-items-center p-3 my-3 text-white-50 bg-dark rounded box-shadow">
  <img class="mr-3" src="https://getbootstrap.com/docs/4.1/assets/brand/bootstrap-outline.svg" alt="" width="48" height="48">
  <div class="lh-100">
    <h6 class="mb-0 text-white lh-100">Bootstrap</h6>
    
  </div>
  <small class="ml-auto text-white">Since 2011</small>
</div>

Hamad · Answer 2 · 2018-07-07T15:07:05.323

0

Yeffet I have modified your code, Kindly have a look over it. It seems fine on my browser, i have use float properties based on Custom CSS Styling. Feel free to ask any question If the Code Solve your problem, then Vote Up to Acknowledge our effort.

Thank You.

Best Wishes,

<html>
<style>
.mb-0{
float:left;
}
.small{
color:red;
float:right;
margin-left:70%;
margin-top:20px;
}
.clear{
clear:both;
}
</style>
  <div class="d-flex align-items-center p-3 my-3 text-white-50 bg-purple rounded box-shadow">
    <img class="mr-3" src="https://getbootstrap.com/docs/4.1/assets/brand/bootstrap-outline.svg" alt="" width="48" height="48">
    <div class="lh-100 row">
      <h6 class="mb-0 text-white lh-100 col-md-6">Bootstrap</h6>
      <small style="" class="small">Since 2011</small>
      <div class="clear"></div>
    </div>
  </div>
</html>

edited Jul 07 '18 at 15:07

answered Jul 07 '18 at 14:33

Hamad

161
2
12

Yes @D.Yeffet Let me Manage the Code for float right – Hamad Jul 07 '18 at 15:04
Kindly give me 2 minutes – Hamad Jul 07 '18 at 15:04
Wow @D.Yeffet Magic happens the Code Works : ) Let me share the Edited Code. – Hamad Jul 07 '18 at 15:05
Kindly check the Code Now @D.Yeffet It's working fine now, check and let me know , if correct kindly Vote Up. Thank You – Hamad Jul 07 '18 at 15:08

score 0 · Answer 3 · answered Jul 07 '18 at 14:44

0

As pull-right is replaced with float-right in bootstrap 4 suggested by this stackoverflow answer so try using that.

answered Jul 07 '18 at 14:44

captainchhala

831
1
7
14

do you have some custom css applied ? – captainchhala Jul 07 '18 at 14:51

Add pulled-right button in bootstrap theme

3 Answers3