Trying to Pull Bootstrap form to right side of image

HTML & CSS
1

Hello,

I want to have a basic form in a right-aligned div and an image in a left aligned div. What am I doing wrong?

<div class="row">

  <div class="col-sm-6 pull-left">
     <div class="form-group">
        <%= image_tag(@user.avatar.url, :class => "img-responsive thumbnail img-rounded") %>
        <%= f.label "Update Profile Photo" %>
        <%= f.file_field :avatar %>
    </div>
  </div>

  <div id="col-sm-6 pull-right">

    <div class="my-city">
      You current location is set to <%= current_user.city %> (<%= link_to 'update', '#', :class=>"update-city" %>)
    </div>

    <div class="form-group">
      <%= f.label "email" %><br>
      <%= f.text_field "email", :class=>"form-control" %>
    </div>

    <div class="form-group">
      <%= f.label "first_name", "First Name" %><br>
      <%= f.text_field "first_name", :class=>"form-control" %>
    </div>

    <div class="form-group">
      <%= f.label "last_name", "Last Name" %><br>
      <%= f.text_field "last_name", :class=>"form-control" %>
    </div>

    <div class="form-group">
      <%= f.label "New_Password"%><br>
      <%= f.password_field "password", :class=>"form-control" %>
    </div>

    <div class="form-group">
      <%= f.submit "Submit", :class=>"btn btn-primary" %>
    </div>
  </div>

</div>
2

Look at this line.

<div id="col-sm-6 pull-right">

Validating your HTML would have alerted you to this issue. It should be the first step in debugging.

3

Ah - nice catch. thanks

4

Always happy to help :slight_smile: .

5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.