I've been using bootstrap 4 on my angular 12 project for a while, and today I've upgraded to bootstrap 5.
I know some properties have changed, but I've read that the grid system is identical.
I regularly use "Mix and Match" columns as written in the documentation, for example
<div class="container">
<div class="row">
<div class="col-12 col-sm"></div>
<div class="col-12 col-sm-auto"></div>
<div class="col-12 col-sm"></div>
</div>
</div>
This example it's working very well with Bootstrap v4.* but not on v5.
It is supposed to have only 1 row where the first and third columns try to get all the available space and the second column fits your content.
What I saw on the Chrome DevTools that the col-12 class takes precedence over the col-sm class, even on larger screens.
Any ideas to try to solve this problem?
As I recently answered here, this is a bug that was introduced in 5.0.2 because the order of the column declarations was changed, making col-12 override col-sm on all breakpoints.
Until it's fixed, a workaround in your case would be to simply remove the col-12 (it's not needed since col-12 is the default)...
<div class="container">
<div class="row">
<div class="col-sm">col</div>
<div class="col-sm-auto">col</div>
<div class="col-sm">col</div>
</div>
</div>
https://codeply.com/p/gUgPktyAyA
Related
This question has been asked AND answered multiple times such as here, here, and here,
but those were all for Bootstrap 4 - which is 11 months away from End of Life as of today, 2021-10-20.
With Bootstrap 5 being the only version of bootstrap both actively supported and without a stated Critical Support end date, I think it is worth finding a solution that works. Hence, I will ask the question again but updated for Bootstrap 5. I did try to comment on the existing answers, but my reputation is too low to comment. Perhaps that wasn't the right place, and was a sign that I should post a new question.
My goal is to have the following content layout.
The two layouts
On the left, my default/mobile layout has sections 1, 2, and 3.
But on bigger devices, I want section 2 on the left, and for sections 1 and 3 to be on the right.
I tried this, from linked question #1:
<div class="row d-sm-block">
<div class="col-sm-9 order-2 order-md-0 float-left">2</div>
<div class="col-sm-3 order-3 order-md-0 float-right">3</div>
<div class="col-sm-3 order-1 order-md-0 float-right">1</div>
<div class="col-sm-3 order-4 order-md-0 float-right">4</div>
</div>
On Bootstrap 4, it worked, but Bootstrap 5 it didn't:
first-solution
I tried these, from linked question #2:
https://www.codeply.com/go/8lsFAU3C5E
https://www.codeply.com/go/mKykCsBFDX
But change them to Bootstrap 5.0.2 or higher (I tried a few) and it will not float (visually) #2 to the left.
There is another answer on linked question #2 that looks close, but on either bootstrap it isn't correct:
question 2, answer 3-ish
because it will make the first section as tall as the second section, forcing the third to always be alone.
So I am wondering if anyone has a solution for Bootstrap 5. Anything I can do to change these classes to make it display correctly?
Here is a fiddle with Bootstrap 5 ready to go, with my 3 sections: https://jsfiddle.net/uroabnxz/
Alternatively, perhaps this is a bad idea and maybe there is a reason Bootstrap broke this - intentionally? If someone advises against this, I could always duplicate the HTML, and display/hide it based on viewport/breakpoints. I didn't want to do that as it feels dirty, but if most people think it is an okay solution, I can do that.
To get the same result as a picture above you need to use display: block and floats instead display: flex. And also in Bootstrap v5 the floats were renamed.
Renamed .float-left and .float-right to .float-start and .float-end. migration to v5
<div class="d-block">
<div class="col-12 col-sm-6 bg-primary float-end">1</div>
<div class="col-12 col-sm-6 bg-secondary float-start">2<br />is<br />taller</div>
<div class="col-12 col-sm-6 bg-info float-end">3</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" />
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<h1>Hello, world!</h1>
<div class="container">
<div class="d-block">
<div class="col-12 col-sm-6 bg-primary float-end">1</div>
<div class="col-12 col-sm-6 bg-secondary float-start">
2<br />is<br />taller
</div>
<div class="col-12 col-sm-6 bg-info float-end">3</div>
</div>
</div>
Bootstrap 5 seems very natural to settle into in my experience so far, go for it! I find it less different than swapping from v3 to v4. Ordering according to a responsive display is fully addressed, here are the Docs, scroll down to Reordering (Order Classes)....
https://getbootstrap.com/docs/5.0/layout/columns/
I am new at foundation zurb. So, I have a rails app with foundation-rails gem installed. And I am testing out some sample codes from the foundation doc.
Here's what I got:
<div class="row">
<div class="small-2 large-4 columns test1">small2 large4</div>
<div class="small-4 large-4 columns test1">small4 large4</div>
<div class="small-6 large-4 columns test1">small6 large4</div>
</div>
<div class="row">
<div class="large-3 columns test1">large-3 columns</div>
<div class="large-6 columns test1">large-6 columns</div>
<div class="large-3 columns test1">large-3 columns</div>
</div>
Like in the documentation, I would expect the inner divs line up in a row (12 columns in total), but for some reason I am getting something like this, the inner divs are stacked up on top of each other. I added custom css .test1 to give it an outline so that it's easier to see where the borders are. I have tried tweaking classes around, resizing browser and all, but the columns always stack up as 3 rows instead of one row. This screenshot is taken with browser view maximized.
Any insight?
UPDATE (SOLVED):
So, it was indeed my ActieAdmin that's conflicting with Foundation. After looking around, this other thread on stackoverflow gave me the solution.
Rails Active Admin css conflicting with Twitter Bootstrap css
Essentially just move ActiveAdmin css file (app/assets/stylesheets/active_admin.css.scss) to (vendor/assets/stylesheets/active_admin.css.scss)
That fixed it!
I am using Bootstrap v 3.0.3. Bootstrap's offsets aren't working for me.
Here is a relevant example :
<div class="col-sm-8 col-sm-offset-2-popup col-md-4 col-md-offset-4-popup">
....
</div>
In small devices, col-md-offset-4-popup gets applied instead of col-sm-offset-2.
Anybody knows why this is happening?
What is a '-popup'?
If you want move columns to the right using .col-md-offset-*classes without '-popup'.
For example <div class="col-md-3 col-md-offset-3"></div>
col-md-offset-x-popup doesn't exist in Bootstrap framework. In fact, there's not a single class containing the popup keyword. If it's a custom class, be sure it won't interfer with Bootstrap base classes.
As Bootstrap is mobile first, here's what you should use :
col-xs-8 col-xs-offset-2 for extra small devices
nothing more for small devices (will keep -xs values)
col-md-4 col-md-offset-4 for medium devices
nothing more for large devices (will keep -md values)
<div class="col-xs-8 col-xs-offset-2 col-md-4 col-md-offset-4">
...
</div>
Bootply
Try adding col-xs-offset-* with other classes in your div tag
I have been using twitter bootstrap for a year, its the one of those things which -"just works" . With release of twitter bootstrap3 its become even better and awesome with its mobile first approach. But i am not able to understand how to use it properly with mobile first approach.
Earlier there was .span* and .offset* class but now there are .col-xs-* .col-md-* .col-sm-* .col-lg-* and .col-xs-offset-* .col-md-offset-* classes respectively. Even now 'it-just-works' using .col-md-* i want to know the right way to use all these classes so as to not just use them but use them correctly to get most out of bootstrap3.
Thanks.
I found these links very helpful:
http://www.helloerik.com/bootstrap-3-grid-introduction
http://bootply.com/bootstrap-3-migration-guide
Currently I'm using Bootstrap 3 for web development, how I'm using the Grid system is,
<div class="container">
<div class="row">
<div class="col-md-9"> <%--this for 9X3 grid--%>
<div class="row">
<div class="col-md-6"> <%--this for 6X6 inner grid--%>
</div>
<div class="col-md-6">
</div>
</div>
</div>
<div class="col-md-3">
</div>
</div>
</div>
I found (a) Bootstrap's own documentation helpful here, but also a (b) lynda.com topic in migrating to Bootstrap 3. Specifically, see "Dealing with grid changes"
(a) http://getbootstrap.com/css/#grid-offsetting
(b) http://www.lynda.com/course20/Bootstrap-tutorials/Bootstrap-3-New-Features-Migration/138156-2.html
I have a demo site which is located here to give you an idea of what's going on. If you scroll to the bottom where you see the 9 individual posts they are all laid out properly. How ever if you shrink the screen to anything less then 1232px's youll see that the 7th post breaks away from the others and shifts down.
Now I am using default styles to align them as such, using row and then span4. Can any one explain why this happens? And any way to fix it?
Your span totals should add up to 12. Your example site however adds up to more than 40! I don't think there is any defined behaviour for what should happen if you don't use it as intended.
From Bootstrap homepage
"The default Bootstrap grid system utilizes 12 columns"
So the total of your spans must add to 12 per row. ie.
<div class="row">
<div class="span4">...</div>
<div class="span8">...</div>
</div>
<div class="row">
<div class="span3">...</div>
<div class="span3">...</div>
<div class="span3">...</div>
</div>
<div class="row">
<div class="span7">...</div>
<div class="span3 offset2">...</div>
</div>