Как сделать так,чтобы телефон и кнопка были на средней линии с логотипом, дабы смотрелось ровно с помощью bootstrap 4?
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="icon" href="../../../../favicon.ico">
<title>Автоматизированная щтукатурка стен</title>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap-grid.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<main>
<div class="container">
<div class="header">
<div class="row justify-content-center">
<div class="col-3">
<img src="img/logo.png" alt="logo">
</div>
<div class="col-2 offset-4">
<a class=" phone-link" href="#">+7 495 771 05 08</a>
</div>
<div class="col-3">
<button class="button header-btn">получить консультацию </button>
</div>
</div>
</div>
</div>
</main>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
</body>
</html>
html {
font-size: 10px;
}
a:hover {
text-decoration: none;
}
.button {
background-color: #fdb303;
color: #ffffff;
padding: 1.3rem 3rem;
border-radius: 5px;
text-transform: uppercase;
border: none;
outline: none !important;
cursor: pointer;
}
/* Typography */
section {
padding: 10rem 0;
}
/* main */
main {
padding: 3rem 0;
}
.phone-link {
text-decoration: none;
display: inline-block;
color: #1a1820;
font-weight: 700;
font-size: 1.5rem;
}
Простой
