Does bootstrap let me to modify his own classes to make a page responsive
<p>I'm creating project based in html and css. I have created this code in bootstrap inside a container and I want this to be responsive.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class=" container"&gt;

  &lt;div class="row"&gt;

    &lt;div class="col-md-12 col-sm-12 client "&gt; &lt;b&gt;SEI GIÀ CLIENTE? ACCEDI &lt;/b&gt;
    &lt;/div&gt;
  &lt;/div&gt;

  &lt;div class="row"&gt;
    &lt;div class="col-md-3 col-sm-3"&gt;&lt;/div&gt;
    &lt;div class="col-md-3  col-sm-3 labelField"&gt;
      &lt;div class="row"&gt;
        &lt;div class="col-md-4  col-sm-4 labelField"&gt;
          &lt;strong&gt;&lt;br&gt;EMAIL&lt;/strong&gt;
        &lt;/div&gt;
        &lt;div class="col-md-8  col-sm-8"&gt;
          &lt;input class="ut" type="mail"&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="col-md-6 col-sm-6"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="row"&gt;
    &lt;div class="col-md-3 col-sm-3"&gt;&lt;/div&gt;
    &lt;div class="col-md-3 col-sm-3 labelField"&gt;
      &lt;div class="row"&gt;
        &lt;div class="col-md-4 col-sm-4 labelField"&gt;
          &lt;strong&gt;&lt;br&gt;PASSWORD&lt;/strong&gt;
        &lt;/div&gt;
        &lt;div class="col-md-8 col-sm-8"&gt;
          &lt;input class="ut" type="mail"&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="col-md-6 col-sm-6"&gt;&lt;/div&gt;
  &lt;/div&gt;

  &lt;div class="row"&gt;
    &lt;div class="col-md-3  col-sm-3 col-xs-3 "&gt;&lt;/div&gt;
    &lt;div class="col-md-6 col-sm-6 col-xs-6 pass"&gt;&lt;a href="#"&gt; Hai dimenticato la password?&lt;/a&gt; 
    &lt;/div&gt;
    &lt;div class="col-md-3 col-sm-3 col-xs-3"&gt;&lt;/div&gt;
  &lt;/div&gt;


  &lt;div class="row"&gt;

    &lt;div class="col-md-12 col-sm-12 "&gt;
      &lt;a href="#"&gt;
        &lt;img src="images/entra.png" class="img-responsive registrati "&gt;
      &lt;/a&gt;
    &lt;/div&gt;

  &lt;/div&gt;
  &lt;div class="row"&gt;

    &lt;div class="col-md-12 col-sm-12 "&gt;
      &lt;a href="#"&gt;
        &lt;img src="images/fb.png" class="img-responsive registrati "&gt;
      &lt;/a&gt;
    &lt;/div&gt;

  &lt;/div&gt;



  &lt;div class="row"&gt;

    &lt;div class="col-md-12 col-sm-12 "&gt;
      &lt;div class="divider"&gt;&lt;/div&gt;

      &lt;/div</code></pre>
</div>
</div>
</p>

<p>Here is my css:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.registrati {
  margin-top: 20px;
  margin-left: 338px;
  margin-bottom: 8px;
  width: 33%px;
}
.pass {
  font-style: Arial black;
  color: black;
  font-size: 0.8em;
  margin-left: 339px;
  margin-bottom: 20px;
  margin-top: 20px;
  text-decoration: underline;
}
   </code></pre>
</div>
</div>

Here is what my result should look like:
<a href="https://i.stack.imgur.com/fE8yH.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/fE8yH.png" alt="enter image description here"></a>
The result is not responsive. My question is have I done something wrong or bootstrap doesnt let me to modify the classes as I did? So what should I do to make this responsive?
All the scripts and links required for responsivity are in my page but not here for a shorter demo. Thanks!</p>