0

I'm trying to center a button that i want to place inside a modal. What seems like the right class to add to the button, 'nav-justified', if used takes over the whole width of the navbar and pushes all other elements our except the brand. I was hoping there would be a class solution for this, but maybe i'll just have to override with css. Can anyone help me achieve this please? Here's the relevant bit of my html:

<body>
    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="/posts">JBK</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
        <%= link_to 'New post', new_post_path, class: 'btn btn-primary navbar-btn navbar-left' %>
        <% if user_signed_in? %>
          <%= link_to('Logout', destroy_user_session_path, :method => :delete,
        class: 'btn btn-primary navbar-btn navbar-right') %>
          <%= link_to('Edit registration', edit_user_registration_path,
        class: 'btn btn-primary navbar-btn navbar-right') %>
        <% else %>
          <%= form_for(User.new, as: :user, url: session_path(:user),
        html: { class: 'navbar-form navbar-right' }) do |f| %>
            <div class="form-group">
              <%= f.email_field :email, placeholder: 'Email',
            class: 'form-control' %>
             </div>
            <div class="form-group">
              <%= f.password_field :password, placeholder: 'Password',
            class: 'form-control' %>
            </div>
            <%= f.button "Sign in", class: 'btn btn-success' %>  
          <% end %>
        <% end %>
        </div>
      </div>
    </nav>        
    <%= yield %>
    <div class="container">
      <footer>
        <p>&copy; Bibble 2015</p>
      </footer>
    </div>
  </body>

Thanks.

gef
  • 7,025
  • 4
  • 41
  • 48
jbk
  • 1,911
  • 19
  • 36

2 Answers2

1

Fiddle <- Link to code

From this answer: Simular question
Comment: @pbadeer nav-justified is for pills and tabs, not the navbar. Warning: Using this class on a navbar breaks the navbar styles.

  1. I translated the ruby to pure html (since i dont know or not familiar with ruby-on-rails)
  2. Added a <div class="text-center"> to (the button I hope is the correct one) and wrapped that button in a <span>
zekromWex
  • 280
  • 1
  • 4
  • 17
Persijn
  • 14,624
  • 3
  • 43
  • 72
0

Try adding :

-<div class= "text-center">

it will do the job for you.

  • Thanks Persijn & nr.Varun. Well done on writing that jsFiddle Persijn, first time i've looked at jsFiddle and a really good way to demonstrate sections of code, v helpful. Adding the text-center class did work when added to one of the parent divs up the tree that wrapped the whole navbar, with a class of 'navbar-right' added to individual button elements that i wanted not to sit center. Both answers were correct, however i can only mark one as 'the answer' so i'll mark Persijn's as it was the first one posted. Thanks again for getting me out of the weird css/html/class'ie hole!! – jbk Feb 03 '15 at 15:24