I created a Fiddle of my Problem (however in Fiddle it is displayed correctly).
https://jsfiddle.net/rjf8tsbk/1/
As you can see, i have a form with 4 inputs. Whenever i execute this on Webstorm, the website is displayed in chrome but ALL inputs have NO margin (no space). I copied my code to jsfiddle and its looks correct. I wonder if i have an error in webstorm or could this be an error within bootstrap?
This is a picture how it looks like normal :
EDIT (HTML CODE)
<body>
<nav class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header">
<button type="button" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar" class="navbar-toggle collapsed">
<span class="sr-only">Toggle</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
LearnYou
</div>
<div class="navbar-collapse collapse">
<form class="navbar-form navbar-right">
<div class="form-group">
<input type="text" placeholder="Email" class="form-control">
</div>
<div class="form-group">
<input type="password" placeholder="Password" class="form-control">
</div>
<div class="form-group">
<input type="submit" value="Sign in" class="btn btn-success ">
</div>
<div class="form-group">
<input type="button" value="Sign up" class="btn btn-success ">
</div>
</form>
</div>
</div>
</nav>
</body>
EDIT 2:
Looks like the problem comes from "Jade", whenever i execute simple html5 it is rendered correctly but when i use Jade it is displayed wrong.Any Ideas?This my Jade Code:
nav(class="navbar navbar-inverse")
div(class="container")
div(class="navbar-header")
button(type="button" ,class="navbar-toggle collapsed" ,data-toggle="collapse", data-target="#navbar", aria-expanded="false" ,aria-controls="navbar")
span(class="sr-only") Toggle
span(class="icon-bar")
span(class="icon-bar")
span(class="icon-bar")
a(class="navbar-brand" ,href="#") LearnYou
div(id="navbar",class="navbar-collapse collapse")
form(class="navbar-form navbar-right", role="form")
div(class="form-group")
input(type="text", placeholder="Email", class="form-control")
div(class="form-group")
input(type="password", placeholder="Password", class="form-control")
input(type="submit", class="btn btn-success" ,value="Sign in")
input(type="button", class="btn btn-success", value="Sign up")
.form-group {
margin-left:10px;
}
To apply margin you can use mx class
<div class="form-group mx-2">
<input type="text" placeholder="Email" class="form-control">
</div>
for margin right and left in the same time or you can use mr-2 (margin right) and ml-2 (margin left)
Bootstrap v5 dropped form-specific layout classes in favour of existing grid and utility classes. Using legacy classes with v5 will no longer produce the expected styling from previous versions — such as the form-group margins. See the form section in the Migration To v5 guide for more info.
The v5 form examples now use margin utility classes, which should produce the desired result. These classes should provide an easy solution without the need for custom styling rules.
Example:
<form>
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
<div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
</div>
...
</form>
Related
hi I am trying to make an input text field with a cross icon in front of it. So that if user clicks cross that field gets removed. Right now I am using bootstrap class close over button tag. But the result is not coming. It needs to be done using bootstrap.
Here's my code:
<div class="col-lg-7 ven" hidden="hidden">
<label for="vendor" >Vendor</label>
<input type="text" class="form-control" id="vendor" placeholder="Enter Vendor" name="vendor" value="not defined">
<button type="button" class="close" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
Output right now:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<div class="col-lg-7 ven">
<label for="vendor" >Vendor</label>
<div class="input-group margin-bottom-sm ">
<input type="text" class="form-control" id="vendor" placeholder="Enter Vendor" name="vendor" value="not defined">
<button type="button" class="close" aria-label="Close">
<span class="input-group-addon">×</span></button>
</div>
</div>
In my opinion, you should use the class .input-group by Bootstrap. It solves your issue.
Your final code would look like this given above.
Use this code with Bootstrap and you are good to go.
I hope I might be of help.
Supposedly a rather simple question, but I would appreciate some tips all the same.
I have the following Bootstrap html:
<div class="col-xs-6 col-md-3">
<div class="form-group">
<input autocomplete="off" autofocus="" class="form-control" name="Quantity" placeholder="Quantity required" type="text" id="quantity">
</div>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" id="touch" type="button" data-toggle="dropdown">grams
<span class="caret"></span></button>
<ul class="dropdown-menu" id="menu">
<li>milligrams</li>
<li>grams</li>
<li>kilograms</li>
</ul>
</div>
</div>
However, currently as shown here: http://www.bootply.com/xlkInfMjJo
the button always seems to sit below the input field. Is there a way to get around this and ensure the button stays in-line with the form field within the same column?
Kind Regards,
Yes, this can be achieved by having additional columns for the button and input field, which needs to be wrapped in a .row
So, you only need to change from:
<div class="col-xs-6 col-md-3">
<div class="form-group">
<input autocomplete="off" autofocus="" class="form-control" name="Quantity" placeholder="Quantity required" type="text" id="quantity">
</div>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" id="touch" type="button" data-toggle="dropdown">grams
<span class="caret"></span></button>
<ul class="dropdown-menu" id="menu">
<li>milligrams</li>
<li>grams</li>
<li>kilograms</li>
</ul>
</div>
</div>
To:
<div class="col-xs-6 col-md-3">
<div class="row">
<div class="form-group col-xs-8">
<input autocomplete="off" autofocus="" class="form-control" name="Quantity" placeholder="Quantity required" type="text" id="quantity">
</div>
<div class="dropdown col-xs-4">
<button class="btn btn-primary dropdown-toggle" id="touch" type="button" data-toggle="dropdown">grams
<span class="caret"></span></button>
<ul class="dropdown-menu" id="menu">
<li>milligrams</li>
<li>grams</li>
<li>kilograms</li>
</ul>
</div>
</div>
</div>
This way, the input field will always take 8 units of the width, whereas the button will take 4 - using the default Bootstrap grid system (12 total units).
Would you want to change this ratio, change the .col-xs-* classes newly inserted to your preferred values.
You can also view these changes in this Bootply snippet: http://www.bootply.com/ufUHQgp9bj
In this example the search input is very long until the end of page. I copied the html code but mine is short for some reason and couldnt really figure out the part that makes it long ? What's the trick ?
Code for my navbar:
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
#Html.ActionLink("KTEMB Veritabanı", "Index", "Members", new { area = "" }, new { #class = "navbar-brand" })
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>#Html.ActionLink("Üyeler", "Index", "Members")</li>
<li>#Html.ActionLink("Kayıtlı Personel", "Index", "Employees")</li>
</ul>
#*#Html.Partial("_LoginPartial")*#
<form class="navbar-form">
<div class="form-group" style="display:inline;">
<div class="input-group">
<input type="text" class="form-control" placeholder="What are searching for?">
<span class="input-group-addon"><span class="glyphicon glyphicon-search"></span> </span>
</div>
</div>
</form>
</div>
</div>
</div>
The example you cited uses Bootstrap 3.1, using 3.3.x would explain why it doesn't work for you. Some of the other examples you'll come across use older versions of Bootstrap too - so they won't work with newer versions of BS.
This works a little better. Leaving the .form-group class at 100% width (which is default) is one of the things that causes a problem, so changing it to 95% or less works. Also, it appears to fail when using a float class, like .navbar-right, (which is why it was converted to inline) so watch out for those...
<div class="collapse navbar-collapse">
<form class="navbar-form" role="search">
<div class="form-group" style="display:inline; float:right; width:95%;">
<div class="input-group" style="width:100%">
<input type="text" class="form-control" placeholder="Search">
<span class="input-group-addon" style="width:1%"><span class="glyphicon glyphicon-search"></span></span>
</div>
</div>
</form>
</div>
You need to use .form-group and .input-group, like:
<div class="form-group">
<div class="input-group">
<input type="text" class="form-control" placeholder="What are searching for?">
<span class="input-group-addon"><span class="glyphicon glyphicon-search"></span> </span>
</div>
</div>
I used an input group straight from the bootstrap documentation, and for some reason the button is way bigger than the text input.
Here's the HTML:
<div class="jumbotron">
<div class="input-group">
<input ng-model="businessName" ng-model="chosenPlace" googleplace type="text" class="form-control input-lg">
<span class="input-group-btn">
<button ng-click="findGPlace2()" class="btn btn-default" type="button">Find!</button>
</span>
</div>
</div>
I haven't made any changes to the css, just vanilla bootstrap.
Try to use the samples in Boostrap page. This is the bootply link you can customize it.
<div class="jumbotron">
<form class="form-horizontal" role="form">
<div class="input-group">
<input ng-model="businessName" ng-model="chosenPlace" class="form-control input-lg">
<span class="input-group-btn">
<button ng-click="findGPlace2()" class="btn btn-default btn-lg" type="button">Find!</button>
</span>
</div>
</form>
</div>
On screens >=768px, everything works great. When a user inputs an incorrect username or password, the form fields glow red/yellow/green and get a little glyphicon toward the right side. If you resize smaller than 768px, it switches to the mobile view including a collapsible navbar (where my login form is). On the collapsed navbar, the feedback glyphicons are below the form fields rather than inside of them.
The PHP controls what state to make the fields after doing the login check against mysql. Lines like this <?php echo $form_error['user']; ?> simply place the text 'has-success', 'has-warning', or 'has-error' in the class assignment. Similarly, the <?php echo $form_error['user_glyph']; ?> lines will replace with <span> tags for the glyphicon itself. (See the rendered source at the bottom if this is hard to follow)
Here is the source code I have for the nav:
<body>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">BrandLogo</a>
</div>
<div class="navbar-collapse collapse">
<form class="navbar-form navbar-right" action="login.php" method="post">
<div class="form-group has-feedback <?php echo $form_error['user']; ?>">
<label class="sr-only" for="ip-username">Username</label>
<input type="text" placeholder="Username" class="form-control" name="username" id="ip-username" value="<?php echo $submitted_username; ?>" required/>
<?php echo $form_error['user_glyph']; ?>
</div>
<div class="form-group has-feedback <?php echo $form_error['password']; ?>">
<label class="sr-only" for="ip-password">Password</label>
<input type="password" placeholder="Password" class="form-control glyphicon-ok" name="password" id="ip-password" required/>
<?php echo $form_error['password_glyph']; ?>
</div>
<button type="submit" value="Login" class="btn btn-success">Log in</button>
</form>
</div><!--/.navbar-collapse -->
</div>
</div>
And just to clarify any confusion, here is a rendered source after submitting an invalid password (showing only the <form> block since nothing else is dynamic):
<form class="navbar-form navbar-right" action="login.php" method="post">
<div class="form-group has-feedback has-success">
<label class="sr-only" for="ip-username">Username</label>
<input type="text" placeholder="Username" class="form-control" name="username" id="ip-username" value="some-username" required/>
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>
<div class="form-group has-feedback has-error">
<label class="sr-only" for="ip-password">Password</label>
<input type="password" placeholder="Password" class="form-control glyphicon-ok" name="password" id="ip-password" required/>
<span class="glyphicon glyphicon-remove form-control-feedback"></span>
</div>
<button type="submit" value="Login" class="btn btn-success">Log in</button>
</form>
The CSS is unaltered bootstrap 3.1.1.
How can I get the small view to work correctly like the other views?
Thanks in advance!
Don't know why it is doing it but if you add:
.navbar-form .has-feedback .form-control-feedback {
top:0;
}
to your css it should fix it.
Also see: Bootstrap 3 has-feedback icon alignment with field sizing doesn't seem to work
I think it is probably a bug in Bootstrap.
I found that the solution was to style the <span> tags inline using style='top:0px;'
I still don't follow exactly why I needed to do this though. It seems on the collapsed view that the navbar class no longer applies (which gives the 0px top value instead of 25px from .has-feedback .form-control-feedback)
This is the css block that does it:
#media (min-width: 768px)
.navbar-form .has-feedback .form-control-feedback
The #media line appears to stop it from effecting the small view. I will use the inline css to work around this since I have no idea what other aspects the reactive code affects.
This CSS should fix it for most cases.
.has-feedback label.sr-only ~ .form-control-feedback {
top: 0;
}
Added bonus, it allows you to use both sr-only labels and non-sr-only labels in your forms on the same site.