Simple form and bootstrap incompatible css - css

Question

I am trying to copy this simple design into edit mode.
Here is the code displaying the image above :
<div class="user-description-container col-md-6 col-md-offset-3">
<div class="col-md-3">
<%= image_tag #user.image.standard.url, class: "user-picture img-circle" %>
</div>
<div class="user-description-box col-md-7">
<div class="user-name"><%= #user.full_name %></div>
<div class="user-stats">
<div class="user-stats-debates inline-flex"><b class="spacing-margin-right">
<%= #user.groups.length %></b><% if #user.groups.length == 0 %>
<p> débat</p><% else %><p> débats</p>
</div>
<% end %>
<div class="user-stats-followers inline-flex"><b class="spacing-margin-right"><%= #user.followers.length %></b> <%if #user.followers.length == 0%>
<p> disciple</p> <% else %><p> disciples</p>
<% end %>
</div>
</div>
<div class="user-description">
<%= #user.description %>
</div>
</div>
<div class="col-md-2 edit-profile">
<% if current_user == #user %>
<%= link_to(edit_user_path(#user),:class =>"edit-button") do %>
<i class="glyphicon glyphicon-pencil"></i>
<% end %>
<% end %>
</div>
</div>
I copied the main design of the page to the edit mode.
Unfortunately, here is what I get :
I am using the simple form gem with rails and I can't get bootstrap working properly. Here is my code on the edit mode :
<div class="container">
<div class="row">
<div class="user-description-container col-md-6 col-md-offset-3">
<%= form_for #user do |form| %>
<div class="user-upload-preview col-md-3">
<%= image_tag #user.image.standard.url, class: "user-picture img-circle object-fit-covered" %>
<div class="form-input">
<label class="btn btn-sm btn-primary image-browse-button" >
Choisir une photo
<span style="display:none;">
<%= form.file_field :image %>
</span>
</label>
</div>
</div>
<div class="user-description-box col-md-7">
<div class="user-name">
<%= #user.full_name %>
</div>
<div class="user-stats">
<div class="user-stats-debates inline-flex"><b class="spacing-margin-right">
<%= #user.groups.length %></b><% if #user.groups.length == 0 %>
<p> débat</p><% else %><p> débats</p>
</div>
<% end %>
<div class="user-stats-followers inline-flex"><b class="spacing-margin-right"><%= #user.followers.length %></b> <%if #user.followers.length == 0%>
<p> disciple</p> <% else %><p> disciples</p>
<% end %>
</div>
<div class="form-input inline-flex">
<%= form.text_field :description, placeholder: "Description", class: "form-control" %>
</div>
<div class="form-input save-edit">
<%= form.submit "Sauvegarder", class: "form-control profile-submit-button" %>
</div>
<% end %>
<div class="col-md-2">
</div>
</div>
</div>
</div>
</div>
Any answer would be much appreciated.

Answer 1

So in terms of the way you are using bootstrap you are supposed to input all the items that you want in a row which you did but it all the col-md- should add up to a total of 12 for it to be a complete row you have col-md-7 which you should add with an col-xs to make it full also in terms on how to make it like this I think this should suffice
here is some layout that looks like what you are trying to do
<div class="container">
<div class="row">
<div class="col-md-4">
IMAGE
</div>
<div class="col-md-8">
<div class="header">
<h1 class="page-header text-center">MY NAME</h1>
</div>
<div class="row">
<div class="col-md-6">
<h3 class="text-center">insert contents here</h3>
<center>
<div class="center">
<button class="btn btn-primary">BTN</button>
</div>
</center>
</div>
<div class="col-md-6">
<h3 class="text-center">insert contents here</h3>
<center>
<div class="center">
<button class="btn btn-primary">BTN</button>
</div>
</center>
</div>
</div>
</div>
</div>
</div>
It looks like you are inputting user information stay away from #user tags and information like .file and other such things use tags and set them with an ID and then be sure use javascript to manipulate them