I created a custom-class CSS class which I applied in the col div. That column contains dynamic images, which is why I used a vertical scrollbar.
On a desktop, it displays correctly. However, in mobile view it is broken or exceeds a row or section.
How can I apply vertical scrollbar that will not affect col in mobile view?
In short my overflow floating over the screen in mobile view.
.custom-class {
position: absolute;
overflow-y: auto;
height: 350px;
-webkit-overflow-scrolling: touch;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<div class="row">
<div class="col-xl-12">
<section class="py-5 header">
<div class="container py-4">
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-9">
<div class="tab-content">
<div class="col-md-12">
<div class="row">
<div class="col-sm-7"></div>
<div class="col-sm-5 p-0">
<div class="col-md-12 custom-class"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
Answer was so simple. removing absolute position worked for me. Absolute position disturb in mobile view.
I have a question about the bootstrap 4.1 reordering. According to the documentation:
Reordering
Use .order- classes for controlling the visual order of
your content. These classes are responsive, so you can set the order
by breakpoint (e.g., .order-1 .order-md-2). Includes support for 1
through 12 across all five grid tiers.
I've tried to set the reordering only on small and medium screens, using the .orderclasses as showed in the docs, but it will reorder the contents also on larger breakpoints, I'm doing this wrong?
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 col-lg-4 order-sm-2">
<!-- some contents here -->
</div>
<div class="col-sm-12 col-lg-8 order-sm-1">
<!-- some contents here -->
</div>
</div>
</div>
You need re-order in larger breakpoints, because bootstrap is mobile first approach, (it means it is using min-width in media queries), so when only using sm it will apply properties from sm and up (including md and lg).
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 col-lg-4 order-sm-2 order-lg-1">
mobile 2nd and then desktop 1st
</div>
<div class="col-sm-12 col-lg-8 order-sm-1 order-lg-2">
mobile 1st and then desktop 2st
</div>
</div>
</div>
One more thing to know about order in BS4, is that you can you use order-X-first, order-X-last and order-X-0, so here a snippet with those classes. You can see them in this answer
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 col-lg-4 order-sm-last order-lg-first">
mobile 2nd and then desktop 1st
</div>
<div class="col-sm-12 col-lg-8 order-sm-first order-lg-last">
mobile 1st and then desktop 2st
</div>
</div>
</div>
This is the default behavior of Bootstrap and is expected.
To say it in short words, all bootstrap's breakpoint suffixes (-sm -md ...) work from that breakpoint upward.
So if you set col-sm-6 that means your column will be half the size of row from in sm breakpoint and md and lg unless you overwrite it (e.g. col-md-2 ).
It all goes back here (using min-width in media queries)
Here is an example, how you can do this with media queries:
<div class="row">
<div class="col-12">
<!-- some content -->
</div>
<div class="col-md-9">
<!-- some content -->
</div>
<div class="col-md-3 move-down">
<!-- some content -->
</div>
<div class="col-md-6 move-up">
<!-- some content -->
</div>
<div class="col-md-6">
<!-- some content -->
</div>
</div>
#media (max-width: 767px) {
.move-down {
order: 2;
}
.move-up {
order: 1;
}
}
Have you tried doing order-1, this sets the default for larger screens
<div class="col-sm-12 col-lg-4 order-1 order-sm-2">
<!-- some contents here -->
</div>
<div class="col-sm-12 col-lg-8 order-2 order-sm-1">
<!-- some contents here -->
</div>
Source: Column ordering in Bootstrap 4
I ran into some issues with this as well. Here's the following code that got it to work for me:
<div class="container-fluid">
<div class="row">
<div class="col-sm-6 order-sm-2 order-1">
<!-- some contents here -->Content1
</div>
<div class="col-sm-6 order-sm-1 order-2">
<!-- some contents here -->Content2
</div>
</div>
</div>
Edit: Removed .order-md class from respective columns.
Looking at bootstrap v4 updates:
https://getbootstrap.com/docs/4.0/migration/#grid-system-1
...Dropped push and pull modifier classes for the new flexbox-powered order classes. For example, instead of .col-8.push-4 and .col-4.pull-8, you’d use .col-8.order-2 and .col-4.order-1.
But when I use the order function it doesn't seem to work the same as the push pull method. It stacks the rows up just like the first row in the code below.
My goal is to have a img on the left with text on the right on one row then text on the left and a img on the right on the next row on a desktop. When its resized in a smaller screen I would like each image stacked on top of the text it corresponds with.
<div class="container">
<div class="row">
<div class="col-md-4">
<!--img-->
</div>
<div class="col-md-8">
<!--text-->
</div>
</div>
<div class="row">
<div class="col-md-8 order-2">
<!--text-->
</div>
<div class="col-md-4 order-1">
<!--img-->
</div>
</div>
</div>
If you want to change order for example on md you can define first normal order for that size and then order-n for all smaller sizes. So your code should look like this.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-md-4">
img
</div>
<div class="col-md-8">
text
</div>
</div>
<div class="row">
<div class="col-md-8 order-2 order-md-1">
text
</div>
<div class="col-md-4 order-1 order-md-2">
img
</div>
</div>
</div>
So basically I want to have 2 extra panels show up on the left and right on md and higher, but hide it when on sm and xs. The hiding works fine, but not the showing.
They do show up on the left and right, but the problem is the spacing between the crumbs and navigation. The crumbs get pushed down as I add content to the right panel. When I add to the left panel it gets pushed to the side..
Nothing on the left but something on the right is the same as the first picture
Here's what I mean:
I need it to be on the third picture so that crumbs stay right below nav.
Here's my code:
<div class="container">
<h1>Bootstrap grid (Bootstrap)</h1>
<div class="site-box">
<div class="container-fluid">
<div class="row">
<!-- HEADER -->
<!-- Logo -->
<div class="col-xs-4 col-md-3">
logo
</div>
<!-- Search -->
<div class="col-xs-8 col-md-6">
search
</div>
<!-- Control Panel -->
<div class="col-xs-12 col-md-3">
control panel
</div>
</div>
<div class="row">
<div class="col-md-3 hidden-xs hidden-sm">
extra panel
</div>
<!-- NAVIGATION -->
<div class="col-xs-12 col-md-6">
nav
</div>
<div class="col-md-3 hidden-xs hidden-sm">
extra panel
</div>
<div class="clearfix visible-md-block"></div>
<!-- Crumbs -->
<div class="col-xs-12 col-md-6 col-md-offset-3">
crumbs
</div>
</div>
</div>
</div>
</div>
If you want the crumb to stay under nav, then put both in one container with col-md-6, and give them both col-md-12.
The reason I suggest that is because it looks like the content in 'extra panel's changes (pic 2 to pic 3), so affecting the height of the 'extra panel's.Getting crumb to sit in the middle with the container heights next to it changing could be challenging.
I'm building a website using Bootstrap 3.
Part of this site are 4 div-containers:
<div class="container">
<div id="content" class="row">
<div class="col-sm-4 col-md-3" style="background-color:#00F; color:#FFF">
Menu
</div>
<div class="col-sm-12 col-md-3 col-md-push-6 " style="background-color:#F00;">
<div class="row">
<div class="visible-md visible-lg col-md-12" style="background-color:#F08;">
Mod_1
</div>
<div class="col-md-12" style="background-color:#F80;">
Mod_2
</div>
</div>
</div>
<div class="col-sm-8 col-md-6 col-md-pull-3" style="background-color:#0F0;">
Main content goes here
</div>
</div>
</div>
Layout-View is shown here:
Code on Fiddler
"Mod_1" is only visible in the desktop view like expected. "Mod_2" should move above the Menu and Main container in the tablet view, but I can't find a way to place the container on top of both of them.
I already tried to use the col-sm-[colnumber]-push and -pull classes. But I didn't get the right results.