How to move two buttons one to the left and the other to the right in the same inline?

user_9916847 0
Viewed 7052

I'm having trouble placing two buttons in the div. I want the tweet button to the left and the other button, "Next Quote", to the right. I have tried to move the Next-Quote button with position absolute, but when I try to move it to the right, it only moves halfway and not all the way. I have also tried float right and also pull-right, it still does not work. I don't know how to do this. Help...

<div className="container col-md-6 col-sm-offset-3">
  <div id="quote-box">
    <h4 id="text" className="text-md-center"> {this.props.quote.quote}</h4>
    <p id="author" className="text-md-right">- {this.props.quote.author}</p>
  <div className="buttons btn-toolbar">
    <a 
      href="https://twitter.com/share?ref_src=twsrc%5Etfw" 
      className="twitter-btn twitter-share-button"
      data-size="large"
      data-show-count="false"
     >Tweet
     </a>
     <button
       id="new-quote"
       className="btn btn-primary btn-xs pull-right"
       onClick={this.onClick.bind(this)}
     >Next Quote
     </button>
  </div>
 </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
#quote-box {
  padding: 20px;
  border-radius: 10px;
  background-color: red;
}

.btn-toolbar {
  display: flex;
  justify-content: space-between;
}

#new-quote {
  font-size: 13.5px;
  padding: 3px;
}

react-redux reactjs css
4 Answers

This worked for me:

HTML:

<div class="left-btn">
    <button class="btn"></button>
</div>
<div class="right-btn">
    <button class="btn"></button>
</div>

CSS:

.left-btn { float: left; }
.right-btn { float: right; }
user_105293770

Try this way. It is simple. But it works

<ul class="main-nav">
    <li class=""><a href="index.php" class="logo"><img src="images/logo.svg" alt=""></a>
    </li>

    <div class="">
        <li><a href="index.php" class="menu" data-wow-duration="1s" data-wow-delay="0.2">Home</a>
        </li>

    </div>
</ul>

.main-nav {
display: flex;
}

.main-nav li:first-child {
margin-right: auto;
z-index: 3;

}

user_105859580

First, wrap each button in a div:

<div className="buttons-toolbar">
    <div className="left-group">
        <button className="twitter-btn">Tweet</button>
    </div>
    <div className="right-group">
        <button className="btn-primary">Next Quote</button>
    </div>
</div>

Then add some css to control the content within those divs:

.btn-toolbar {
    display: flex;
    justify-content: space-between;
}

.left-group {
    display: flex;
    flex: 1;
    justify-content: flex-start;
}

.right-group {
    display: flex;
    flex: 1;
    justify-content: flex-end;
}
user_31839460

You can also try this solution:

<div class="buttons">
      <button className="twitter-btn">Tweet</button>

      <button className="btn-primary">Next Quote</button>
</div>

Styling goes like this: Add marginLeft to the button you want to push to the left

.buttons {
        display: flex;
}

.btn-primary {
        marginLeft: auto;
        backgroundColor: red;
}
user_141390330
Related