'bootstrap nav items and flex items centering

I have a basic bootstrap navigation with navbar logo and brand name. Also 2 items with "Home" and "Others". And below navigation, I have 2 divs in flex. Here is my simple code in CodePen.

My problems are:

  • Navbar-items (home and others) going right and not centered on main nav class. I tried bootstrap's "justify-content-center" but items are centered on child div.
  • "hello-user" div should be centered on user-wrapper div. But it centered on hello-user div right now.
  • "today-field" div should be on right. I achieve that goal.

Here is result: result

Here is what I need: achieve

Here is my CSS. You can check all code from CodePen.

body {
  font-family: "Merriweather", sans-serif;
  background-color: #fafafa;
}

.navbar-brand {
  color: #ffffff !important;
  margin-left: 1%;
}

.navbar-custom {
  background-color: #8a68ff;
}

.navbar-nav li a {
  color: #ffffffc0;
}

.navbar-custom .navbar-nav > li > a:hover,
.navbar-custom .navbar-nav > li > a:focus {
  color: #ffffff;
}

.active {
  font-weight: 600;
  border-bottom: 1px solid #ffffff;
  color: #ffffff !important;
}

.hello-userID .today-field {
  font-weight: 400;
  font-size: 24px;
}

.bold-userID {
  font-weight: 700;
  font-size: 32px;
}

.user-wrapper {
  display: flex;
}

.hello-user {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-left: auto;
}

.today-field {
  display: flex;
  align-items: center;
  float: right;
  margin-left: auto;
}

.hello-userID {
  margin-left: 15px;
}
htmlcsstwitter-bootstrap


Solution 1:[1]

If you add to the .navbar-nav this properties

.navbar-nav {
    margin-right: 166px !important;
}

On the other hand you can give a class to the image which one under the job-logo div class, like this:

<img src="https://image.pngaaa.com/96/2278096-middle.png" width= 70, height= 77 alt="user-job-logo" class="tooth" />

And add this properties to the tooth class

.tooth {
  margin-left: 150px;
}

finally looks like this:

Tooth

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions