I have created the fiddle for reference: https://jsfiddle.net/qjpay7e3/3/
<div class="container">
<div class="row">
<label class="col-lg-4" >Gallery Plus</label>
<div class="col-lg-8">
<input type="checkbox">
</div>
</div>
</div>
Here I have two components and checkbox in div. I want both elements on the same line for that I used row class of Bootstrap 4.
But I don't know why I m not getting those elements on the same line.
Your code is perfectly fine. as you have used -lg therefore your label and checkbox is appearing on the same line for large screen.
Why it is not working for screen < large??
this is because styles in bootstrap are applied to up in hierarchy which means that if you had column -sm(smaller) applied than it would be applicable to screen in up hierarchy i.e to -md and -lg screen.
in your case u have applied it on -lg screen so it is only applicable to screen with size >= lg.
It's because of the column definitions, setting col-lg-4 and col-lg-8 automatically uses col-12 and col-12 meaning if your window is smaller than the lg minimum definition, they will drop a line to match the definition.
However, if you use col-4 and col-8, they appear on the same row. They dont appear on the same row when using the -lg modifiers as you probably arent using a screen that's wide enough
Related
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 would like to get unusual behavior bootstrap and media-query.
The content of one div (a) should be dependent on his width and not the width of the browser window. In the case of the picture (a) has a width of 600px and should be displayed as XS, and the container should act as LG.
You are thinking of Bootstrap incorrectly.
The point of bootstrap is to allow you to easily modify the behavior of elements depending on the width of the screen. If you're using only the grid system for example, all you're modifying is the width of the elements themselves based on the width of the screen.
If you want your a element to behave as sm at all times, regardless of the width of the screen (or at least until it reaches xs, for example) then you can use something like:
<div class=" div-a -col-sm-6"></div>
This will tell bootstrap to display the div A with 6 columns as long as the screen width is bigger than sm.
I'm not sure what you mean by "the container to act as LG" but I assume you mean it should be modified only for LG screens. Then:
<div class="container-div col-LG-12 col-*-newSize">
<div class=" div-a -col-sm-6">
*content*
</div>
<div class="container-b-c col-*-6"
<div class"div-b col-*-12"
-content-
</div>
<div class"div-c col-*-12"
-content-
</div>
</div> //End of container-b-c
</div> //end of container-div
where * is the size you need.
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
What is the difference in between below two methods?
Method #1
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
</div>
Method #2
<div class="col-md-12">
</div>
I'm using the second method and it works for all small and large devices perfectly then when do i need the first method?
This is a good question. I see a few others have answered it already, but I'd like to go a little bit more in depth in case you're curious.
In method 2, you're specifically saying "I want this container to take up the full 12 at 970px and above. Since it's a full 12, though, it will retain the full-width 12 all the way down to the smallest resolution. If, however, you had two col-md-6's, the 6's would become 12's when the screen goes below 970px due to the use of md.
In your first method, you're explicitly stating that you want the column to be the full 100% at all the breakpoints.
To answer your question "Why do I need the first method?", you simply don't. The first method is overkill since bootstrap will make them all 100% by default anyways. The only reason you would want to use something like the first method is if you want to show the content in different layouts at different resolutions.
For example:
<div class="col-sm-6 col-md-3">
</div>
This would make the column a 3 at all resolutions 992px and above (because of the md). By default, bootstrap would make the column a full 12 below 992px using the col-md-3 class but with the declaration of col-sm-6, you're overwriting it and making it a 6 on all resolutions between 768px and 992px. Everthing below 768px (col-xs-*) would still make the column a full 12. You could overwrite this by declaring a 'col-xs-*' class just as you did with the 'col-sm-6'
If a smaller resolution is not explicitly stated, it's going to be a 12. Anything you declare will apply to that resolution and above with the exception of the xs. xs will declare 768px and below.
Here is the official bootstrap documentation to show the grid options and their associated resolutions:
https://getbootstrap.com/css/#grid-options
Here's a bootply to help visualize this:
http://www.bootply.com/c0KgRryXcl
I hope that helps!
You won't notice a difference with col-md-12 as it's the full width of the container, but if you had 2 col-md-6's, they would look squished together on a small device, hence why you'd use col-xs-12, then the breakpoint would kick in and it would change from 50% to 100%.
The first method is useful if you want to change your proportions of divs when on a smaller device.
For example, you may have the following
<div class="row">
<div class="col-xs-12 col-md-6">
</div>
<div class="col-xs-12 col-md-6">
</div>
</div>
So on a small device, instead of each occupy half of the width (which will be small), the two columns will be stacking up
These classes are used for different devices resolution. your first method includes all devices like mobile , laptops, desktops and larger and second method includes only desktop.
This are grid classes in bootstrap,
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.
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
</div>
Bootstrap's grid system allows up to 12 columns across the page.
but 12 columns each row. Your code have added 60 columns in one row its wrong.
Basic Structure of bootstrap grid:
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
I'm making a responsive web page using bootstrap. It works as intended when the browser window is >= 50% of the screen size. I have some column elements nested inside of a column element, which is nested inside a row element. So, there are 3 children columns of each row, and then 4 children columns for each column. The problem may be occurring because I have a column nested inside of a column, but if that were the case then wouldn't it display incorrectly when the browser is full screen, too?
When the window shrinks to less than 50% of the screen size, the most nested columns display as rows. I don't understand why this is happening.
<div class="row foo" ng-repeat="foo in fooCtrl.foos">
<h4>{{foo.name}}</h4>
<div class="col-md-4 fuzz">
<h5>{{foo.type[0].fuzz}}</h5>
<!-- START BAR DISPLAY -->
<div class="col-md-3 bar" ng-repeat="bar in barCtrl.bars">
<h6>{{bar.name}}</h6>
</div>
<!-- END BAR DISPLAY -->
</div>
<!-- More columns -->
</div>
In simpler terms, the bars aren't being displayed as columns when the window size is < 50% of the screen.
The col-md-* bootstrap classes only apply at a media query breakpoint where the window width is greater than or equal to 992px. As others have stated, you will need to use col-xs-* as that is the default class used.
You can read more here: http://getbootstrap.com/css/#grid. As a best practice, you would typically wrap the maximum number of columns that could constitute a row in a div with the class row; however, that may not be your specific problem in this case. In most cases this is the set of elements with the lowest number (n) (col-*-n) that add up to 12 if you are using the default grid settings.
Some examples using your .bar classed elements:
4 columns of .bar elements on all devices:
<div class="col-xs-3 col-md-3 bar">
3 columns of .bar elements on extra small devices up to medium devices (992px in width) at which point 4 columns will display:
<div class="col-xs-4 col-md-3 bar">
2 columns of .bar elements up to medium devices, then 4 columns per row:
<div class="col-xs-6 col-md-3 bar">
And finally 1 .bar element per row up to medium devices, then 4 columns per row:
<div class="col-xs-12 col-md-3 bar">
You need to have a div within the larger column with class row. Then you need to know that if you are going to subdivide the larger columns, the way bootstrap works is that you would have up to 12 subdivisions, but with a smaller col, something like col-sm-12. But I am not too sure on all this. I have read and reread those bootstrap grid descriptions, and I am still trying to make sense of them.
<div class="row">
<div class="col-md-4>
<div class="row">
<div class="col-sm-3">
</div>
<div class="col-sm-3">
</div>
<div class="col-sm-3">
</div>
<div class="col-sm-3">
</div>
</div>
</div>
<div class="col-md-4>
</div>
<div class="col-md-4>
</div>
</div>
You've set the size only for md. You haven't set xs/sm/lg.
The default breakpoints for bootstrap are 768px, 992px and 1200px.
I suppose you have a HD Monitor the md-breakpoint is about half the screensize and the view will swith to sm ignoring col-md-x and using col-sm-x
Note: If nothing else set also set col-xs-12 to prevent weird behavior