CODEWITHSUNDEEP
htmlcsstwitter-bootstrapbootstrap-4
Berglund
Berglund

Reputation: 676

Bootstrap 4 make search field responsive in mobile

I tried to center my search field using code below.

But the search field is not very responsive because when in mobile it stays right on top with footer unlike on desktop. I want it to have a gap between footer.

This issue only displays on small screen mode.

Any input would be appreciated. I hope you all have a great weekend!

html {
  position: relative;
  min-height: 100%;
}
body {
  margin-bottom: 60px;

}








 section {
     padding: 70px 0;
     border-bottom: 1px dotted #ccc;
}
 .grid-example div[class^="col"] {
     border: 1px solid white;
     background: lightblue;
     text-align: center;
     padding-top: 8px;
     padding-bottom: 8px;
}
 .jumbotron {
     background-color: lightskyblue;
}
 table th {
     text-align: center;
}
 .table {
     margin: auto;
     width: 50% !important;
}
 .table td {
     text-align: center;
}
 .footer {
     position: absolute;
     bottom: 0;
     width: 100%;
     height: 60px;
     line-height: 60px;
     color: #fff;
     text-align: center;
     background-color: #0275D8;
}
 a {
     color: #f00;
}
 a:hover {
     color: #0f0;
}
<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Test</title>
    <meta name="description" content="Test">
    <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">
    <link rel="stylesheet" href="Sticky Footer.css">

    


   

</head>

<body>

    <nav class="navbar-expand-sm navbar-expand-md navbar-expand-lg navbar navbar-light" style="background-color: #C0C0C0;">
        <a class="navbar-brand" href="#">Navbar</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNavDropdown">
            <ul class="navbar-nav">
                <li class="nav-item active">
                    <a class="nav-link" href="#">Test <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Test</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Test</a>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Test
        </a>
                    <div class="dropdown-menu" style="width:300px" aria-labelledby="navbarDropdown">
                        <div class="container container-sm">
                            <div class="row">
                                <div class="col-sm-4">
                                    <a class="dropdown-item" href="#">Test</a>
                                    <a class="dropdown-item" href="#">Test</a>
                                    <a class="dropdown-item" href="#">Test</a>
                                </div>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </nav>


<div class="jumbotron">
  <h1 class="display-8">Hello, world!</h1>
  <p class="lead-8">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
  
  <p class="lead">
    <a class="btn btn-primary btn-md" href="#" role="button">Learn more</a>
  </p>
</div>









    <div class="row align-items-center" style="min-height: calc(100vh - 500px);">
        <div class="col-xs-3 col-sm-8 col-md-6 col-lg-6 mx-auto">
            <div class="input-group-prepend">

                <input id='urlurl' type="url" class="form-control" placeholder="Search" pattern="https?://.+" required />
                <span class="input-group-btn">
                    <button class="btn btn-primary" style="background-color: #0275D8; border-color: #0275D8;" type="button" >Test</button>
                </span>
            </div>
        </div>
    </div>




    <footer class="footer fixed-bottom text-center">
        <span class="text">Place sticky footer content here.</span>
    </footer>



    <!-- jQuery Version 1.11.1 -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

    <!-- Bootstrap Core JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>






</body>

</html>

Upvotes: 0

Views: 1663

Answers (1)

sunil kumar
sunil kumar

Reputation: 301

I didn't understand what you really want but I have tried it little bit.I think padding-bottom: 100px; will solve your problem.

html {
  position: relative;
  min-height: 100%;
}
body {
  margin-bottom: 60px;
  padding-bottom: 100px;
}








 section {
     padding: 70px 0;
     border-bottom: 1px dotted #ccc;
}
 .grid-example div[class^="col"] {
     border: 1px solid white;
     background: lightblue;
     text-align: center;
     padding-top: 8px;
     padding-bottom: 8px;
}
 .jumbotron {
     background-color: lightskyblue;
}
 table th {
     text-align: center;
}
 .table {
     margin: auto;
     width: 50% !important;
}
 .table td {
     text-align: center;
}
 .footer {
     position: absolute;
     bottom: 0;
     width: 100%;
     height: 60px;
     line-height: 60px;
     color: #fff;
     text-align: center;
     background-color: #0275D8;
}
 a {
     color: #f00;
}
 a:hover {
     color: #0f0;
}
<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Test</title>
    <meta name="description" content="Test">
    <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">
    <link rel="stylesheet" href="Sticky Footer.css">

    


   

</head>

<body>

    <nav class="navbar-expand-sm navbar-expand-md navbar-expand-lg navbar navbar-light" style="background-color: #C0C0C0;">
        <a class="navbar-brand" href="#">Navbar</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNavDropdown">
            <ul class="navbar-nav">
                <li class="nav-item active">
                    <a class="nav-link" href="#">Test <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Test</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Test</a>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Test
        </a>
                    <div class="dropdown-menu" style="width:300px" aria-labelledby="navbarDropdown">
                        <div class="container container-sm">
                            <div class="row">
                                <div class="col-sm-4">
                                    <a class="dropdown-item" href="#">Test</a>
                                    <a class="dropdown-item" href="#">Test</a>
                                    <a class="dropdown-item" href="#">Test</a>
                                </div>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </nav>


<div class="jumbotron">
  <h1 class="display-8">Hello, world!</h1>
  <p class="lead-8">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
  
  <p class="lead">
    <a class="btn btn-primary btn-md" href="#" role="button">Learn more</a>
  </p>
</div>









    <div class="row align-items-center" style="min-height: calc(100vh - 500px);">
        <div class="col-xs-3 col-sm-8 col-md-6 col-lg-6 mx-auto">
            <div class="input-group-prepend">

                <input id='urlurl' type="url" class="form-control" placeholder="Search" pattern="https?://.+" required />
                <span class="input-group-btn">
                    <button class="btn btn-primary" style="background-color: #0275D8; border-color: #0275D8;" type="button" >Test</button>
                </span>
            </div>
        </div>
    </div>




    <footer class="footer fixed-bottom text-center">
        <span class="text">Place sticky footer content here.</span>
    </footer>



    <!-- jQuery Version 1.11.1 -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

    <!-- Bootstrap Core JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>






</body>

</html>

Upvotes: 2

Related Questions