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">
Related
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.
I have a doubt. If I want same col size like col-*-12 for all view port, shall I write simply col-xs-12 (or) col-xs-12 and col-sm-12 (or) separate col-*-12 classes for all view ports?
Thanks in advance.
The column classes in Bootstrap apply to viewports greater than or equal to the minimum size for the class.
For example, the sm classes apply to viewports >= 768px, while lg applies to viewports >= 1200px. See: http://getbootstrap.com/css/#grid-options
This means you only need to add the class for the minimum viewport size you want.
If you end up with: col-xs-12 col-sm-6 col-md-6 col-lg-6, you can minimise it down to: col-xs-12 col-sm-6 and all viewports over 768px wide will have the col-sm-6 style applied.
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
Just getting into Bootstrap 3 and was wondering what best practices are regarding class tags for multiple viewports. For example, just to offset my navbar-brand it looks like the following which just seems messy (but I guess this is one of the complaints regarding Bootstrap):
<div class="col-xl-11 col-xl-offset-1 col-lg-11 col-lg-offset-1 col-md-11 col-md-offset-1 col-sm-11 col-sm-offset-1 col-xs-11 col-xs-offset-1">
Seems like there is a better and more concise way to write this will retaining the dynamic elements for each viewport size.
Simple answer is - Think mobile first
<div class="col-xl-11 col-xl-offset-1 col-lg-11 col-lg-offset-1 col-md-11 col-md-offset-1 col-sm-11 col-sm-offset-1 col-xs-11 col-xs-offset-1">
is the same as
<div class="col-xs-11 col-xs-offset-1">
So, first apply rules starting from the -xs smaller size and move towards -lg (or xl in your case)
Example
Let's say you want an full width element on mobile -xs, 3/4 on the desktop -md and half width on -lg. What you should come up with is
<div class="col-md-8 col-md-offset-2 col-lg-6 col-lg-offset-3">
Note that you don't define col-xs-12 because it will be set by default for you. For the -sm in this case will also be col-sm-12 set by default
For the more info please read http://getbootstrap.com/css/#grid
you don't need to set the size for each of the screen sizes, just 1 for mobile and 1 for desktop and if you really want to, use 2 different sizes for desktop if that's what you want.
Another tip I can give you is to you the container-fluid
so it will fill automatically to the parent size
I'm writing some code with bootstrap and i often use "container-fluid col-lg-3 col-md-3 col-s-3 col-xs-3" or "container-fluid col-lg-6 col-md-6 col-s-6 col-xs-6". I was wondering if there was a way to reduce the code i write and not write these lines multiple times.
Thanks
col-lg-3 col-md-3 col-s-3 col-xs-3 is actually same as using only col-xs-3
The best way to think about the grid classes is that they work from mobile up. This means by default your grid will stack from mobile up until the grid class breakpoint you’ve used is reached.
For example, using .col-lg-4 means your grid will stay stacked on mobile, tablet, and small desktop screens. Only until the large desktop breakpoint is reached will the grid go horizontal.
Side notes:
col-s-3 should be col-sm-3.
container-fluid is a container class and should not be with the column classes
General structure should be something like:
<div class="container-fluid">
<div class="row">
<div class="col-xx-x">
Column
</div>
<div class="col-xx-x">
Column
</div>
</div>
<div class="row">
...
</div>
</div>
There is no need for so many classes if width is gonna be three colunms on all screen sizes. It is enough to start from smallest screens col-xs-3 and width will be the same on all breakpoints. Another thing don't use column classes with container clases. Bootstrap structure goes first container then row and then columns.