Twitter Bootstrap Question posted in

Why my elements are not towards the right?-Twitter bootstrap

I have 4 elements at the bottom of my purple headband, but I will want to put my 4 elements towards the right.

enter image description here

By adding this line

.top-bar .top-bar-right { 
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

My elements are towards the right. However, my elements are not inside of the purple headband.

enter image description here

I don’t understand why ?

Do have you an idea please?
Thank you in advance.

body {
    color: #797979;
    background: #ffffff;
    font-family: 'Open Sans', sans-serif;
}

h1,
h2, 
h3, 
h4,
h5, 
h6 {
    color: #343148;
}


.container-fluid {  
    max-width: 1366px;
}

.top-bar { 
    position: relative;
    height: 35px;
    background: #343148;
}

.top-bar .top-bar-left { 
    display: flex;
    align-items: center;
    justify-content: flex-start;
}


.top-bar .text { 
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    height: 35px;
    padding: 0 10px;
    text-align: center;
    border-left: 1px solid rgba(255, 255, 255, .15);
}

.top-bar .text i {  
    font-size: 13px;
    color: #ffffff;
    margin-right: 5px;
}

.top-bar .text h2 { 
    color: #eeeeee;
    font-weight: 400;
    font-size: 13px;
    letter-spacing: 1px;
    margin: 0;
}

.top-bar .text p { 
    color: #eeeeee;
    font-size: 14px;
    font-weight: 400;
    margin: 0 0 0 5px;
}

.top-bar .text:last-child { 
    border-right: 1px solid rgba(255, 255, 255, .15);
}

.top-bar .top-bar-right { 
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
<!doctype html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title>YOOGA </title>
        <meta content="width=device-width, initial-scale=1.0" name="viewport">
        <meta content="Free Website Template" name="keywords">
        <meta content="Free Website Template" name="description">

        <!-- Favicon -->
        <link href="img/favicon.ico" rel="icon">

        <!-- Google Font -->
        <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700;800&display=swap" rel="stylesheet">

        <!-- CSS Libraries -->
        <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
        <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0/css/all.min.css" rel="stylesheet">
        <link href="lib/animate/animate.min.css" rel="stylesheet">
        <link href="lib/flaticon/font/flaticon.css" rel="stylesheet"> 
        <link href="lib/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet">
        <link href="lib/lightbox/css/lightbox.min.css" rel="stylesheet">

        <!-- Template Stylesheet -->
        <link rel="stylesheet" href="css/style.css">
        <link rel="stylesheet" href="css/header.css">
    </head>

  <body>
      <!-- Top Bar Start -->
      <div class="top-bar">
        <div class="container-fluid">
              <div class="top-bar-left">
                <div class="text">
                  <i class="far fa-clock"></i>
                  <h2>8:00 - 9:00</h2>
                  <p>Mon - Fri</p>
                </div>
                <div class="text">
                  <i class="fa fa-phone-alt"></i>
                  <h2>+123 456 7890</h2>
                  <p>For Appoitment</p>
                </div>
              </div>
              <div class="top-bar-right">
                <div class="social">
                    <a href=""><i class="fab fa-twitter"></i></a>
                    <a href=""><i class="fab fa-facebook-f"></i></a>
                    <a href=""><i class="fab fa-linkedin-in"></i></a>
                    <a href=""><i class="fab fa-instagram"></i></a>
                </div>
              </div>
        </div>
      </div>

  </body>
</html>
Tags:

3

Answers


  1. 0

    That’s because you’re missing display:flex; in the parent tag container

    body {
    color: #797979;
    background: #ffffff;
    font-family: 'Open Sans', sans-serif;
}

h1,
h2, 
h3, 
h4,
h5, 
h6 {
    color: #343148;
}


.container-fluid {  
    max-width: 1366px;
    display:flex;
}

.top-bar { 
    position: relative;
    height: 35px;
    background: #343148;
}

.top-bar .top-bar-left { 
    display: flex;
    align-items: center;
    justify-content: flex-start;
}


.top-bar .text { 
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    height: 35px;
    padding: 0 10px;
    text-align: center;
    border-left: 1px solid rgba(255, 255, 255, .15);
}

.top-bar .text i {  
    font-size: 13px;
    color: #ffffff;
    margin-right: 5px;
}

.top-bar .text h2 { 
    color: #eeeeee;
    font-weight: 400;
    font-size: 13px;
    letter-spacing: 1px;
    margin: 0;
}

.top-bar .text p { 
    color: #eeeeee;
    font-size: 14px;
    font-weight: 400;
    margin: 0 0 0 5px;
}

.top-bar .text:last-child { 
    border-right: 1px solid rgba(255, 255, 255, .15);
}

.top-bar .top-bar-right { 
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
        <head>
        <!-- CSS Libraries -->
        <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
        <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0/css/all.min.css" rel="stylesheet">
        <link href="lib/animate/animate.min.css" rel="stylesheet">
        <link href="lib/flaticon/font/flaticon.css" rel="stylesheet"> 
        <link href="lib/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet">
        <link href="lib/lightbox/css/lightbox.min.css" rel="stylesheet">

        <!-- Template Stylesheet -->
        <link rel="stylesheet" href="css/style.css">
        <link rel="stylesheet" href="css/header.css">
    </head>

  <body>
      <!-- Top Bar Start -->
      <div class="top-bar">
        <div class="container-fluid">
              <div class="top-bar-left">
                <div class="text">
                  <i class="far fa-clock"></i>
                  <h2>8:00 - 9:00</h2>
                  <p>Mon - Fri</p>
                </div>
                <div class="text">
                  <i class="fa fa-phone-alt"></i>
                  <h2>+123 456 7890</h2>
                  <p>For Appoitment</p>
                </div>
              </div>
              <div class="top-bar-right">
                <div class="social">
                    <a href=""><i class="fab fa-twitter"></i></a>
                    <a href=""><i class="fab fa-facebook-f"></i></a>
                    <a href=""><i class="fab fa-linkedin-in"></i></a>
                    <a href=""><i class="fab fa-instagram"></i></a>
                </div>
              </div>
        </div>
      </div>

  </body>
    Login or Signup to reply.
  2. 0

    append below code to css file

    
.container-fluid {
    display: flex;
    justify-content: space-between;
}
    Login or Signup to reply.
  3. 0

    Add CSS code it should work.

    .container-fluid {
display: flex;
justify-content: space-between;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search