Bootstrap: common challenges in designing web headers

Question

Bootstrap: common challenges in designing web headers

I am using bootstrap to create a website and I am encountering some difficulties when trying to design a specific header.

Here is the image of what I need to achieve:

https://i.sstatic.net/rG7IU.png

And here is the image of what I have managed to create so far:

https://i.sstatic.net/jBAT9.png

This is the code that I am currently using:

#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>

html css twitter-bootstrap

Answer 1

Answer №1

Check out this example that incorporates fundamental Bootstrap principles. I hope you find it useful.

<!--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%;">User's Name and Surname</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-->'

Answer 2

Check out this example that incorporates fundamental Bootstrap principles. I hope you find it useful.

<!--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%;">User's Name and Surname</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-->'

Answer 3

Answer №2

There are multiple ways to achieve this. I have included some inline CSS in your HTML for the regular view (desktop view). However, there are better options available to make it responsive.

<!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>

Answer 4

There are multiple ways to achieve this. I have included some inline CSS in your HTML for the regular view (desktop view). However, there are better options available to make it responsive.

<!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>

Answer 5

Answer №3

After thorough searching, I finally discovered a solution to vertically center elements:

The recommendation is to apply

display: flex; align-items: center;

to the parent div, resulting in the following code snippet:

#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>

With this solution implemented (although with minor issues to be fixed), my project is now complete.

Answer 6

After thorough searching, I finally discovered a solution to vertically center elements:

The recommendation is to apply

display: flex; align-items: center;

to the parent div, resulting in the following code snippet:

#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>

With this solution implemented (although with minor issues to be fixed), my project is now complete.

Bootstrap: common challenges in designing web headers

Answer №1

Answer №2

Answer №3

Similar questions

Obtaining select options in jQuery by utilizing the $(this) selector

What is the best way to have a div gradually glide out (utilizing CSS's transition feature) upon the click of a particular button?

Tips for managing CSS/style conflicts in JavaScript/AngularJS applications

What is the best way to showcase data from input fields within a bootstrap modal dialog?

Utilize ngFor to showcase additional items preceding the initial element

Tips for positioning icons inserted using the :before method

Toggle the visibility of a hidden div by clicking a button

Having issues showcasing the array of objects stored in $scope in AngularJs

Connect to a point on the leaflet map using an external <a> tag reference

Animations are failing to run within a Bootstrap card when using Vue rendering

Is it possible to display a Processing message at the beginning of a datatables table already containing data?

align-content and justify-content in flexbox are not producing the desired results

Arranging Bootstrap buttons in a clean row

Emphasizing the content of the text file with the inclusion of span tags

Display immersive full-screen overlays that encompass the entire vertical space without the need for scrolling

What is the best way to eliminate base tags from jQuery mobile scripts?

What is the best method for implementing a dropdownlist submenu in yii2?

Scrolling problems with numerous bootstrap modals on a Webpage

Adjust the svg rate using jQuery or JavaScript

Tabs within the AutoComplete popup in Material-UI