Home>
I'm doing a copy coding of airbnb and I have a question at the block of lists above the footer.
I want to have 4 columns when Bootstrap XL size, but since it has become one vertical column, I added to the parent element of each column. At that time, the responsiveness of md on the way was erased. I would like to know how to make 4 rows in XL while reflecting the responsiveness on the way.

Corresponding source code

HTML CSS Bootstrap
Source code
HTML





Corporate information




How to use Airbnb




Newsroom




Airbnb Plus



Airbnb Luxe




HotelTonight




Airbnb Business Program



Olympic




Employment information




Community



Diversity&Belonging




Accessibility support




Airbnb Associate



Invite your friends





host



List the room




Host an online experience




Host the experience




Responsible hosting




Open Home




Resource Center




Community Center



Support



Airbnb's approach to the new coronavirus



Help Center



Cancel option



Neighborhood community support



Trust&Safety





CSS
None

What I tried

Please describe here what you have tried for the problem.
I added to each parent element and tried to be responsive.

Supplementary information (FW/tool version, etc.)

Please provide more detailed information here.
bootstap4.5ver

  • Answer # 1

    col-*For the parent element to take effectrowMust be.

    <footer>
      
        
          
           <!-Insert->
              
              <p>Corporate information</p>
              
              
              <p>How to use Airbnb</p>
              
              
              <p>Newsroom</p>
              
              
              <p>Airbnb Plus</p>
              
              
              <p>Airbnb Luxe</p>
              
              
              <p>HotelTonight</p>
              
              
              <p>Airbnb Business Program</p>
              
              
              <p>Olympic</p>
              
              
              <p>Employment information</p>
              
           <!-Insert->
          
    <!-Similarly below->