One of my every project challenge was to build a responsive page with media querys and a few knowledge about how it works, but after it, Bootstrap came to me... The first thing that I did was to learn about the breakpoints that Bootstrap has and how to use it well. Step 1 Learn bout the Bootstrap breakpoints and how it works. It uses different media query ranges or breakpoints in their source: // ( , 576 ) // // ( , 576 ) @ (min-width: ) { ... } // ( , 768 ) @ (min-width: ) { ... } // ( , 992 ) @ (min-width: ) { ... } // ( , 1200 ) @ (min-width: ) { ... } Extra small devices portrait phones less than px No media query since this is the default in Bootstrap Small devices landscape phones px and up media 576px Medium devices tablets px and up media 768px Large devices desktops px and up media 992px Extra large devices large desktops px and up media 1200px You can include it in the code using the class that you want for a specific container or object, for example, col attribute create a column in Bootsrap grid structure that has different size depends on the number that you use like col-6. Step 2 Once you know the responsive breakpoints, you need to add it to a class that you need, if we want to use a col-6 in a large device we can use col-lg-6 or if we want a bigger column for each object in a smaller device we can use col-xs-12, then it is going to be responsive deepens but you need to add more breakpoints if you want to make it looks good in all size and display so don't forget to add as much as you can to make a good page. Here is a code example of how the breakpoints look in a section: < =" "> < =" "> < =" "></ > < =" "></ > < =" "></ > < =" "></ > </ > </ > div class container-fluid div class d-md-flex d-sm-block div class col-md-6 col-sm-12 div div class col-md-6 col-sm-12 div div class col-md-6 col-sm-12 div div class col-md-6 col-sm-12 div div div It creat a container with one dive inside it, the other div with display flex in medium to large screen a display block for small screen or less, and two different sizes for columns col-md-6, for a div with two divs inside and each use 50% width of the container and col-sm-12 for a column that use the hole row. You can check it my different project on my . Github Bootstrap All rights reserved.
