Menu
I'm creating a simple web page using Bootstrap v3.3.1. I got stucked when trying to force the form-inline in mobile view. It doesn't turn into inline-form like I want.
How to make form-inline works on mobile view too?
Demo
My codes:
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Hello World</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/style.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Arvo' rel='stylesheet' type='text/css'>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Page Content -->
<div class="container full">
<div class="row">
<div class="col-md-12">
<h1 class="text-center hero">Mauris risus nisi, hendrerit id orci non, tempor hendrerit enim</h1>
</div>
</div>
<!-- /.row -->
</div>
<!-- /.container -->
<div class="container dropdown-section">
<div class="row">
<div class="col-md-6 col-md-offset-3 dropdown-wrapper">
<form class="form-inline">
<div class="form-group">
<input type="email" class="form-control input-lg date-input" id="exampleInputEmail2" placeholder="Date">
</div>
<!-- Single button -->
<div class="btn-group">
<button type="button" class="btn btn-default btn-lg dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
Moving from <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a>
</li>
<li><a href="#">Another action</a>
</li>
<li><a href="#">Something else here</a>
</li>
<li class="divider"></li>
<li><a href="#">Separated link</a>
</li>
</ul>
</div>
<!-- Single button -->
<div class="btn-group">
<button type="button" class="btn btn-default btn-lg dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
Moving to <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a>
</li>
<li><a href="#">Another action</a>
</li>
<li><a href="#">Something else here</a>
</li>
<li class="divider"></li>
<li><a href="#">Separated link</a>
</li>
</ul>
</div>
<button class="btn btn-primary btn-lg" type="submit">Search</button>
</form>
</div><!-- /col-md-6 col-md-offset-3 dropdown-wrapper -->
</div><!-- /.row -->
</div><!-- /.container -->
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
style.css:
body {
background: none;
}
.full {
background: url(http://i.imgur.com/BwqePti.jpg) no-repeat center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
min-height: 400px;
width: 100%;
z-index: 1;
}
.text-center {
text-align: center;
}
h1.hero {
margin-top: 170px;
color: #ffffff;
text-shadow: 2px 2px 2px rgba(150, 150, 150, 0.8);
font-family: 'Arvo', serif;
font-size: 30px;
}
.dropdown-section{
width: 100%;
background-color: #000000;
}
.dropdown-wrapper{
margin-top: 20px;
margin-bottom: 20px;
}
.date-input{
width: 220px !important;
}
Desktop view:
Mobile view:
438
Your form elements are inline (more likely inline-block), but their combined widths are wider than the mobile viewport. If you want to restrict them to one line (which doesn't seem like a great idea given the available space) you need to set widths on them. I'd advise percentages. The whitespace between elements will cause you problems with that method if you don't comment it out or account for it in your measurements.
I think your problem is nudging you in the right direction. On such a small screen, inputs are better off spaced out like this. If I were you, I'd widen the Search button and date input to 100% on mobile and reset the width with a media query on desktop/large tablets.
82
answered Sep 03 '25 00:09
You have to set to inline block and reset the width of the form controls to auto:
.form-inline .form-control {
display: inline-block !important;
width: auto!important
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
