I need to make the bootstrap input-group with fixed size, here is the JS Fiddle link https://jsfiddle.net/ncxge6md/1/ , basically I need to resize the input field when page resizes.
<ul class="nav navbar-nav navbar-left">
<li
<form class="navbar-form" >
From Date:<br>
<div class="form-group">
<div class='input-group date' id='datetimepickerFrom'>
<input id = "date_idFrom" type='text' class="form-control" placeholder="From Date" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</form>
</li>
</br>
<br>
<li
<form class="navbar-form" role="search">
City:<br>
<div class="input-group">
<input autocomplete="off" id = "city_id" type="text" class="form-control" placeholder="City" name="q">
</div>
</form>
</li>
</li>
</ul>
If you are using bootstrap , you can use grids.
like col-xs-{num} col-sm-{num} col-md-{num} col-lg-{num}.(in bootstrap 3)
DEMO HERE
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/css/bootstrap-datetimepicker.min.css" rel="stylesheet"/>
<ul class="nav navbar-nav navbar-left">
<li>
<form class="navbar-form">
<div class="col-md-12">From Date:<br>
<div class="form-group">
<div class='input-group date' id='datetimepickerFrom'>
<input id = "date_idFrom" type='text' class="form-control" placeholder="From Date" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</form>
</li></br> <br>
<li>
<form class="navbar-form" role="search">
<div class="col-md-12">City:<br>
<div class="input-group">
<input autocomplete="off" id = "city_id" type="text" class="form-control" placeholder="City" name="q">
</div>
</div>
</form>
</li>
</ul>
Try this.
This may help you.
Thanks.
Related
I was creting a bootstrap page with nav pills to change between two html forms
<ul class="nav nav-pills my-5 d-flex justify-content-center" id="pills-tab" role="tablist">
<li class="nav-item">
<a class="nav-link active btn-lg" href="#login" id="pills-login-tab" data-toggle="pill" role="tab">Log-in</a>
</li>
<span class="mx-3 d-flex align-items-center"><h5><small>or</small></h5></span>
<li class="nav-item">
<a class="nav-link btn-lg" href="#register" id="pills-register-tab" data-toggle="pill" role="tab">Register</a>
</li>
</ul>
<div class="tab-content" id="pills-tabContent">
<!--Log-in-->
<div class="tab-pane fade show active col-6 mx-auto" id="login" role="tabpanel">
<form action="login.php" method="post">
<input class="d-none" name="action" value="login" viewonly>
<!--Email-->
<div class="form-group">
<label for="email">Email</label>
<input class="form-control " type="email" id="email" name="email" value="" required>
<div class="invalid-feedback">
</div>
</div>
<!--Password-->
<div class="form-group">
<label for="password">Password</label>
<input class="form-control" type="password" id="password" name="password" required>
<div class="invalid-feedback">
</div>
</div>
<!--Submit-->
<input class="btn btn-primary" type="submit" id="submit">
</form>
</div><!--Log-in-->
<!--Register-->
<div class="tab-pane fade" id="register" role="tabpanel">
<form class=" col-6 mx-auto" action="login.php" method="post">
<input class="d-none" name="action" value="register" viewonly>
<!--Name-->
<div class="form-group" id="name-form">
<label for="name">Name</label>
<input class="form-control" type="text" id="name" name="name" required>
<div class="invalid-feedback">
</div>
</div>
<!--Username-->
<div class="form-group" id="username-form">
<label for="username">Username</label>
<input class="form-control" type="text" id="username" name="username" required>
<div class="invalid-feedback">
</div>
</div>
<!--Email-->
<div class="form-group" id="email-form">
<label for="email">Email </label>
<input class="form-control" type="email" id="email" name="email" required>
<div class="invalid-feedback">
</div>
</div>
<!--Password-->
<div class="form-group" id="password-form">
<label for="password">Password</label>
<input class="form-control" type="password" id="password" name="password" required>
<div class="invalid-feedback">
</div>
</div>
<!--Repeat Password-->
<div class="form-group" id="repeat-password-form">
<label for="rep-password">Repeat Passwords</label>
<input class="form-control" type="password" id="repeat-password" required>
<div class="invalid-feedback">
</div>
</div>
<!--Submit-->
<input class="btn btn-primary" type="submit" id="submit">
</form>
</div><!--Register-->
</div><!--Pills-->
I noticed that the first time that i visit that page it all works but if I go to the home page (or when I simply refresh) and then back to this page the nav doesnt work anymore.
I also noticed that if I chose the first option (default) and i refresh it works.
I don't really know what to do.
I'm using Node for backend.
Your code looks normal and correct. But you have a lot of ID duplicates, like "email", "password", "submit". ID should be unique inside DOM, otherwise it may cause errors. Correct this and maybe everything will work fine.
Your code works fine with latest jQuery and Bootstrap CDN
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
UPDATED
If your BS script work correctly - the URL of the page shouldn't change on pills clicking. So, after reloading the page - everything should work fine. If your URL changes while you clicking on pills - there is some other script, which have an influence on bootstrap.
<body>
<nav class="navbar navbar transparent">
<div class="container-fluid logo">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img src="images/Logo.png" />
</a>
</div>
<ul class="nav navbar-nav navbar-right right font-top">
<li class="Buybtn-topright">
<button type="button" class="btn-link"> Buy now</button>
</li>
</ul>
</div>
</nav>
<div class="form" >
<ul class="tab-group">
<li class="tab active">Sign Up</li>
<li class="tab">Log In</li>
</ul>
<div class="tab-content">
<div id="signup">
<h1>Sign Up for Free</h1>
<form action="signup.php" method="post">
<div class="top-row">
<div class="field-wrap">
<label>
Full Name<span class="req">*</span>
</label>
<input type="text" name="FuName" required autocomplete="off" />
</div>
<div class="field-wrap">
<label>
user name<span class="req">*</span>
</label>
<input type="text" name="username"required autocomplete="off"/>
</div>
</div>
<div class="field-wrap">
<label>
Email Address<span class="req">*</span>
</label>
<input type="email" name="email"required autocomplete="off"/>
</div>
<div class="field-wrap">
<label>
Set A Password<span class="req">*</span>
</label>
<input type="password" name="password" required autocomplete="off"/>
</div>
<div class="field-wrap">
<label>
c A Password<span class="req">*</span>
</label>
<input type="password" name="CPass" required autocomplete="off"/>
</div>
<button type="submit" class="button button-block"/>Get Started</button>
</form>
</div>
<div id="login">
<h1>Welcome Back!</h1>
<form action="signin.php" method="post" >
<div class="field-wrap">
<label>
username <span class="req">*</span>
</label>
<input name="username" id="username" required autocomplete="off"/>
</div>
<div class="field-wrap">
<label>
Password<span class="req">*</span>
</label>
<input type="password" name="password" id="password" required autocomplete="off"/>
</div>
<p class="forgot">Forgot Password?</p>
<button type="submit" name="submit" value="Login "class="button button-block"/>Login</button>
</form>
</div>
</div> </div>
<div class="row">
<nav class="navbar navbar-default footer">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"></button>
<a class="navbar-brand" href="#">
<img src="images/Logobott.png" />
</a></div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="foot-stylee">
Apps
</li>
<li>
Gadgets
</li>
<li>
Sience
</li>
<li>
Nature
</li>
<li>
Creative
</li>
</ul>
<ul class="nav navbar-nav navbar-right nav-r">
<li>
© 2016 Great Simple
</li>
</ul>
</div>
</div>
</nav>
</div>
<!-- tab-content -->
</div>
</body>
</html>
I have the above code in html and when I look at in mobile version it looks like the desktop so it is not responsive. BUT what is making me confused is that for the FOOTER and HEADER I have the same exact code in the other pages and they are responsive? any suggestion?
Any chance you forgot to load Bootstrap CSS?
To enable responsiveness using twitter bootstrap, the <head> section of your HTML page should contain <meta name="viewport" content="width=device-width, initial-scale=1">.
As such, for a basic start up responsive twitter Bootstrap template, head over to the getting started twitter Bootstrap page.
I am using Bootstrap to create a website and I added functionality for a drop-down to sign up for a newsletter.
How can I make that drop-down into a standalone drop-down separate from the navbar?
I added <button> tags around the entire html code but the sign-up button then separates from the drop-down. Ideally, it would be at the bottom of the drop-drown.
<button class="dropdown btn">
Newsletter Sign Up <b class="caret"></b>
<ul class="dropdown-menu" style="padding: 15px;min-width: 250px;">
<li>
<div class="row">
<div class="col-md-12">
<form class="form" role="form" method="post" action="login" accept-charset="UTF-8" id="login-nav">
<div class="form-group">
<label class="sr-only" for="newsletter-signup-name">Name</label>
<input type="email" class="form-control" id="newsletter-signup-name" placeholder="Name" required>
</div>
<div class="form-group">
<label class="sr-only" for="newsletter-signup-email">Email</label>
<input type="email" class="form-control" id="newsletter-signup-email" placeholder="Email address" required>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
<div class="form-group">
<button type="submit" class="btn btn-success btn-block">Sign Up</button>
</div>
</form>
</div>
</div>
</li>
<li class="divider"></li>
</ul>
</button>
Not sure why you want to encapsulate the entire form into the button. Use a button instead of an anchor if you need the button.
<div class="dropdown">
<button class="btn dropdown-toggle" data-toggle="dropdown">Newsletter Sign Up <b class="caret"></b>
</button>
<ul class="dropdown-menu" style="padding: 15px;min-width: 250px;">
<li>
<div class="row">
<div class="col-md-12">
<form class="form" role="form" method="post" action="login" accept-charset="UTF-8" id="login-nav">
<div class="form-group">
<label class="sr-only" for="newsletter-signup-name">Name</label>
<input type="email" class="form-control" id="newsletter-signup-name" placeholder="Name" required>
</div>
<div class="form-group">
<label class="sr-only" for="newsletter-signup-email">Email</label>
<input type="email" class="form-control" id="newsletter-signup-email" placeholder="Email address" required>
</div>
<div class="checkbox">
<label>
<input type="checkbox">Remember me</label>
</div>
<div class="form-group">
<button type="submit" class="btn btn-success btn-block">Sign Up</button>
</div>
</form>
</div>
</div>
</li>
<li class="divider"></li>
</ul>
</div>
http://jsfiddle.net/moogs/sktewe4s/
Just use a div instead of a button. I think that buttons are not allowed to contain other form elements.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<div class="dropdown">
Newsletter Sign Up <b class="caret"></b>
<ul class="dropdown-menu" style="padding: 15px;min-width: 250px;">
<li>
<div class="row">
<div class="col-md-12">
<form class="form" role="form" method="post" action="login" accept-charset="UTF-8" id="login-nav">
<div class="form-group">
<label class="sr-only" for="newsletter-signup-name">Name</label>
<input type="email" class="form-control" id="newsletter-signup-name" placeholder="Name" required>
</div>
<div class="form-group">
<label class="sr-only" for="newsletter-signup-email">Email</label>
<input type="email" class="form-control" id="newsletter-signup-email" placeholder="Email address" required>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
<div class="form-group">
<button type="submit" class="btn btn-success btn-block">Sign Up</button>
</div>
</form>
</div>
</div>
</li>
<li class="divider"></li>
</ul>
</div>
<form class="form-horizontal" role="form" id="contactf" action="http://titan.csit.rmit.edu.au/~e54061/wp/form-tester.php" method="post">
<div class="form-group">
<label class="control-label col-sm-2 lb" for="email">Email : </label>
<div class="col-sm-6">
<input type="email" class="form-control" id="email" name="email" placeholder="Enter email" required>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="pwd">Subject : </label>
<div class="col-sm-6">
<select class="form-control col-sm-6 lb" id="subj" name="subject" required>
<option>General queries</option>
<option>Group and corporate bookings</option>
<option>Suggestion and complaints</option>
</select>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2 lb" for="pwd">Message : </label>
<div class="col-sm-6">
<div class="checkbox">
<textarea class="form-control" id="message" name="message" required></textarea>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-4 col-sm-6">
<button type="submit" class="btn btn-success">Submit</button>
</div>
</div>
</form>
This is my form. It works fine. the thing is i am using bootstrap and i want everything in the perfect center responsive to the screen size. Please help me with this. Thanks!
I don't know, whether i m saying correct or not.
If we use css like,
text-align:center;
It will be affected align center both vertically and horizontally.
So there is no css for particular vertical align center.
you need to change dropdown text and other
<div class="panel panel-warning mypanel">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="firstname" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="firstname"
placeholder="Enter First Name">
</div>
</div>
<div class="form-group">
<label for="lastname" class="col-sm-2 control-label">Subject</label>
<div class="col-sm-10">
<div class="dropdown">
<button type="button" class="btn dropdown-toggle" id="dropdownMenu1"
data-toggle="dropdown">
Topics
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">Java</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">Data Mining</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">
Data Communication/Networking
</a>
</li>
<li role="presentation" class="divider"></li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">Separated link</a>
</li>
</ul>
</div>
</div>
</div>
<div class="form-group">
<label for="firstname" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="firstname"
placeholder="Enter First Name">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</div>
</form>
</div>
</div>
In twitter bootstrap 3 i would like to add a buttongroup in the navbar, but it seems to break the navbar since it creates linebreaks:
<li>
<form class="navbar-form form-inline" >
<div class="input-group">
<input id="filter" class="form-control input-sm" type="text" placeholder="Filter" />
<span class="input-group-btn">
<button id="clearfilter" type="button" class="btn btn-sm btn-default">Clear</button>
</span>
</div>
</form>
</li>
how can i avoid the linebreak in the navbar?
Maybe you don't need the to put the form inside a list item:
<!-- Start Of Example -->
<form class="navbar-form form-inline">
<div class="input-group">
<input id="filter" class="form-control input-sm" type="text" placeholder="Filter" />
<span class="input-group-btn">
<button id="clearfilter" type="button" class="btn btn-sm btn-default">Clear</button>
</span>
</div>
</form>
<!-- End Of Example -->
JS Fiddle Example
Update: another method (you could also use navbar-right to align the ul block to the right)
<!-- Start Of Example -->
<ul class="nav navbar-nav">
<li>
<div class="navbar-form form-inline" role="form">
<div class="form-group">
<input id="filter" class="form-control input-sm" type="text" placeholder="Filter" />
</div>
<div class="form-group">
<button id="clearfilter" type="button" class="btn btn-sm btn-default">Clear</button>
</div>
</div>
</li>
<li>
<li>Action</li>
</li>
</ul>
<!-- End Of Example -->
Example 2