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>
Related
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
I understand the problem, as described and answered here.
I have quite a complicated layout with a sidebar navigation, a top navigation, a fluid-container and then page-title and page-body structure for each page. So just adding another container did not solve the problem as suggested in that answer.
Once I get into the page-body, all the rows are stretching 'outside' the parent page-body.
Notice I have added padding to the default container-fluid to 'pull' all the content in from each side of the page. Removing them does not fix it.
I've tried every change I can think of except removing the padding from the default row, because I'm pretty sure that is a no-no.
Anyone have any idea how to get those pesky form controls to stay 'inside' the page body?
There is two solution either give an additional class to row and manipulate its layout or don't use row use <div class="col-md-*" /> without parent .row class div as many times u want and use <div class="clearfix"> if you want to break forcefully to next row
EDIT:-
For example
<div class="row">
<div class="col-md-4">div1</div>
<div class="col-md-4">div2</div>
<div class="col-md-4">div3</div>
</div>
<div class="row">
<div class="col-md-4">div4</div>
<div class="col-md-4">div5</div>
<div class="col-md-4">div6</div>
</div>
The same can be achieved without .row class
<div class="col-md-4">div1</div>
<div class="col-md-4">div2</div>
<div class="col-md-4">div3</div>
<div class="clearfix">div4</div>
<div class="col-md-4">div5</div>
<div class="col-md-4">div6</div>
<div class="col-md-4">div1</div>
This is an easy question. But what I want to know is: Is there a way to delete a div without removing its content USING bootstrap? I can also refactor the question to: Is there a way to delete a div CLASS dynamically with Bootstrap?
My code is simple:
<div class="container">
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8">
GOOGLE MAP
</div>
<div class="col-md-2"></div>
</div>
</div>
I know there already exists a way to make it visible and or hide it (hidden-phone ..), but what I want to do is actually remove the container, the row and the cols and leave the google map to fill the whole width.
What I have right now is:
<div class="container hidden-phone">
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8">
<div class="googleMap"> ... </div>
</div>
<div class="col-md-2"></div>
</div>
</div>
And then, right after that, I add the div of the google map again. But instead of hidden-phone, now:
<div class="googleMap visible-phone"> ... </div>
This way, when you switch to a phone, the container and separations of the map with the screen are none.
This is the easiest way, but it seems a little unpractical, because maybe I don't see one, but it is there, so I'm downloading the map into the client twice, I believe that is not clever.
I could always use JavaScript(jQuery) to listen to the event of resizing and remove it my self.. That is not a problem at all, but maybe bootstrap has a build-in functionality already, something like a data attribute like "data-hidden-phone-class='someClass'", or maybe a class that hides some classes when resizing like: "hidden-classes-phone" this way when the screen resizes to a phone one, boostrap would hide all the classes of that element? Or something.
I know the names for attributes and classes are not attractive, but is for the purpose of the question.
I hope I made myself clear enough, let me know if you don't understand something, thanks!
So I'm currently developing my resume website with bootstrap and am having a bit of trouble with getting my rows to mesh and display right.
I know why the problem is occurring (my education module is extending the height of the row too far), but I'm not sure how to fix it.
As of now, I have two rows: the top row is my Skills and Education row, while the bottom is my experience and a blank module.
I've tried nesting rows (maybe I didn't implement it correctly?), as well as messing with fluidity, responsiveness, etc.
Is it something easy that I'm just overthinking?
http://i.imgur.com/U5DIZ1M.jpg
Add this in your CSS code
#education{
float: right;
}
You need to have two columns in a row, and then nest the two sections in the left column.
Fiddle
<div class="row-fluid">
<div class="span8">
<div class="row-fluid">
<!--Skills-->
</div>
<div class="row-fluid">
<!--Experience-->
</div>
</div>
<div class="span4">
<!--Education-->
</div>
</div>
Is it possible to prevent certain data from appearing depending on the size of the device?
For example, I'm in the process of removing a table - I'm changing it to a grid made up of <div> tags.
If the user is on a desktop, I'd like to be able to show something like this:
<div class="row show-grid" id="tblheading" naming="tblheading">
<div class="span1">Branch</div>
<div class="span1">Branch Name</div>
<div class="span1">Building</div>
<div class="span1">Building Name</div>
<div class="span1">Room</div>
<div class="span1">Asset Name</div>
</div>
<div class="row show-grid">
<div class="span1">CAN</div>
<div class="span1"></div>
<div class="span1">CAN-Building1</div>
<div class="span1"></div>
<div class="span1">CAN-Building1-Room1</div>
<div class="span1">Value 123</div>
</div>
<div class="row show-grid">
<div class="span1">CAN</div>
<div class="span1"></div>
<div class="span1">CAN-Building2</div>
<div class="span1"></div>
<div class="span1">CAN-Building2-Room1</div>
<div class="span1">Value xyz</div>
</div>
But if they're on a mobile device, I don't want to display the first "row" with the headers. If possible, I'd also like to remove some of the other fields and only show the asset name for mobile devices.
I'm just new to responsive design so I apologize for any remedial questions. If you can point me in the right direction, I'd appreciate it.
Thanks.
If you look here in the Bootstrap docs, it talks about the built-in classes for this.
You could use these classes to show and hide columns or rows based on screen size. If the differences are significant enough, you could create multiple tables and show the appropriate one for each size.
It's just a case of adding a class to the rows/ cells you'd want to hide and then having that class set to display: none in the media queries targeting mobile devices.
I think the twitter bootstrap even has such classes already built in, but can't remember the exact names.