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;
}
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; }
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;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With