I have div:
<div class="col-md-2 col-sm-4 col-xs-12 postaviborder">
When min-width is 992px and max-width is 1199px I need div has class col-sm-4.
After lower size, resizing need to continue to xs-12
I hope can somebody understand me.
Is that possible?
I would propose to check bootstap grid system - http://getbootstrap.com/css/#grid
If I understang you right you can use following:
1)for large screens (Large devices Desktops (≥1200px)) - you can use col-lg-4 => element width will be 1/3 of 100%
2) for lower sizes - you can use col-xs-12 => element width will be 100%
Also you can override grid media queries (#screen-sm-min, #screen-md-min, #screen-lg-min) - http://getbootstrap.com/css/#grid-media-queries
Related
I'm not expert in styling, I'm using bootstap for small projects.
So, my problem is the grid system. I have two monitors, first has 1920x1080 resolution and second has 1366x768.
I want say with mediaquery if the resolution is 1366x768 use the grid system of md not lg
For example I have a div as in the below
<div class="col-lg-9 col-md-6">
....
</div>
div class="col-lg-3 col-md-6">
...
</div>
Is it possible?
In bootstrap3, you can use col-lg class for your devices that are equl to 1200px or more and col-md class for your devices that are equal to 992px or more. Similarly in bootstrap 4 you can use col-lg class for resolution that is equal to 992px and more and col-md class for col-md for 768px or more. You can find full bootstrap grid documentation on its official site https://getbootstrap.com/docs/3.3/css/#overview-container (for bootstrap 3).
In your case im going through boostrap version 3. If you want to use col-md class on resolution of 1366X768 or more obviously you want to use col-lg class on resolution of 1920x1080 or more as you said you have two monitors. If so simply go to customize section of bootstrap official site i.e. https://getbootstrap.com/docs/3.3/customize/ Then scroll down there you will find Media queries breakpoints section. You can customize your own breakpoints from there by simply fill #screen-lg labeled input box with 1920px and #screen-md labeled with 1366px. Now you can go to the bottom of this page then simply click commpile and download button. Now you can use this downloaded bootstrap file that might work for you. Similarly each and every thing you can customize as you want by editing these less variable.
If I understand the question correctly , you can do this with JQuery . Something like this :
if (window.matchMedia('(min-width: 1025px )').matches) {
high.css('height', maxheight - 3);
boxOne.css('height', maxheight);
boxTwo.css('height', maxheight);
boxThree.css('height', maxheight + 23);
}
else if (window.matchMedia('(min-width: 768px) and (max-width: 1024px)').matches) {
high.css('height', maxheight - 11);
boxOne.css('height', maxheight);
boxTwo.css('height', maxheight);
boxThree.css('height', maxheight + 23);
}
I see divs on projects like <div class="col-lg-8 col-xs-12 col-md-6> and I wanted to know why there's 3 grid classes instead of 1. Is it for mobile?? But how the browser will decode which one is for mobile? Is there a specific classes sequence <div class="(PC) col-lg-8 (LAPTOPS) col-xs-12 (MOBILE)col-md-6>?
And If I use the col-offset option, it will offset all the classes or
just the class before it?
Thanks in advance!
GO HERE FOR MORE INFORMATION
https://www.w3schools.com/bootstrap/bootstrap_grid_system.asp
Grid Classes The Bootstrap grid system has four classes:
xs (for phones)
sm (for tablets)
md (for desktops)
lg (for larger
desktops)
The classes above can be combined to create more dynamic and
flexible layouts.
Tip: Each class scales up, so if you wish to set the same widths for
xs and sm, you only need to specify xs.
According to your question, you see 3 classes used, there are 4 basic classes -
col-lg-x , 2. col-md-x , 3. col-sm-x , 4. col-xs-x.
-lg --> Large desktops.
-md --> laptops/desktops.
-sm --> tablets.
-xs --> mobile screens.
And "-x" stands for numeric value of width in terms of blocks, ranging between 1 and 12.
Our screen is basically divided into 12 parts by the bootstrap (in every screen size - lg, md, sm, xs)
12 being the whole screen in all the cases.
So, you can choose the amount of block space width you want to assign to some block based on the screen size.
So, if you choose -
<div> class="col-lg-8 col-xs-12 col-md-6">
you are telling your browser to allow the <div> to have
// col-lg-8 -- 8 blocks of space on large screens
// col-xs-12 -- 12 (whole screen) of space on small(mobile) screens
// col-md-6 6 blocks (half the screen) in medium sized screens (laptops/desktops)
ALSO
They are the classes , no sequence matter at all.
The browser won't decode that stuff, it's the Js's files of Bootstrap which will care of it, for the browsers.
// LG - larger computer
// MD - computer
// SM - tablet
// XS - smartphone
If you inspect with your inspector theses class, you'll see for example that col-8 correspond to :
.col-8 {
width: 50%;
max-width: 50%;
}
So it takes 50% width of his parent. And if your set a class at col-4, it will be at 50% less width than col-8, so :
.col-4 {
width: 25%;
max-width: 25%;
}
When you add "sm", it mean that it will be triggered only for mobile, "md" for tablet.
So basically I have something like
<div class="col-xs-3">
stuff
</div>
and I want it to change to something like
<div class="col-xs-8 col-xs-offset-2">
stuff
</div
So I essentially want to take a div that's placed on the left and move it to the center and widen the column size when the viewport width is <768px. How can I do this?
Check the grid documentation from their site.
You can define multiple classes for the different breakpoints. If I understand you correctly you need something like this:
<div class="col-sm-3 col-xs-8 col-xs-offset-2">stuff</div>
This translates to: 3 columns on small devices (>= 768px) and 8 columns + 2 offset columns for extra small devices (< 768px). They also have col-md and col-lg- classes.
I'm currently developing a Login/Register page but I need help with the columns. The page currently looks like this on desktop 1920x180: http://prntscr.com/cl4ms8
I am using <div class="col-xs-6"> on both of the forms so they are evenly split on the page. How would I go across making it so it will be responsive on all devices as it currently looks like this on an iPhone 6: http://prntscr.com/cl4ndb
Bootstrap ships with 4 tiers of grids, which have class prefixes of;
.col-xs- , (<768px)
.col-sm- , (≥768px)
.col-md- , (≥992px)
.col-lg- , (≥1200px)
If you've applied a column class of "col-xs-6" what you are saying is that from 0px to 767px i want this column to be 50% of the containers width. And unless you add another class for the next grid tier, it will continue to be 50% of the parent on wider screens as well. So not only up to 768px but beyond unless you add another class.
Your problem here is that most mobiles are simply too narrow to show two columns for this purpose. So change "col-xs-6" to "col-xs-12". And add "col-sm-6" as well.
<div class="col-xs-12 col-sm-6">
That will mean that from 768px and up, the columns wil be 50%.
The reason why the layout looks broken though is probably because your input's have a width or min-width that is greater than the 50% width of the container and are therefore wider than the column grid they are nested in.
You elements with the col-xx-n classes need to be children or descendants of an element with the class container-fluid.
So, this will be responsive:
<div class="container-fluid">
<div class="col-md-4">This div takes up 1/3 of the available width on a desktop</div>
<div class="col-md-8">This div takes up 2/3 of the available width on a desktop</div>
</div>
Use bootstap's class col-lg-6 col-md-6 col-sm-12 col-xs-12 for both main div of login and registration is and you can reffer the site http://getbootstrap.com/css/#grid and http://getbootstrap.com/css/#forms
example:
<div class="container-fluid">///or container
<div id="login" class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
///your login form
</div>
<div id="registration" class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
///your registration form
</div>
</div>
Use a bootstrap grid: http://v4-alpha.getbootstrap.com/layout/grid/ (that's the v4 documentation, but v3 (the standard) works the same and v4 documentation is better). See also w3schools' tutorial: http://www.w3schools.com/bootstrap/bootstrap_grid_basic.asp
Adding .col-xs-12 makes my element take up 100% space not only in mobile, how do I make it narrower on desktop? Should I nest additional column classes like .col-md-4 and such?
This is what it looks like on desktop:
.col-xs-12 will render as the default for all viewport sizes if you don't specify a different value for larger screens (eg .col-lg-4 / .col-md-6 / .col-sm-8)
Without seeing your code I can't tell what you are actually trying to achieve, but if you only want the bar to take up 50% in laptop/desktop views for example you would have the html as follows:
<div class="col-md-6 col-xs-12">
Keep in mind that you will need to balance out your grid in the larger views if you go this way (12 columns within the row) http://getbootstrap.com/css/#grid-options
I'm not quite following you but I think you're after the following behaviour
<div class="col-md-6 col-sm-12 col-xs-12">
this will allow for full width on xs and sm viewports