Hi y'all I'm trying to understand why my columns are stacking on top of each other instead of being side by side.
Here's a screenshot of my page: Everything above the shopping cart I want to be to the right of the main page content like a side bar but I'm struggling to make that happen
And here is my html
<div class="container-fluid">
<div class="row">
<div class="col-sm-9 col-md-6 col-lg-8">
<app-grocery-sidebar></app-grocery-sidebar>
</div>
<div class="col-sm-9 col-md-6 col-lg-8">
<recipes></recipes>
</div>
</div>
</div>
The bootstrap grid system has 12 columns per row. If the total number of columns is greater than 12, then the spare columns will wrap into the next row.
In your example, for small screens you have 2 x col-sm-9 classes, which makes a total of 18 columns. For medium screens you have 2 x col-md-6 classes, which makes a total of 12 columns, so it should work fine for this screen size, each column should have the same width. For large screens you have 2 x col-lg-8 classes, which makes a total of 16 columns.
You need to decide what % of the screen you want your sidebar to take up on large screens. For example, say you want it to take 25% of the screen, then you should give col-lg-3 to the sidebar and col-lg-9 to the recipes. If you want this to be the case on all screen sizes, then use col-3 and col-9 respectively.
If you want to give 33% of the screen to you sidebar, then you should use col-lg-4 and col-lg-8 respectively.
col-lg-2and col-lg-10 will give 16.6% of the screen to the sidebar and 83.3% of the screen to the recipes.
col-md-6 for both, will give each element equal width of the screen on medium sized screens.
If you want all columns to take up equal space, you can also just use the col class on each element.
Read more on the Bootstrap docs for their Grid system.
Related
So i am creating a tribute page in which you can view here --> https://codepen.io/Mike-was-here123/pen/xpEqWX
This is all based on the jumbotron in which you can find on lines 2 & 3 of the code.
This is col-lg-8 with offset-lg-2 to center it, 1920px width:
This is also col-lg-8 in effect, with a width of 993px:
Then it finally switches over to col-md-12 at around 990px. This now makes it so the jumbotron takes up all 12 columns giving the text more space:
As you can see, there is lots of range for the lg. It has the same affect at 1000px as 1920px. This can make it annoying as my lg setting looks good at 1920px, but by around 1000px it still hasn't switched over to md, causing the images to be awkwardly small. This is around a 1000px difference and is messing me up. Is there anyway i can go in between lg and md, and so with any other size? Is it a class like col-lg- that i can use to maybe add 10 columns and 1 offset at the halfway point between lg and md? Would i have to check using #media (css) to then change the columns that way if possible?
Instead of
<div class="col-lg-6 col-md-12 col-sm-12 col-xs-12">
could you use?
<div class="col-xl-6 col-lg-12 col-md-12 col-sm-12 col-xs-12">
just use
<div class="col-xs-12 col-lg-6">
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
I started learning bootstrap from GetBootstrap source and I saw an example:
<div class="row">
<div class="col-xs-9">.col-xs-9</div>
<div class="col-xs-4">.col-xs-4<br>Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
<div class="col-xs-6">.col-xs-6<br>Subsequent columns continue along the new line.</div>
</div>
Now col-xs-9 means they should take 9 columns on mobile. It is also taking 9 columns on my desktop screen. How is that happening?
Note: Grid System in framework is 12 column layout.
Yes it's functioning properly as expected because whenever you apply a class.
Let suppose xs then it the same property will be applied to xs and screen greater than of that size.
So in your case col-xs-9 will be applied to extra-small screen and screen having resolution greater than that.
If you want it to take 100% of the width on desktop, try <div class="col-xs-9 col-md-12">.
Each column equals 1/12th of 100% width. Therefore if you want to get 100%, then the column sum needs to equal 12.
<div class="row">
<div class="col-xs-12 col-md-4"></div>
<div class="col-xs-12 col-md-4"></div>
<div class="col-xs-12 col-md-4"></div>
</div>
This example would make 3 DIVs below each other on mobile(12 = 100% width) but 3 DIVs per 100% width on desktops(4x3 = 100% width). This example is more often used in practice when you want DIVs to take up more width on smaller screens.
See this for a more detailed explanation. Also, I found this tutorial really helpful when I first started out trying to understand the grid system.
You can add different classes based on your Device width.
In Bootstrap grid system, it is scaled to a maximum of 12 columns. In the above example 9+4+6=18.
Sum should always be equal or less than 12.
Example
<div class="col-xs-9 col-md-5"> will take up 9 columns in mobile and 5 columns in desktop.
For Different devices :
col-xs-*(for mobiles)
col-sm-*(for small devices)
col-md-*(for desktops)
col-lg-*(for larger devices)
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