Member Avatar for methuselah90

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

Edited by methuselah90 because: fixed fiddle link
  • 3 Contributors
  • 4 Replies
  • 122 Views
  • 4 Days Discussion Span
  • Latest Post Latest Post by donz365
Member Avatar for JorgeM

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

Member Avatar for methuselah90

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

Member Avatar for JorgeM

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

Member Avatar for donz365

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, networking, learning, and sharing knowledge.