Containers in Bootstrap 4

Question

Containers in Bootstrap 4

Navigation

#1 by (0 votes)

0

I want to generate something similar to what I show in the following line:

I was trying with the grid system but I do not think it is the most appropriate, then I tried generating several div with the flex-row property so that they are side by side but I have some drawbacks. 1) I try to apply properties such as border so that they stand out and a color but they have no effect and 2) I want all divs to have the same size and to write a text inside them to keep their size and text inside the div. What would be the correct way to do this? Thanks in advance to anyone who can help me.

bootstrap div contenedores

asked by JulianProg 27.09.2018 в 04:18

source

1 answer

Add two columns in LinQ Signing certificate "XXX", serial number "XXX", is not valid for code signing

score 0 · Answer 1

Look, try this, I think that's what you get.

This css style add it to the divs you want

.borde2{
    /*height: 30px;*/
    overflow:auto;
    max-height: 50px;
    word-wrap:break-word;
    -ms-word-break: break-all;
     word-break: break-all;

     // Non standard for webkit
     word-break: break-word;
-webkit-hyphens: auto;
   -moz-hyphens: auto;
    -ms-hyphens: auto;
        hyphens: auto;
    margin-bottom: 2%;
    border: 1px solid #dad8d8;
    padding-top: 10px;
    padding-bottom: 15px;
  }



<div class="content-header">
  <div class="container row">
    <div class="col-lg-3 input-group borde2">
      <label for="nombre9" class="col-form-label col-lg-12">1 CONTENEDOR DE 1 FILA</label>
    </div> 
    <div class="col-lg-3 input-group">
      <label for="nombre9" class="col-form-label col-lg-12">2 CONTENEDOR DE 1 FILA</label>
    </div>
    <div class="col-lg-3 input-group borde2">
      <label for="nombre9" class="col-form-label col-lg-12">3 CONTENEDOR DE 1 FILA</label>
    </div>
    <div class="col-lg-3 input-group">
      <label for="nombre9" class="col-form-label col-lg-12">4 CONTENEDOR DE 1 FILA</label>
    </div>
    <div class="col-lg-3 input-group borde2">
      <label for="nombre9" class="col-form-label col-lg-12">1 CONTENEDOR DE 1 FILA</label>
    </div> 
  </div>
  <div class="container row">
    <div class="col-lg-3 input-group borde2">
      <label for="nombre9" class="col-form-label col-lg-12">1 CONTENEDOR DE 2 FILA</label>
    </div> 
    <div class="col-lg-3 input-group">
      <label for="nombre9" class="col-form-label col-lg-12">2 CONTENEDOR DE 2 FILA</label>
    </div>
    <div class="col-lg-3 input-group borde2">
      <label for="nombre9" class="col-form-label col-lg-12">3 CONTENEDOR DE 2 FILA</label>
    </div>
    <div class="col-lg-3 input-group borde2">
      <label for="nombre9" class="col-form-label col-lg-12">4 CONTENEDOR DE 2 FILA</label>
    </div>
    <div class="col-lg-3 input-group borde2">
      <label for="nombre9" class="col-form-label col-lg-12">1 CONTENEDOR DE 2 FILA</label>
    </div> 
  </div>
</div>

Update : Navigating on the web compile this css in which you only change the heigth and it is ready never to leave or for the sides, because it gives you the necessary script, (you must have defined the type of tongue in the html if you want to put the script "-" at the end of the words that do not reach to be complete) and also remains as with scroll so that if you pass the size you defined vertically

I hope it's useful for you, you tell me how it went for you