--- title: "Responsive Grid for all types of devices" description: "Responsive Grid for all types of devices" author: "Ethan Karla" published: 2021-07-28 updated: 2021-07-28 canonical: https://www.mindstick.com/forum/156592/responsive-grid-for-all-types-of-devices category: "bootstrap" tags: ["bootstrap"] reading_time: 2 minutes --- # Responsive Grid for all types of devices How to make a [responsive grid](https://www.mindstick.com/forum/34102/how-to-create-responsive-grid-in-ext-js) for all types of [devices](https://www.mindstick.com/blog/301912/how-smart-devices-are-changing-our-lives)? ## Replies ### Reply by Anonymous User [Responsive](https://www.mindstick.com/blog/11940/tips-for-fast-responsive-web-design-in-2018) containers are used to be 100% width until the breakpoint of that particular column has reached. For example, .container-sm is 100% wide to start until the sm breakpoint is reached, where it will range up with md, lg, xl, and xxl. ```
100% wide until small breakpoint
100% wide until medium breakpoint
100% wide until large breakpoint
100% wide until extra large breakpoint
100% wide until extra extra large breakpoint
``` Below is an example for the responsive [grid](https://www.mindstick.com/forum/369/how-can-i-add-a-column-name-to-my-grid) : ```                         Hello, world!    
               
           
.col-12 .col-md-8
           
.col-6 .col-md-4
       
               
           
.col-6 .col-md-4
           
.col-6 .col-md-4
           
.col-6 .col-md-4
       
               
           
.col-6
           
.col-6
       
   
                    ``` Hope this will help you. Happy Coding! \ --- Original Source: https://www.mindstick.com/forum/156592/responsive-grid-for-all-types-of-devices Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.