title: How to set different margins for specific breakpoints in Bootstrap 4 (no javascript)
body: <p>I have browsed some of the answers and tried the solutions out but I am still not getting the results. </p>
  
  <p>I want to set a different margin for different breakpoints in bootstrap-for example:</p>
  
  <p><a href="https://i.stack.imgur.com/UBZyB.png" rel="nofollow noreferrer">Laptop view fix</a>,
  <a href="https://i.stack.imgur.com/Jtxzu.png" rel="nofollow noreferrer">tablet view</a></p>
  
  <p>It probably has something to do with the set widths as well, but I just didn't know how to make everything work in width as well as have margin look good on all screen sizes.</p>
  
  <p>This is my code : </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>.container {
    max-width: 25rem;
    text-align: center;
    padding: 0rem;
    margin: 1rem 0.4rem;
  }
  
  .table.table.table-borderless {
    margin-bottom: 0rem;
  }
  
  .table.table.table-borderless td,
  .table.table-dark.table-borderless td {
    padding: 0rem;
  }
  
  table.statistic-employment,
  table.statistic-requirement {
    width: 24.8rem;
  }
  
  .statistic-requirement {
    height: 10 rem;
  }
  
  .col-12.col-md-6.col-xl-4 {
    padding: 0rem 0rem;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;meta name="viewport" content="width=device-width, initial-scale=1.0 shrink-to-fit=no"&gt;
  &lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"&gt;
  
  
  
  
  &lt;div class="main-container"&gt;
    &lt;div class="row"&gt;
      &lt;div class="col-12 col-md-6 col-xl-4 "&gt;
        &lt;!--Prva kartica--&gt;
        &lt;div class="container"&gt;
          &lt;table class="table table-borderless" style="background-color: thistle;"&gt;
            &lt;tbody&gt;
              &lt;tr&gt;
                &lt;td style="font-weight: 400; font-size: 3rem;"&gt;UKUPNO&lt;/td&gt;
              &lt;/tr&gt;
            &lt;/tbody&gt;
          &lt;/table&gt;
  
          &lt;table class="table table-dark table-borderless"&gt;
            &lt;tbody&gt;
              &lt;tr&gt;
                &lt;td&gt;Zaprimljeno zahtjeva&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                &lt;td style="font-size: 5.5rem;"&gt;4979&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                &lt;td&gt;poslano&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                &lt;td&gt;17.4.2020. do 12h&lt;/td&gt;
              &lt;/tr&gt;
            &lt;/tbody&gt;
          &lt;/table&gt;
  
          &lt;table class="table table-borderless" style="background-color: thistle; font-weight: 700;"&gt;
            &lt;tr&gt;
              &lt;td&gt;Osobna provjera&lt;/td&gt;
              &lt;td&gt;SMS obavijest&lt;/td&gt;
              &lt;td&gt;Kontakt centar&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
              &lt;td style="font-size: 2.5rem;"&gt;6243&lt;/td&gt;
              &lt;td style="font-size: 2.5rem;"&gt;2322&lt;/td&gt;
              &lt;td style="font-size: 2.5rem;"&gt;230&lt;/td&gt;
            &lt;/tr&gt;
          &lt;/table&gt;
  
          &lt;div class="statistic-employment" style="background-color: rgb(228, 224, 224); height: 11rem;"&gt;
            &lt;h6&gt;Po statusu zaposlenosti&lt;/h6&gt;
            &lt;table class="statistic-employment"&gt;
              &lt;tr&gt;
                &lt;td&gt;EMPLOYED&lt;/td&gt;
                &lt;td&gt;6308&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                &lt;td&gt;PENSIONER&lt;/td&gt;
                &lt;td&gt;251&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                &lt;td&gt;PENSIONER_EMPLOYED&lt;/td&gt;
                &lt;td&gt;34&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                &lt;td&gt;UNEMPLOYED&lt;/td&gt;
                &lt;td&gt;952&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                &lt;td&gt;UNEMPLOYED_COVID&lt;/td&gt;
                &lt;td&gt;1090&lt;/td&gt;
              &lt;/tr&gt;
            &lt;/table&gt;
          &lt;/div&gt;
          &lt;div class="statistic-requirement" style="background-color: rgb(238, 189, 223); height: 9.8rem;"&gt;
  
            &lt;h6&gt;Broj upisanih po danu&lt;/h6&gt;
  
            &lt;table class="statistic-requirement"&gt;
              &lt;tr&gt;
                &lt;td&gt;datum&lt;/td&gt;
                &lt;td&gt;dan&lt;/td&gt;
                &lt;td&gt;zahtjeva&lt;/td&gt;
              &lt;/tr&gt;
  
              &lt;tr&gt;
                &lt;td&gt;06.04.&lt;/td&gt;
                &lt;td&gt;ponedjeljak&lt;/td&gt;
                &lt;td&gt;2640&lt;/td&gt;
              &lt;/tr&gt;
  
              &lt;tr&gt;
                &lt;td&gt;07.04.&lt;/td&gt;
                &lt;td&gt;utorak&lt;/td&gt;
                &lt;td&gt;1205&lt;/td&gt;
              &lt;/tr&gt;
  
              &lt;tr&gt;
                &lt;td&gt;08.04.&lt;/td&gt;
                &lt;td&gt;srijeda&lt;/td&gt;
                &lt;td&gt;700&lt;/td&gt;
              &lt;/tr&gt;
  
            &lt;/table&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
  
      &lt;div class="col-12 col-md-6 col-xl-4"&gt;
        &lt;!--Druga kartica--&gt;
  
        &lt;div class="container"&gt;
          &lt;table class="table table-borderless" style="background-color: thistle;"&gt;
            &lt;tr&gt;
              &lt;td style="font-weight: 400; font-size: 3rem;"&gt;UKUPNO&lt;/td&gt;
            &lt;/tr&gt;
          &lt;/table&gt;
  
          &lt;table class="table table-dark table-borderless"&gt;
            &lt;tr&gt;
              &lt;td&gt;Zaprimljeno zahtjeva&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
              &lt;td style="font-size: 5.5rem;"&gt;4979&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
              &lt;td&gt;poslano&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
              &lt;td&gt;17.4.2020. do 12h&lt;/td&gt;
            &lt;/tr&gt;
          &lt;/table&gt;
  
          &lt;table class="table table-borderless" style="background-color: thistle; font-weight: 700;"&gt;
            &lt;tr&gt;
              &lt;td&gt;Osobna provjera&lt;/td&gt;
              &lt;td&gt;SMS obavijest&lt;/td&gt;
              &lt;td&gt;Kontakt centar&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
              &lt;td style="font-size: 2.5rem;"&gt;6243&lt;/td&gt;
              &lt;td style="font-size: 2.5rem;"&gt;2322&lt;/td&gt;
              &lt;td style="font-size: 2.5rem;"&gt;230&lt;/td&gt;
            &lt;/tr&gt;
          &lt;/table&gt;
  
          &lt;div class="statistic-employment" style="background-color: rgb(228, 224, 224); height: 11rem;"&gt;
            &lt;h6&gt;Po statusu zaposlenosti&lt;/h6&gt;
            &lt;table class="statistic-employment"&gt;
              &lt;tr&gt;
                &lt;td&gt;EMPLOYED&lt;/td&gt;
                &lt;td&gt;6308&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                &lt;td&gt;PENSIONER&lt;/td&gt;
                &lt;td&gt;251&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                &lt;td&gt;UNEMPLOYED&lt;/td&gt;
                &lt;td&gt;952&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                &lt;td&gt;UNEMPLOYED_COVID&lt;/td&gt;
                &lt;td&gt;1090&lt;/td&gt;
              &lt;/tr&gt;
            &lt;/table&gt;
          &lt;/div&gt;
          &lt;div class="statistic-requirement" style="background-color: rgb(238, 189, 223);"&gt;
  
            &lt;h6&gt;Broj upisanih po satu&lt;/h6&gt;
  
            &lt;table class="statistic-requirement"&gt;
              &lt;tr&gt;
                &lt;td&gt;datum&lt;/td&gt;
                &lt;td&gt;sat&lt;/td&gt;
                &lt;td&gt;zahtjeva&lt;/td&gt;
              &lt;/tr&gt;
  
              &lt;tr&gt;
                &lt;td&gt;27.04.&lt;/td&gt;
                &lt;td&gt;06&lt;/td&gt;
                &lt;td&gt;1&lt;/td&gt;
              &lt;/tr&gt;
  
              &lt;tr&gt;
                &lt;td&gt;27.04.&lt;/td&gt;
                &lt;td&gt;07&lt;/td&gt;
                &lt;td&gt;3&lt;/td&gt;
              &lt;/tr&gt;
  
              &lt;tr&gt;
                &lt;td&gt;27.04.&lt;/td&gt;
                &lt;td&gt;08&lt;/td&gt;
                &lt;td&gt;11&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                &lt;td&gt;27.04.&lt;/td&gt;
                &lt;td&gt;09&lt;/td&gt;
                &lt;td&gt;26&lt;/td&gt;
              &lt;/tr&gt;
  
            &lt;/table&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="col-12 col-md-6 col-xl-4"&gt;
        &lt;!--Treca kartica--&gt;
  
        &lt;div class="container"&gt;
          &lt;table class="table table-borderless" style="background-color: thistle;"&gt;
            &lt;tr&gt;
              &lt;td style="font-weight: 400; font-size: 3rem;"&gt;UKUPNO&lt;/td&gt;
            &lt;/tr&gt;
          &lt;/table&gt;
  
          &lt;table class="table table-dark table-borderless"&gt;
            &lt;tr&gt;
              &lt;td style="padding: 0rem"&gt;Zaprimljeno zahtjeva&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
              &lt;td style="font-size: 5.5rem; padding: 0rem "&gt;4979&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
              &lt;td style="padding: 0rem"&gt;poslano&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
              &lt;td style="padding: 0rem"&gt;17.4.2020. do 12h&lt;/td&gt;
            &lt;/tr&gt;
          &lt;/table&gt;
  
          &lt;table class="table table-borderless" style="background-color: thistle
                          ; font-weight: 700;"&gt;
            &lt;tr&gt;
              &lt;td&gt;Osobna provjera&lt;/td&gt;
              &lt;td&gt;SMS obavijest&lt;/td&gt;
              &lt;td&gt;Kontakt centar&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
              &lt;td style="font-size: 2.5rem;"&gt;6243&lt;/td&gt;
              &lt;td style="font-size: 2.5rem;"&gt;2322&lt;/td&gt;
              &lt;td style="font-size: 2.5rem;"&gt;230&lt;/td&gt;
            &lt;/tr&gt;
          &lt;/table&gt;
  
          &lt;div class="statistic-employment" style="background-color: rgb(228, 224, 224); height: 11rem;"&gt;
            &lt;h6&gt;Po statusu zaposlenosti&lt;/h6&gt;
            &lt;table class="statistic-employment"&gt;
              &lt;tr&gt;
                &lt;td&gt;EMPLOYED&lt;/td&gt;
                &lt;td&gt;83&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                &lt;td&gt;PENSIONER&lt;/td&gt;
                &lt;td&gt;10&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                &lt;td&gt;UNEMPLOYED&lt;/td&gt;
                &lt;td&gt;25&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                &lt;td&gt;UNEMPLOYED_COVID&lt;/td&gt;
                &lt;td&gt;19&lt;/td&gt;
              &lt;/tr&gt;
            &lt;/table&gt;
          &lt;/div&gt;
          &lt;div class="statistic-requirement" style="background-color: rgb(238, 189, 223);"&gt;
  
            &lt;h6&gt;Broj upisanih po satu&lt;/h6&gt;
  
            &lt;table class="statistic-requirement"&gt;
              &lt;tr&gt;
                &lt;td&gt;datum&lt;/td&gt;
                &lt;td&gt;sat&lt;/td&gt;
                &lt;td&gt;zahtjeva&lt;/td&gt;
              &lt;/tr&gt;
  
              &lt;tr&gt;
                &lt;td&gt;28.04.&lt;/td&gt;
                &lt;td&gt;00&lt;/td&gt;
                &lt;td&gt;1&lt;/td&gt;
              &lt;/tr&gt;
  
              &lt;tr&gt;
                &lt;td&gt;28.04.&lt;/td&gt;
                &lt;td&gt;05&lt;/td&gt;
                &lt;td&gt;2&lt;/td&gt;
              &lt;/tr&gt;
  
              &lt;tr&gt;
                &lt;td&gt;28.04.&lt;/td&gt;
                &lt;td&gt;06&lt;/td&gt;
                &lt;td&gt;1&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                &lt;td&gt;28.04.&lt;/td&gt;
                &lt;td&gt;08&lt;/td&gt;
                &lt;td&gt;14&lt;/td&gt;
              &lt;/tr&gt;
  
            &lt;/table&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;!--Row and Main-container--&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>