Bootstrap: problems create web header

Question

I'm making a web with bootstrap and I need to create an specific header but I have problems.

The image below is what I have to do:

and the image below here is what I have made:

The code I'm using is:

#wrapper {
      background-color: #F2F2F2;
      height: 100%;
    }
    
    .navbar {
      background-color: #000000;
      color: #FFFFFF;
    }
    
    #profile {
      border-radius: 100%;
    }

<meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div id="wrapper">
      <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <div class="nav navbar-left top-nav">
          <img id="profile" width="50px" src="assets/images/nobody.jpg">
          <p>Nombre y apellido usuario</p>
        </div>
        <div class="navbar-header">
          <img src="assets/images/logo.jpe">
        </div>
        <ul class="nav navbar-right top-nav">
          <li>Logout<i class="mdi mdi-logout"></i></li>
        </ul>
      </nav>
    </div>

I have centered the logo, I need to place the text to right of profile image, center all elements vertically and add margins. — Albert Lazaro de Lara, Dec 19 '16 at 12:24
Always provide a working fiddle if the question is related to html and js,It helps you as well as others in finding a quicker solution. — Shivkumar kondi, Dec 19 '16 at 12:29

score 2 · Answer 1 · answered Dec 19 '16 at 13:11

Here is an option using basic Bootstrap concepts. Hope it helps.

<!--Container-->
<div class="container-fluid">
    <!--Row-->
    <div class="row">
        <!--Col-MD-12-->
        <div class="col-md-12">
            <nav class="navbar navbar-default navbar-fixed-top navbar-inverse" role="navigation">
                <!--Left Nav Div-->
                <div class="col-sm-4">
                    <ul class="nav navbar-nav">
                        <li>
                            <a href="#"><span><img class="img-circle" src="http://placehold.it/50x50"></span></a>
                        </li>
                        <li>
                            <p style="color: white; margin-top: 20%;">Nombre y apellido usuario</p>
                        </li>
                    </ul>
                </div>
                <!--Mid Nav Div-->
                <div class="col-sm-4 text-center"><h3 style="color: white; margin-top: 5%;">LOGO</h3></div>

                <!--Right Nav Div-->
                <div class="col-sm-4">
                    <ul class="nav navbar-nav navbar-right" style="margin-top: 2%; ">
                        <li><a href="#" class="btn btn-default navbar-inverse">Logout&nbsp;<span class="glyphicon glyphicon-off"></span></a></li>
                    </ul>
                </div>
            </nav>
        </div> <!-- End Col-MD-12-->
    </div> <!--End Row-->
</div> <!--End Container-->'

Ok, I test it and it's great! The only problem is that the text right of the image is not centered vertically, but I can do it — Albert Lazaro de Lara, Dec 19 '16 at 13:14
You are using margins to center vertically, I would like to automatic center vertically without having to test which is the best margin. — Albert Lazaro de Lara, Dec 19 '16 at 14:11

score 1 · Answer 2 · answered Dec 19 '16 at 12:25

This can be done it many ways.. I have just added some inline css in your html for normal view(desktop view).Yet you can try better option to make it work responsively.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Case</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <style>
  
  #wrapper {
  background-color: #F2F2F2;
  height: 100%;
}

.navbar {
  background-color: #000000;
  color: #FFFFFF;
}

#profile {
  border-radius: 50%;
}
  </style>
</head>
<body>

<div id="wrapper">
  <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
  
    <div class="nav navbar-left top-nav" style="margin:10px;">
      <img id="profile" width="50px" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150">
      <p style="display:inline;">Nombre y apellido usuario</p>
    </div>
    
    <div class="navbar-header" style="margin:0.2% 25%;">
      <img width="100" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150">
    </div>
    <ul class="nav navbar-right top-nav" style="margin:0.8% 1%;">
      <li>Logout<i class="mdi mdi-logout"></i></li>
    </ul>
  </nav>
</div>

score 0 · Accepted Answer · edited May 23 '17 at 11:46

At the end I find the solution. I have been searching and I found a solution to center the elements vertically:

https://stackoverflow.com/a/35388513/1888372

Here it's says to use display: flex; align-items: center; on parent div, so the result is:

#wrapper {
  background-color: #F2F2F2;
  height: 100%;
}

.navbar {
  background-color: #000000;
  color: #FFFFFF;
  height: 76px;
  display: flex;
  align-items: center;
}

.navbar p {
  display: inline;
}

.brand {
    position: absolute;
    left: 50%;
    margin-left: -50px !important;
    display: block;
}

#profile {
  border-radius: 100%;
}

<div class="container-fluid">
  <div class="row">
    <div class="col-md-12">
      <nav class="navbar navbar-default navbar-fixed-top navbar-inverse" role="navigation">
        <div class="col-sm-4">
          <a href="#"><img class="img-circle" src="assets/images/nobody.jpg" width=60></a>
          <p>Nombre y apellido usuario</p>
        </div>
        <div class="col-sm-4 text-center">
          <img src="assets/images/logo.jpe">
        </div>
        <div class="col-sm-4">
          <div class="nav navbar-nav navbar-right">
            <a href="#"  class=" navbar-inverse">Logout<i class="mdi mdi-logut"></i></a>
          </div>
        </div>
      </nav>
    </div>
  </div>
</div>

Now it is finished (I have to fix some issues but I can do by myself).t

Bootstrap: problems create web header

3 Answers3