How to align elements through bootstrap 4 vertically?

T

Tempest992019-05-12 23:31:17

css

Tempest99, 2019-05-12 23:31:17

How to make the phone and the button be in the middle line with the logo so that it looks straight using 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;
}

Reply

Answer the question

In order to leave comments, you need to log in

3 answer(s)

A

Anton Shamanov, 2019-05-13
@SilenceOfWinter

Bootstrap switched to flex, read the flex manual first, and then master https://getbootstrap.com/docs/4.3/utilities/flex/

S

Shohruh Shaimardonov, 2019-05-12
@joeberetta

Top google search please

A

Alexander Sharomet, 2019-05-13
@sharomet

<div class="row justify-content-center align-items-center"> <!-- добавьте класс align-items-center -->
...