There are square blocks inside the bustrap container:

<div class="container"> <div class="card_item"></div> <div class="card_item"></div> <div class="card_item"></div> <div class="card_item"></div> <div class="card_item"></div> </div>

How to make them in one line, and when the screen is narrowed, they are transferred to the next line one by one as the screen narrows? No js

    1 answer 1

    As an option, set the container property: display: flex; You can read here about flexboxes https://frontender.info/a-guide-to-flexbox/

     .container .card_item{width: 150px;height:150px;background:#d3d3d3;border:1px solid red;} .container{display:flex;flex-direction:row;flex-wrap:wrap;} 
     <div class="container"> <div class="card_item"></div> <div class="card_item"></div> <div class="card_item"></div> <div class="card_item"></div> <div class="card_item"></div> </div>

    To all use media queries:

     @media screen and (max-width: 700px){ // измСняСм ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΏΡ€ΠΈ этом Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΠΈ }