CODEWITHSUNDEEP
htmlformstwitter-bootstrapcssresponsive-design
Joseph
Joseph

Reputation: 7755

Form Not Responsive When Decrease Smallest Screen

I have a simple form that i want it to be responsive even to the smallest screen like an Iphone 5. When it's on the large screen, it has no problem but when it decrease it destroys the form. What is the technique on how to make forms responsive. What is the quickest way to do it? 

html, body{
    font-family: Helvetica;
    font-size: 12px;
}
.center_div{
    margin: 0 auto;
    width: 40%;
    padding: 10px;
}
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chinese</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container center_div">
        <div class="row">
                <div class="panel panel-danger login">
                    <div class="panel-heading">
                        <h3 class="text-center title">China</h3>
                    </div>
                    <br>
                    <div class="container-fluid"> 
                        <div class="panel-body">   
                            <div class = "form-group">
                                <label>Username</label>
                                <div class="input-group margin-bottom-sm">
                                <span class="input-group-addon"><i class="fa fa-user fa-fw"></i></span>
                                    <input type="text" id="id" name="email" class = "form-control">
                                </div>
                            </div>
                            <div class = "form-group">
                                <label>Password</label>
                                <div class="input-group margin-bottom-sm">
                                <span class="input-group-addon"><i class="fa fa-lock fa-fw"></i></span>
                                    <input type="password" id="password" name="password" class = "form-control">
                                </div>
                            </div>
                            <div class = "form-group">
                                <label>No</label>
                                <div class="input-group margin-bottom-sm">
                                <span class="input-group-addon"><i class="fa fa-lock fa-fw"></i></span>
                                    <input type="password" id="password" name="password" class = "form-control">
                                </div>
                            </div>
                            <br>
                            <a href="#" class="btn btn-danger btn-block">Login</a>
                            <br>  
                        </div>
                    </div>
                </div>
        </div>
    </div>
</body>

Upvotes: 1

Views: 38

Answers (1)

Alexander Bolzhatov
Alexander Bolzhatov

Reputation: 298

You must use col-lg/md/sm/xs-N , col-lg/md/sm/xs-offset-N classes in div instead of width: 40%; See https://getbootstrap.com/examples/grid/ . Use have a grid with 12 cells horisontally. You can define cell width and offset for each of screens: extrasmall, small, medium, large.

https://jsfiddle.net/ej59s3jt/

<style>
html, body{
    font-family: Helvetica;
    font-size: 12px;
}
.center_div{
    margin: 0 auto;
    padding: 10px;
}
</style>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chinese</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container center_div">
    <div class="row">
        <div class="col-lg-8 col-lg-offset-2 col-md-8 col-md-offset-2 col-sm-8 col-sm-offset-2 col-xs-12 col-xs-offset-0 ">
            <div class="panel panel-danger login">
                <div class="panel-heading">
                    <h3 class="text-center title">China</h3>
                </div>
                <br>
                <div class="container-fluid"> 
                    <div class="panel-body">   
                        <div class = "form-group">
                            <label>Username</label>
                            <div class="input-group margin-bottom-sm">
                            <span class="input-group-addon"><i class="fa fa-user fa-fw"></i></span>
                                <input type="text" id="id" name="email" class = "form-control">
                            </div>
                        </div>
                        <div class = "form-group">
                            <label>Password</label>
                            <div class="input-group margin-bottom-sm">
                            <span class="input-group-addon"><i class="fa fa-lock fa-fw"></i></span>
                                <input type="password" id="password" name="password" class = "form-control">
                            </div>
                        </div>
                        <div class = "form-group">
                            <label>No</label>
                            <div class="input-group margin-bottom-sm">
                            <span class="input-group-addon"><i class="fa fa-lock fa-fw"></i></span>
                                <input type="password" id="password" name="password" class = "form-control">
                            </div>
                        </div>
                        <br>
                        <a href="#" class="btn btn-danger btn-block">Login</a>
                        <br>  
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Upvotes: 1

Related Questions