top
below
.content {
background: yellow;
padding-top: 40px;
padding-bottom: 40px;
}
.black-container {
background: black;
display: flex;
}
.social-button {
display: flex;
justify-content: center;
width: 40px;
height: 40px;
font-size: 16px;
background: white;
border: none;
border-radius: 50%;
}
.blue-container {
background: blue;
}
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div class="container content">
<div class="row">
<div class="black-container col-xs-6">
<button type="button" name="button" class="social-button"><i class="icon-social-facebook"></i></button>
<button type="button" name="button" class="social-button"><i class="icon-social-facebook"></i></button>
</div>
<div class="blue-container col-xs-6 text-right">
<p>testing <a href="">TEST</a> testing</p>
</div>
</div>
</div>
</body>
</html>
Just use flexbox for your row, and don't forget to add prefix for cross browser
.content {
background: yellow;
padding-top: 40px;
padding-bottom: 40px;
}
.row {
/* Safari 6.1+ */
display: -webkit-box;
/* IE 10 */
display: -ms-flexbox;
/* standard*/
display: flex;
/* Safari 6.1+ */
-webkit-box-align: center;
/* IE 10 */
-ms-flex-align: center;
/* standard*/
align-items: center;
}
.black-container {
background: black;
display: flex;
}
.social-button {
display: flex;
justify-content: center;
width: 40px;
height: 40px;
font-size: 16px;
background: white;
border: none;
border-radius: 50%;
}
.blue-container {
background: blue;
}
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div class="container content">
<div class="row">
<div class="black-container col-xs-6">
<button type="button" name="button" class="social-button"><i class="icon-social-facebook"></i></button>
<button type="button" name="button" class="social-button"><i class="icon-social-facebook"></i></button>
</div>
<div class="blue-container col-xs-6 text-right">
<p>testing <a href="">TEST</a> testing</p>
</div>
</div>
</div>
</body>
</html>