CODEWITHSUNDEEP
htmlruby-on-railsrubytwitter-bootstrap
B.C
B.C

Reputation: 31

Bootstrap grid offset not centering

Trying to center my sign up page, but my class="col-md-4 col-md-offset-4" isn't working. I know there's other means to centering the text, but I just want to know what I've done wrong in my code, so I can know to avoid it in the future.

My HTML is:

<div class="container">
 <div class="row">
  <div class="col-md-4 col-md-offset-4">
   <div class="well">
            <h2>Sign up</h2>

    <%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
      <%= devise_error_messages! %>

      <div class="field">
        <%= f.label :email %><br />
        <%= f.email_field :email, autofocus: true %>
      </div>

      <div class="field">
        <%= f.label :password %>
        <% if @minimum_password_length %>
        <em>(<%= @minimum_password_length %> characters minimum)</em>
        <% end %><br />
        <%= f.password_field :password, autocomplete: "off" %>
      </div>

      <div class="field">
        <%= f.label :password_confirmation %><br />
        <%= f.password_field :password_confirmation, autocomplete: "off" %>
      </div>

      <div class="actions">
        <%= f.submit "Sign up" %>
      </div>
    <% end %>

    <%= render "devise/shared/links" %>
   </div>
  </div>
 </div>
</div>

I've read other posts, and their answers are just that they forgot a container tag or something. Can't find any answer in the bootstrap documentation either. I'm assuming it's something small I'm overlooking.

Upvotes: 0

Views: 60

Answers (4)

Praneeth Madush
Praneeth Madush

Reputation: 158

You must change this part as bellow.

<div class="row">
  <div class="col-md-4 offset-md-4">

just change this part.

Upvotes: 1

B.C
B.C

Reputation: 31

No idea what happened. I removed the breaks between some of the code, and it worked. I put the line breaks back, and it still worked. I have no idea. Maybe my browser was having problems? Literally no idea, but it's working now

Upvotes: 1

kaushikv
kaushikv

Reputation: 135

<div class="row">
   <div class="col-md-4 text-center">

Try this. That is what I use most times.

Upvotes: 2

widjajayd
widjajayd

Reputation: 6263

just change col-md-offset-4 to offset-md-4 since bootstrap 4 change this 

<div class="row">
  <div class="col-md-4 offset-md-4">

here is reference for this

Upvotes: 2

Related Questions