Having trouble aligning these buttons horizontally. Any suggestions? I've been tinkering with this for a couple of hours now, so decided to seek help here. The desired effect should resemble the image below, but it's not quite there yet. Thank you in advance for any responses, much appreciated.
css
.image{
float: right;
height: 680px;
}
blockquote {
background: url(http://www.studiopress.com/wp-content/uploads/bg-quote1.png) no-repeat;
color: #a5a4a4;
font-style: italic;
margin: 30px;
padding: 30px 30px 30px 50px;
}
/* Google Fonts */
@import url(http://fonts.googleapis.com/css?family=Open+Sans);
.link {
border-bottom: 2px dotted #55acee;
text-decoration: none;
color: #55acee;
transition: .3s;
-webkit-transition: .3s;
-moz-transition: .3s;
-o-transition: .3s;
}
.link:hover {
color: #2ecc71;
border-bottom: 2px dotted #2ecc71;
}
/* css for the shiny buttons */
.bb {
cursor: pointer;
margin: 10px;
border-radius: 5px;
text-decoration: none;
padding: 50px;
font-size: 22px;
transition: .3s;
-webkit-transition: .3s;
-moz-transition: .3s;
-o-transition: .3s;
display: inline-block;
}
.bb:hover {
cursor: url(http://cur.cursors-4u.net/symbols/sym-1/sym46.cur), auto;
}
.blue {
color: #55acee;
border: 2px #55acee solid;
}
.blue:hover {
background-color: #55acee;
color: #fff
}
.green {
color: #2ecc71;
border: 2px #2ecc71 solid;
}
.green:hover {
color: #fff;
background-color: #2ecc71;
}
.red {
color: #e74c3c;
border: 2px #e74c3c solid;
}
.red:hover {
color: #fff;
background-color: #e74c3c;
}
.purple {
color: #9b59b6;
border: 2px #9b59b6 solid;
}
.purple:hover {
color: #fff;
background-color: #9b59b6;
}
.orange {
color: #e67e22;
border: 2px #e67e22 solid;
}
orange:hover {
color: #fff;
background-color: #e67e22;
}
.yellow {
color: #f1c40f;
border: 2px #f1c40f solid;
}
.yellow:hover {
color: #fff;
background-color: #f1c40f;
}
.buttons {
padding-top: 30px;
text-align: center;
}
</style>
html
<br><br><br><br>
<div class="container">
<div class="jumbotron">
<img class="image" src="../assets/media/img/laskaniemiecka.png">
<div class="blockq">
<blockquote> The blockquote element is a mechanism for marking up a block of text quoted from a person or another document or source. It may be just a few lines, or it may contain several paragraphs.</blockquote>
</div>
<div class="buttons" style="font-family: 'Open Sans', 'sans-serif';">
<div class="bb blue">Powtórki</div>
<div class="bb purple">Lekcje audio</div>
</div>
<br><br><br><br><br>
</div>
</div>