0

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.

ng150716
  • 2,195
  • 5
  • 40
  • 61

1 Answers1

0

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/

thex
  • 590
  • 2
  • 12
  • 1
    The OP was using `col-2`, `col`, etc... because the "working" code was copied from here: https://stackoverflow.com/questions/44086159 – Carol Skelly Mar 23 '19 at 11:42
  • @zim I see but this question AFAIK isn't a duplicate because the referenced one does not handle mobile breaking in a way the OP needs it – thex Mar 24 '19 at 11:40
  • 1
    It was covered in the comments and the answer was updated. The OP should've referenced or provided attribution for the other question when asking, as the code was clearly copied from it. And once more, it would've helped you to understand why the `col-2`, etc.. was in their question. – Carol Skelly Mar 24 '19 at 11:43
  • 1
    @Zim Thanks for pointing that out, I was over the weekend only on mobile and didn't check in detail the original answer were the `col-2` was "introduced" and the snipped was copied from. I do now understand why this was made and it makes sense now because the purpose was completely different from what the OP wants to achieve. I also noticed the responsive solution in the referenced post. It doesn't differ much from what I have suggested. So I'm at least glad that my suggestions goes in the right direction even if I didn't know the other one :). Thanks for pointing on the post and the solution! – thex Mar 25 '19 at 09:41