What would be the best way of lining up the Back text with the Booking heading?

HTML

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <div class="navbar-brand">Booking</div>
    <div>Back</div>
  </div>
</nav>

CSS

.navbar {
    background-color: #0088CC;
    padding-left: 0em !important;
    padding-right: 0em !important;
}
.navbar-brand {
    color: #fff !important;
    padding-left: 0em !important;
    padding-right: 0em !important;
    text-align: center;
    margin: 0 auto !important;
    width: 100%;
    display: inline !important;
}
nav > .container {
    width: 100%;
}

Fiddle here

Recommended Answers

All 4 Replies

can you define "Line up 'Back'"? Im not following what you are trying to say.

Sorry it should say - line up "Back" text with heading

yes but what type of alignment do you mean, on top, underneath, to the left, right?

Hi,

Would using lists be an option for you...

add this to css
.container li{display: inline; padding: 10px;}

<body>
    <nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <div class= ".navbar-brand">
    <li>Booking</li>
    <li>Back</li>
   </div>
  </div>
</nav>
</body>
</html>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, learning, and sharing knowledge.