This question already has an answer here:
How to left column fixed and right scrollable in Bootstrap 4, responsive?
(1 answer)
Closed 3 years ago.
I'm currently working on an HTML page that uses Bootstrap4. My idea is to have a split screen layout with a logo on the right side and a signup form on the left. I also need the page to be scrollable because the signup form is on the long side. So far finding a tutorial where the page scrolls has been an issue.
However, I have gotten it to work like so:
<div class="container-fluid h-100">
<div class="row h-100">
<!-- 1st half -->
<div class="col-sm-6 col-2 h-100 py-2 d-flex align-items-center justify-content-center fixed-top" id="left">
<h5 class="hidden-xs-down">
<!--First half content here (fixed col)-->
<p> I don't scroll </p>
</h5>
</div>
<div class="col-sm-6 invisible col-2"><!--hidden spacer--></div>
<!-- 2nd half -->
<div class="col offset-2 offset-sm-6 py-2">
<!--Second half content here (scrollable col)-->
<p> I do scroll </p>
</div>
</div>
</div>
CSS is pretty simple:
body, html {
height: 100%;
}
This code works perfectly, however is is not responsive. I am hoping to make it so that when the window get's smaller (or if a user is on mobile) the 1st column does on top and the second column is on the bottom.
Any idea on how I can accomplish this? Thanks.
TBH I'm not getting why you are using that col-2, col and offset-2 maybe I understood something wrong but based on what I saw in the fiddle (I create with your markup). This isn't necessary at all for what you want to achieve. Instead you should use col-12 and an appropriate offset-sm. In BS3 it was col-xs for mobile devices but that changed.
I adapted the markup in a way that it does what your question asks for! All from my perspective useless bootstrap classes were removed that influenced the grid layout. It was necessary to add one line of CSS to reset position:fixed when size reaches mobile breakpoint e.g. col-XX. I colored the <div> and added some content to better see the result.
https://jsfiddle.net/vaefh780/4/
Related
I'm working with Bootstrap 3 and I have a grid system like this:
<div class="row">
<div class="col-xs-4 offset-xs-4 col-sm-1 col-md-1 col-lg-1">
<img src="https://sitename.com/img/logo.jpg">
</div>
<div class="offset-xs-4">
</div>
</div>
And the result on xs devices goes like this:
But I want the logo to be placed in the center by using offset classes. Therefore I tried adding offset-xs-4 to the class that contains logo and also added another div with offset-xs-4 class after that.
But the problem is, it does not seem to be working and still shows the logo at the right side.
So the question is, how can I properly place this image in the center of screen when it comes to xs devices by using offset classes?
Bootstrap 3 offset classes isn't offset-xs-4; it is col-xs-offset-0
I think you should confirm the Bootstrap version you are using and use the right documentation:
Bootstrap 3 Offsetting columns documentation
I am trying to make a layout work, using Bootstrap 4, but there is a problem with the positioning of elements on mobile. Maybe someone here could help me out, please :)
Here is the layout I want:
Image with layout
So, as you can see it's a 2-column layout for desktop and 1-column layout for mobile.
To create this layout I created a row and made 2 columns:
<div class="row">
<div class="col-md-12 col-lg-8 col-12">
<div id="productimage"></div>
<div id="description"></div>
<div id="reviews"></div>
</div>
<div class="col-md-12 col-lg-4 col-12">
<div id="pricebook"></div>
<div id="location"></div>
</div>
</div>
So, on desktop this works smoothly.
But on mobile, I want Price & Book div from Column 2, to actually go right below the Product Image div. However, it obviously goes below Reviews div with the current code.
So, how could I make this work?
Thanks!
(I've tried making all divs to be columns, but then the desktop layout breaks if the height of the elements is not ideal, and that happens, because the divs in the right column on desktop can have different height depending on content. I've tried separating this into more rows, but same problem).
You could also try creating a duplicate "Price & Book" div which remains hidden in desktop view and only shows up in mobile view. Where as the original "Price & Book" div should only be visible in desktop view.
Responsive utilities in Bootstrap
I have a legacy application which is built with Bootstrap 3.0.3. It is not possible for us to update Bootstrap in this case.
That said, I am trying to with with 3.0.3 to use the affix functionality.
I have the following which I've also set up on jsfiddle: https://jsfiddle.net/x8fc9opm/8/
What I'm trying to do is have a .col-md-8 (red bordered) left area with a "library" of items in a .col-md-4 (blue bordered) on the right.
The left area may grow to be very long and I want the blue one to always be visible even if the user scrolls down.
So I've added the following to .col-md-4:
<div class="col-md-4 tag-container" data-spy="affix" data-offset-top="60" data-offset-bottom="200">
When I run this, with the affix moves to the left and overlaps the red area!
Why is this? I thought affix was designed to fix the content in place.
What am I doing wrong here?
In your fiddle, when opening the console it gives the message Uncaught Error: Bootstrap requires jQuery. When this is added above the other scripts, affix works as expected.
Also wrap the column that needs to stay fixed. Change:
<div class="col-md-4 tag-container" data-spy="affix" data-offset-top="60" data-offset-bottom="200">
...
</div>
To:
<div class="col-md-4 tag-container">
<div data-spy="affix" data-offset-top="60" data-offset-bottom="200">
...
</div>
</div>
I've got a view with Angular (v.5) components, that uses Bootstrap for making the layout in the screen. So I've got various controls, one at the left, which uses most of the space (col-md-8), and two controls which are inline, in the right part (col-md-4).
Even trying col-sm I notice that in little displays (less than 1280px), the two components in the right, get overlapped one over the other. Check:
This is how it looks in big screens, the intended behavior
But one of them "mounts" over the other like this, when you make the window a little smaller
It even reaches this point...
But when you make the window really really small, it looks like this, which is fine in my opinion.
I want to do that one of these components, actually just puts in top or bottom side of the other, or simple get advantage of all the free space, instead of getting overlapped by the other like it currently does.
This is the current code of this header of my template, give it a look:
<div class="row">
<div class="col-md-8">
<segments [config]="config"></segments>
</div>
<div class="col-md-4 date-positioning">
<div class="row">
<div class="col-md-4 col-sm-4">
<granularity [config]="config" ></granularity>
</div>
<div class="col-md-8 col-sm-8">
<date-picker-wrapper [config]="config" [dateranges]="dateranges" [doubleDateRange]="true" ></date-picker-wrapper>
</div>
</div>
</div>
</div>
What you see are the granularity and daterangepicker components, the segments one is the component you see in the final image, which occupies most of the left side of the screen (but there's a reason for that)
So, any ideas on how to style this properly with Bootstrap, so this weird behavior doesn't happen?
I have used Bootstrap 3 for a couple of projects recently and love the way how simple it can work. Nevertheless I now have some questions where I don't really know how to use it. If I'm having a few divs which are tiled, I'm wondering how the best way would be to change the order, or the position within the grid on different breakpoints. I made a simple visualisation to explain my problem:
On the left hand side, you see the state on large desktops, and on the right hand side how it should look like on the next smaller breakpoint. The problems I currently have are: How would I handle the blue div on .row1, to have the red div on .row2 next to it on the right in a new row.
And on the breakpoints, would it be possible for the red div, to move to another row?
I'm searching for a Bootstrap/CSS only way, but if it is definitely not working without JS/jQuery, I would appreciate those suggestions too.
Hope you get my point. Thanks!
Edit: Related image to my other question in #Danko 's answer, which was how to switch tiles on different breakpoints.
You will need to manage the same logic but don't slice your desgin in two rows, just one:
<div class="container">
<div class="row">
<div class="col-md-8 col-lg-6 B"></div>
<div class="col-md-4 col-lg-3 G"></div>
<div class="col-md-4 col-lg-3 G"></div>
<div class="col-md-12 col-lg-6 O"></div>
</div>
</div>
Check this DemoBootply