There is a form that is built using Bootstrap. According to the customer’s layout, it is necessary to select the left “column” with a darker color + add on its right side a thickening in the size of the corresponding block / blocks from the right column. Is it possible to do this in a convenient and automated way? Thank you in advance. It was need to

  • attach the code of your typesetting - Vadim Leshkevich

1 answer 1

Your layout in a simplified form looks like this:

<form class="form-horizontal"> <div class="form-group"> <label class="control-label col-sm-3"></label> <div class="col-sm-9"> <input class="form-control"> </div> </div> <div class="form-group"> <label class="control-label col-sm-3"></label> <div class="col-sm-9"> <textarea class="form-control js-ckeditor"></textarea> </div> </div> </form>

.form-group - play the role of strings, the label is located in the col-sm-3 column col-sm-3 left (you may have another column, and, therefore, a different width).

Solving your problem within the framework of a similar layout is possible in two stages:

Step 1. Fill the left half of the form with color

We don’t have one common left column for all content that is explicitly set in the layout. However, we know the class that we use for labels ( col-sm-3 ), which means we know the width (in bootstrap styles, in col-sm-3 - the width is 25%).

This means that we can fill with a solid color - the pseudo-element of the form, and place it exactly under the left column, according to its size:

 .form-horizontal::before { background-color: #fb1; content: ''; height: 100%; left: 0; position: absolute; top: 0; width: 25%; }

And due to the margin you can adjust the position of the pseudo-block taking into account the bootstrap $grid-gutter-width - the gap between the columns.

Stage 2. We put vertical lines along the height of the inputs.

It is solved in the same way - with pseudo-elements:

 .form-horizontal .form-control::before { background-color: #bada55; content: ''; height: 100%; left: -50px; position: absolute; top: 0; width: 3px; }

In this way, you place the pseudo-element slightly to the left ( left: -50px; ) of the input. We select the value specifically so that the pseudo-element lies on the border of the block filled with color from the first stage.

Also note that on screens smaller than those indicated in your columns, the form will be not horizontal, but vertical, and you do not need to fill in the left half there, as well as to have vertical lines. To do this, wrap your styles in @media .

For example, we have indicated col-sm-xxx , which means that we need our styles only on screens from $screen-sm-min and above. @media -query will be:

 @media (min-width: $screen-sm-min)
  • Thank you, Vitaly, for such an informative and real-life answer. - E. Chernyshov