If the screen size is ≥ 992px, then the top two lines go in a row.

enter image description here

And when less, they are superimposed on one another. enter image description here

And I know that there are classes like col-xs-12, col-md-6, col-lg-5, etc. I do not really understand them yet. What exactly needs to be done so that the lines do not overlap each other with a width of <992px? Please do not give a link to getbootsrap.com

    1 answer 1

    Working with the bootstrap means that all elements are put into the "grid". The grid is, let's say, the area of ​​the screen mentally divided into 12 vertical columns.

    Take for example the following structure:

    <div class="container"> <div class="row"> <div class="col-lg-12 col-md-6 col-sm-2"></div> </div> </div>

    For the screen width (≥1200px) the width of the container will be 1170px, for (≥992px) - 970px, for (≥768px) - 750px. I still give a link to the Grid options . row is the row into which blocks will be stuffed. And in the line in my example, one block, which occupies the entire width of the container on wide screens, on medium screens - half the width, on small screens - 1/6 part (2 columns of 12).

    In your case, I assume that the elements of the form are not laid out in the bootstrap grid (without specifying how many grid columns each element should occupy). It must be something like this:

     <form> <div class="row"> <div class="col-md-6"> <div class="form-group"> <input class="form-control"> </div> </div> <div class="col-md-6"> <div class="form-group"> <input class="form-control"> </div> </div> </div> <div class="row"> <textarea class="form-control"></textarea> </div> </form>

    And in order to understand why this is the case, I will probably give the link once again to Forms .

    And you can play with the online designer and see how others are typing here http://www.bootply.com/

    • Thanks a lot! - Ravdan
    • @Ravdan if the answer solved your problem, it is accepted to "accept" it - the green bird under the arrows on the left. Then other users will know that the issue has been resolved. - toxxxa
    • Actually not quite decided. I wrapped 2 intuas in a row and then 2 individually in col- md-6 (in general, as shown). At the same time, they have now diverged a long distance (not like in my picture, the second upper one. The input gets far beyond the lower one). - Ravdan