Responsive Bootstrap Login Form

Question

I am building a login form for my web application using bootstrap for the styling. I have used the below "Meta Tag" to make the screen responsive

<meta name="viewport" content="width=device-width, initial-scale=1.0">

and multiple combinations of bootstraps col class of the grid system but to no avail.

<style>
.overlay {
    /* Height & width depends on how you want to reveal the overlay (see JS below) */
    height: 100%;
    width: 0;
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    background-color: rgb(0,0,0); /* Black fallback color */
    background-color: rgba(51, 51, 255, 0.9); /* Black w/opacity */
    overflow-x: hidden; /* Disable horizontal scroll */
    transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
}

/* Position the content inside the overlay */
.overlay-content {
    position: relative;
    top: 20%; /* 25% from the top */
    width: 100%; /* 100% width */
    text-align: center; /* Centered text/links */
    margin-top: 30px; /* 30px top margin to avoid conflict with the close button on smaller screens */
}

/* The navigation links inside the overlay */
.overlay a {
    padding: 8px;
    text-decoration: none;
    font-size: 36px;
    color: #818181;
    display: block; /* Display block instead of inline */
    transition: 0.3s; /* Transition effects on hover (color) */
}

/* When you mouse over the navigation links, change their color */
.overlay a:hover, .overlay a:focus {
    color: #f1f1f1;
}

/* Position the close button (top right corner) */
.overlay .closebtn {
    position: absolute;
}

/* When the height of the screen is less than 450 pixels, change the font-size of the links and position the close button again, so they don't overlap */
@media screen and (max-height: 450px) {
    .overlay a {font-size: 20px}
    .overlay .closebtn {
        font-size: 40px;
        top: 15px;
        right: 35px;
    }
}

<div id="myNav" class="overlay">
  <div class="overlay-content">
    <div class="container">
      <div class="row">
        <div class="col-12"> // column which contains the login form code
          <div id="loginform">
            // login form code
          </div>
          <div id="signupform">
        // signup form code 
            </div>
        </div>
      </div>
    </div>
  </div>

This is my output - Output Image

Appreciate any insight as to what I am doing wrong and how to go about this.

Thanks a ton.

I think much more code is needed to troubleshoot your issue. You may have something else in CSS or somewhere that isn't allowing the rest of the page to shrink. You might be setting a width or something. Please include more code. And I will also provide you with some useful links and tips for posting here. — adprocas, Apr 16 '18 at 17:17
[Please, do more research](https://meta.stackoverflow.com/questions/261592/how-much-research-effort-is-expected-of-stack-overflow-users) then **post what you've tried** with a **clear explanation of what isn't** working and provide a [Minimal, Complete, and Verifiable example](https://stackoverflow.com/help/mcve). Read [How to Ask a good question](https://stackoverflow.com/help/how-to-ask). Be sure to [take the tour](https://stackoverflow.com/tour) and read [this](https://meta.stackoverflow.com/questions/347937/im-new-to-stack-overflow-what-are-some-things-i-should-do-and-what-things-wil). — adprocas, Apr 16 '18 at 17:17
And also, I would remove the `align="center"` and use 'class="col-xs-12 col-md-12 text-centre"' — adprocas, Apr 16 '18 at 17:19
Your code is outdated for BS4 (the `-xs-` prefix no longer exists. You might want to refresh yourself on migrating from 3.x to 4.x before posting a MCVE: http://getbootstrap.com/docs/4.1/migration/ — Robert, Apr 16 '18 at 17:22
@RobertC, I haven't used bootstrap 4 - it appears it is heavily mobile-first in design. To the OP, this means you should use `col-12` instead of `col-xs-12 col-md-12` - http://getbootstrap.com/docs/4.1/layout/grid/ — adprocas, Apr 16 '18 at 17:26
@adpro - It is. We also don't have enough code to really know if the grid is being inserted properly (No indication of `.row` or `.container`) which could account for the layout issues OP is trying to describe. — Robert, Apr 16 '18 at 17:28
@RobertC, yeah, that's kind of where I was going with my first comment about needing more code. It's nice to see that bootstrap did move things in a direction I can appreciate with mobile-first, although I guess that evolution just makes sense. — adprocas, Apr 16 '18 at 17:29
@adpro Thank you. I have updated the snippets as well as included some relevant CSS. — Nathan DMello, Apr 16 '18 at 17:47
@RobertC Tried switching to bootstrap 3 however the issue persists — Nathan DMello, Apr 16 '18 at 17:47
There has to be more than this going on. I'm able to get it _working_ with this jsfiddle, although it isn't pretty. I removed the `width: 0` on the overlay class, since that was hiding everything. But even with just having `col-xs-12` in there it worked fine. This leads me to believe you have other issues with parent objects to this. I would suggest really digging into Bootstrap 4 to get a better grasp as to what is going on and what you should be doing. https://jsfiddle.net/ubb8sxm3/8/ — adprocas, Apr 16 '18 at 17:55
@NathanDMello - When I look at your code I think this is less about Bootstrap and more about how you're trying to create this custom overlay using `position:fixed`. have you tried removing the `width` from `.overlay-content` ? — Robert, Apr 16 '18 at 18:39

score 0 · Answer 1 · answered Apr 16 '18 at 17:29

0

Try using the class form-group rather than login form and signup form. It may make the web form mobile responsive.

Check: Bootstrap Form Document

answered Apr 16 '18 at 17:29

Harish ST

1,475
9
23

The use of `col-` should be responsive without `form-group`, although it would be best to use this. – adprocas Apr 16 '18 at 17:39

score 0 · Answer 2 · answered Apr 16 '18 at 17:44

I am providing this as an answer because it's too much to put in a comment.

Make sure you're using <!doctype html>

In order to make sure Bootstrap 4 works correctly in Safari, use shrink-to-fit=no - see What does the shrink-to-fit viewport meta attribute do?

Use the bootstrap class for text-center instead of the HTML attribute align - see Text - Bootstrap

Since your class is always going to have col-XX-12 based on your example, just use col-12. See Grid system

As mentioned in the above example, this is a good place to use form-group - see Forms - Boostrap

Overall, please start with Introduction - Bootstrap

<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>


<body>
<div class="col-12 text-center"> // column which contains the login form code
  <div id="loginform">
  // login form code
  </div>
  <div id="signupform">
    // signup form code 
  </div>
</div>

</body>
</html>

Responsive Bootstrap Login Form

2 Answers2