I am improving my bootstrap skills, i wanna know why in one place for inlining one work and in one place another, here : d-inline-block and this form-inline, what it difference between this two and why for example using 'form-inline' in 'd-inline-block' place wont work ? both has form classes ?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
<style>
body{
padding:0px;
margin:0px;}
</style>
</head>
<body>
<div class="form-group form-inline pt-4">
<div class="col-sm-10">
<div class="fas fa-lock"></div> <input type="password" class="form-control" id="pwd" placeholder=" password" name="pwd">
</div>
</div>
<div class=" ">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
</div>
</div>
</div>
<div class="form-group d-inline-block">
<button type="submit" class="btn btn-success ml-3">Login</button>
</div>
<div class="form-group d-inline-block">
<button type="submit" class="btn btn-primary">Login with facebook</button>
</div>
</div>
</form>
</div>
</body>
</html>
The difference is that .form-inline allows you to align labels inline with related inputs. .form-inline should by applied to form element. When you use .d-inline-block applied to form-groups you are able to align them in a row, but labels will stay at top. Check the snippet below to see a difference:
form {
border: 2px solid black;
padding: 10px;
margin: 10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
<style>
body {
padding: 0px;
margin: 0px;
}
</style>
</head>
<body>
<h6>Inline form</h6>
<form class="form-inline">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group d-inline-block">
<button type="submit" class="btn btn-success ml-3">Login</button>
<button type="submit" class="btn btn-primary">Login with facebook</button>
</div>
</form>
<h6>Not inline form with .form-group.d-inline-block</h6>
<form>
<div class="form-group d-inline-block">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
</div>
<div class="form-group d-inline-block">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group d-inline-block">
<button type="submit" class="btn btn-success ml-3">Login</button>
<button type="submit" class="btn btn-primary">Login with facebook</button>
</div>
</form>
</body>
</html>
Related
I have an inline form that its input fields are more longer width than screen therefore some fields fall into new line.
<!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://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h1>Inline form</h1>
<div class="container-fluid">
<div class="row" style="flex-wrap: nowrap; overflow-x: scroll;">
<form>
<div class="form-row">
<div class="col-2">
<label for="">First Name</label>
<input type="text" class="form-control" placeholder="First name">
</div>
<div class="col-2">
<label for="">Last Name</label>
<input type="text" class="form-control" placeholder="Last name">
</div>
<div class="col-2">
<label for="">Gender</label>
<input type="text" class="form-control" placeholder="Gender">
</div>
<div class="col-2">
<label for="">Age</label>
<input type="text" class="form-control" placeholder="Age">
</div>
<div class="col-2">
<label for="">Address</label>
<input type="text" class="form-control" placeholder="Address">
</div>
<div class="col-2">
<label for="">Phone Number</label>
<input type="text" class="form-control" placeholder="Phone Number">
</div>
<div class="col-2">
<label for="">Email</label>
<input type="text" class="form-control" placeholder="Email">
</div>
<div class="col-2">
<label for="">Website</label>
<input type="text" class="form-control" placeholder="Website">
</div>
</div>
</form>
</div>
</div>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
</body>
</html>
Understanding the bootstrap column should not exceed 12 columns width per row, but since I have many fields I want those those fields go into one single row with scroll bar.
How can I do that? Even thought, I set style flex-wrap: nowrap; overflow-x: scroll; to class .row already, it is still not working. Thanks.
you achive this using adding flex-nowrap class in .form-row div
<!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://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h1>Inline form</h1>
<div class="container-fluid">
<div class="row" style="flex-wrap: nowrap; overflow-x: scroll;">
<form>
<div class="form-row flex-nowrap">
<div class="col-2">
<label for="">First Name</label>
<input type="text" class="form-control" placeholder="First name">
</div>
<div class="col-2">
<label for="">Last Name</label>
<input type="text" class="form-control" placeholder="Last name">
</div>
<div class="col-2">
<label for="">Gender</label>
<input type="text" class="form-control" placeholder="Gender">
</div>
<div class="col-2">
<label for="">Age</label>
<input type="text" class="form-control" placeholder="Age">
</div>
<div class="col-2">
<label for="">Address</label>
<input type="text" class="form-control" placeholder="Address">
</div>
<div class="col-2">
<label for="">Phone Number</label>
<input type="text" class="form-control" placeholder="Phone Number">
</div>
<div class="col-2">
<label for="">Email</label>
<input type="text" class="form-control" placeholder="Email">
</div>
<div class="col-2">
<label for="">Website</label>
<input type="text" class="form-control" placeholder="Website">
</div>
</div>
</form>
</div>
</div>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
</body>
</html>
Change the col-2 class to just col and everything lays out on one line.
<!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://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h1>Inline form</h1>
<div class="container-fluid">
<div class="row" style="flex-wrap: nowrap; overflow-x: scroll;">
<form>
<div class="form-row">
<div class="col">
<label for="">First Name</label>
<input type="text" class="form-control" placeholder="First name">
</div>
<div class="col">
<label for="">Last Name</label>
<input type="text" class="form-control" placeholder="Last name">
</div>
<div class="col">
<label for="">Gender</label>
<input type="text" class="form-control" placeholder="Gender">
</div>
<div class="col">
<label for="">Age</label>
<input type="text" class="form-control" placeholder="Age">
</div>
<div class="col">
<label for="">Address</label>
<input type="text" class="form-control" placeholder="Address">
</div>
<div class="col">
<label for="">Phone Number</label>
<input type="text" class="form-control" placeholder="Phone Number">
</div>
<div class="col">
<label for="">Email</label>
<input type="text" class="form-control" placeholder="Email">
</div>
<div class="col">
<label for="">Website</label>
<input type="text" class="form-control" placeholder="Website">
</div>
</div>
</form>
</div>
</div>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
</body>
</html>
I open my localhost app in
Chrome - working perfectly
Edge - working but some css not supported
Mozilla Firefox version 53.0.3 (32-bit) - White screen.
Now why it's become white screen on Mozilla? Any ideas? Here is my codes:
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="http://localhost:2001/assets/material.indigo-pink.min.css">
<script src="http://localhost:2001/assets/material.min.js"></script>
<style>
.remove-padding{
padding:0px;
}
</style>
<title>Population</title>
</head>
<body>
<dialog class="mdl-dialog remove-padding">
<div class="mdl-card mdl-shadow--6dp">
<form method="post" action="http://localhost:2001/login/process">
<div class="mdl-card__title mdl-color--primary mdl-color-text--white">
<h2 class="mdl-card__title-text">Login</h2>
</div>
<div class="mdl-card__supporting-text">
<div class="mdl-textfield mdl-js-textfield">
<input class="mdl-textfield__input" type="email" required id="email" name="email" value="" />
<label class="mdl-textfield__label" for="email">Email</label>
</div>
<div class="mdl-textfield mdl-js-textfield">
<input class="mdl-textfield__input" type="password" required id="userpass" name="password" />
<label class="mdl-textfield__label" for="userpass">Password</label>
</div>
</div>
<div class="mdl-card__actions mdl-card--border" style="text-align: right;">
<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect">
Sign In
</button>
</div>
</form>
</div>
</dialog>
<script>
var dialog = document.querySelector('dialog');
dialog.showModal();
</script>
</body>
</html>
I have a design, where there are 4 input fields ending with a Search Button i.e.
INPUT1 INPUT2 INPUT3 INPUT4 BUTTON
I need all these to be stacked horizontally inside a form tag and should be inline with out any padding or spaces, showing at the center of the page on top of a banner. Need to accomplish this using bootstrap.
Regards,
Sijo Jose
Try this one.
<form>
<div class="input-container">
<div class="inline-content">
<input type="text" value="input 1">
<input type="text" value="input 2">
<input type="text" value="input 3">
<input type="text" value="input 4">
<button type="button">button</button>
</div>
</div>
</form>
I have also created a Bootply. Here is the link. http://www.bootply.com/XlBQ3QRLGN
Below code might help
HTML Code :-
<div class="header">
<div class="inner">
<input type="text"/>
<input type="text"/>
<input type="text"/>
<input type="text"/>
<input type="submit"/>
</div>
</div>
CSS Code:-
div {
min-height:75px;
line-height:75px;
text-align:center;
color:white;
font-weight:bold;
}
.inner {
width:100%;
max-width:960px;
margin:0 auto;
}
.header {
background:red;
}
Using form-inline using bootstrap :-
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
form {
margin: 0 auto;
}
</style>
</head>
<body>
<form class="form-inline">
<label class="sr-only" for="inlineFormInput">Name</label>
<input type="text" class="form-control mb-2 mr-sm-2 mb-sm-0" id="inlineFormInput" placeholder="inputone">
<label class="sr-only" for="inlineFormInput">Name</label>
<input type="text" class="form-control mb-2 mr-sm-2 mb-sm-0" id="inlineFormInput" placeholder="inputtwo">
<label class="sr-only" for="inlineFormInput">Name</label>
<input type="text" class="form-control mb-2 mr-sm-2 mb-sm-0" id="inlineFormInput" placeholder="inputthree">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</body>
</html>
Using bootstrap
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<form>
<label class="text-inline">
<input type="text">
</label>
<label class="text-inline">
<input type="text">
</label>
<label class="text-inline">
<input type="text">
</label>
<label class="btn-inline">
<input type="submit" name="submit">
</label>
</form>
</div>
</body>
</html>
Application uses Bootstrap to create logon form below. In mobile devices logon form is too small, centered in mobile screen, lot of white space.
It is difficult to enter user's name and password.
How can I fix this so that the login form looks native in mobile phones also ?
Or is there some template which can used to create usable logon form for any screen resolution ?
<!DOCTYPE html>
<html>
<head>
<link href="/admin/css/redmond/jquery-ui.css" rel="stylesheet" />
<link href="/admin/Content/font-awesome.min.css" rel="stylesheet" />
<link href="/admin/Content/bootstrap.css" rel="stylesheet" />
<link href="/admin/Content/bootstrap-theme.css" rel="stylesheet" />
<title>
Login
</title>
<script src="/admin/Scripts/jquery-1.11.2.js"></script>
<script src="/admin/Scripts/jquery-ui-1.11.4.js"></script>
<script src="/admin/Scripts/bootstrap.js"></script>
</head>
<body>
<div class='login-box container'>
<form action="/admin/Account/LogOn" method="post">
<fieldset>
<legend>Login</legend>
<div class="form-group">
<label for="user">User</label>
<input autofocus="1" class="form-control" id="user" maxlength="10" name="UserName" placeholder="User" required="True" style="width:auto" type="text" value="" />
</div>
<div class="form-group">
<label for="password">Password</label>
<input class="form-control" id="password" name="Password" placeholder="Password" required="True" style="width:auto" type="password" />
</div>
<div class="checkbox">
<label>
<input id="RememberMe" name="RememberMe" type="checkbox" value="true" />
<input name="RememberMe" type="hidden" value="false" /> Remember me
</label>
</div>
</fieldset>
<input type="submit" value='Logon' class="btn btn-primary" />
</form>
</div>
<script type="text/javascript">
$(function() {
$("input:text:visible:first").focus();
});
</script>
</body>
</html>
HTML5, Bootstrap 3, jQuery, jQuery UI, ASP.NET MVC 4, and Razor are used.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Vertical (basic) form</h2>
<form role="form">
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</body>
</html>
How can I get multiple inputs on a single line in a jumbotron with Bootstrap 3.
So it looks something like this: Find [dropdown list] in [text input] [Submit Button]
This is what I've currently got: http://jsfiddle.net/cTLwW/ but I goes over 4 lines and each for input item is way to wide.
<div class="container jumbotron">
<h1><span class="text-center">Mywebsite.</span></h1>
<h2><span class="text-center">Find things close to you</span></h2>
<form class="form-horizontal" role="form" action="/" method="post">
<div class="form-group">
<span class="text-center"><label for="inputCity" class="col-lg-2 control-label">I
need</label></span>
<div class="col-lg-10">
<span class="text-center"><select class="form-control">
<option>
Bakery
</option>
<option>
Supermarket
</option>
<option>
Etc
</option>
</select></span>
</div>
</div>
<div class="row form-group">
<span class="text-center"><label for="inputType" class=
"col-lg-2 control-label">In</label></span>
<div class="col-lg-8">
<span class="text-center"><input type="text" class="form-control" id=
"inputCity" placeholder="City"> <button type="submit" class=
"btn btn-success"><span class="text-center">Go</span></button></span>
</div>
</div>
</form>
Try like this,
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" media="screen">
<style>
label {
font-weight: normal;
}
.jumbotron {
line-height: 1.143;
}
label.col-lg-1 {
width: 0;
}
</style>
</head>
<body>
<div class="container jumbotron">
<h1><span class="text-center">Mywebsite.</span></h1>
<h2><span class="text-center">Find things close to you</span></h2>
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="inputCity" class="col-lg-2 control-label">Ineed</label>
<div class="col-lg-3">
<select class="form-control">
<option>
Bakery
</option>
<option>
Supermarket
</option>
<option>
Etc
</option>
</select>
</div>
<label for="inputType" class="col-lg-1 control-label">In</label>
<div class="col-lg-3">
<input type="text" class="form-control" id="inputCity" placeholder="City">
</div>
<button type="submit" class="btn btn-success">Go</button>
</div>
</form>
</div>
<script src="//code.jquery.com/jquery.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
</body>
</html>
Screen-shot
Try this
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container jumbotron">
<h1><span class="text-center">Mywebsite.</span></h1>
<h2><span class="text-center">Find things close to you</span></h2>
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="inputCity" class="col-lg-2 control-label">Ineed</label>
<div class="col-lg-3">
<select class="form-control">
<option>Bakery</option>
</select>
</div>
<label for="inputType" class="col-lg-1 control-label">In</label>
<div class="col-lg-3">
<input type="text" class="form-control" id="inputCity" placeholder="City">
</div>
<button type="submit" class="btn btn-success">Go</button>
</div>
</form>
</div>
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>