Home / Questions / 353256
Accepted
fedorqui
Asked: 2020-05-08 05:45:42 +0800 CST 2020-05-08 05:45:42 +0800 CST

How can I reuse Bootstrap settings?

  • 772

I am working on the styles of a series of pages with Bootstrap.

It turns out that recursively I have to use a series of properties. For example:

class="col-md-5 text-center border border-rounded"

This combination works well for me and I want to use it in different files. Under normal conditions, if it were a simple background color adjustment, for example, what I would do is name it the type class="miGenerica"and then in my file I estilos.csswould add a line defining the style:

miGenerica {
    // ... propiedades...
}

However, since it is a Bootstrap system, I do not see it possible to add the data with:

miGenerica {
    col-md-5
    border
}

So how can I generalize Bootstrap values ​​to an external file so I don't have to copy them from file to file?

css

3 Answers

  1. One possible answer is using SASS (SCSS) and with @extend , where you can add existing Bootstrap classes (or any other class):

    .generica {
    @extend .col-md-5;
    @extend .m-0;
}
    • 5

  2. One option that occurs to me, but I don't know if it's practical for what you're trying to do, is to add the recurring classes using Javascript.

    In this way, you avoid writing so much code during the layout. However, as @PHPMyGuel points out in his answer , in the face of code review by other developers and later your own reviews, doing it this way is counter-intuitive, as the semantics of the code are lost. at first sight.

    For example:

    const clasesRecurrentes = ['col-sm-5', 'mx-1', 'text-center', 'border', 'rounded'];
const colsRecurrentes = document.getElementsByClassName('recurrente');
for(let col of colsRecurrentes) {
  col.classList.add(...clasesRecurrentes);
}
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<div class="row mx-2 justify-content-center">
  <div class="recurrente">
   ...Contenido...
  </div>
  <div class="recurrente">
   ...Contenido...
  </div>
</div>

    In this way, I have inserted the recursive classes to the appropriate elements (as long as JavaScript is enabled in the browser).

    • 5
  3. Best Answer

    Personally, I wouldn't include the classes that define Bootstrap 's grid system in what you want to do, for the simple reason that on a visual level, they add a lot to the HTML . It is very useful to be able to see at a glance in the HTML the structure that defines Bootstrap . It's not the same to see this:

    <div class="row">
  <div class="col-4">
    <p>Columna</p>
  </div>
  <div class="col-4">
    <p>Columna</p>
  </div>
  <div class="col-4">
    <p>Columna</p>
  </div>
</div>

    What to see this other:

    <div class="mi clase">
  <div class="mi_otra_clase">
    <p>Columna</p>
  </div>
  <div class="mi_otra_clase">
    <p>Columna</p>
  </div>
  <div class="mi_otra_clase">
    <p>Columna</p>
  </div>
</div>

    Clearer the first, I think, both for you and for anyone who wants to get their hands on your code later.

    The rest of your classes are pretty straightforward, you can take the CSS rules from these classes into your own.

    .conjunto-recurrente {
  text-align: center !important;
  border: 1px solid #dee2e6!important;
  border-radius: .25rem!important;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div class="col-md-5 text-center border rounded">
  <p>Mi div</p>
</div>

<div class="col-md-5 conjunto-recurrente">
  <p>Mi otro div</p>
</div>

    • 2