I have a problem with a bootstrap class, I have a div of class .row and inside said div I have two more with classes .col-10 and col-2, when the application is executed in Desktop it looks fine, but when passing it at the resolution of the iPad, the div is overlaid.
What I am trying to do is that when the screen resolution is 768px(width) the .col-10 class changes to .col-12 so that it fills the screen and the other div goes down.
I tried to do a JavaScript function but it doesn't give me an error or anything and it doesn't make the change I need.
function cambio(){
var clase = document.getElementById("resize");
if (window.screen.width < 768){
clase.className = "col-12";
}else{
clase.className = "col-10";
}
}
Regarding your question, you are misapproaching the bootstrap grid system, for what you want to do, javascript is not necessary . It turns out that for what you want you just need to use the
col-*
.Going into a little more detail, the bootstrap breakpoint is defined as
col-sm-* , col-md-* , col-lg-* , col-xl-*
Grid Bootstrap . Being in that order (lowest to highest, exceptcol-*
since it has no breakpoint, that's why your code doesn't work )So how do I make it have a certain size according to the device?
The answer is simple, you just use the classes in
div
it to make it work, example:In that snnipet I am telling you that depending on the device it occupies a certain percentage of the row, if you look closely
col-sm-4
this classcol-sm
is used for small devices for example cell phones,col-md-*
it is generally used for tablets,col-lg-*
it is generally used for computer screens andcol-xl-*
for screens with resolution on los1140px
, so you should just use the classes and the screen will adapt itself.The total number of grids that it manages are 1 to 12, and each number has a percentage, being 12 the one that represents 100% of the total width of the
row
.Summarizing then I use
sm, md, lg, xl
depending on how I want it to behave per device and I use a number from 1 to 12 to say what percentage I use.I hope this explanation helps you. Greetings.
Use:
For example:
The advantage of the bootstrap framework is that it handles the grid system. Which supports you so that your website works with responsive design . Which consisted in adapting to the size of the screen, as what you are looking for.
This is what you're looking to do with your code.
Focus on studying the grid system and the bootstrap display prefixes that go hand in hand.
Use CSS media queries.
Group by size min. or max. as appropriate.
Before doing so, check the standardization that Bootstrap uses to compute limits.