<div class="row mb-3">
<div class="col-6">
<form autocomplete="off" action="/action_page.php">
<div class="autocomplete" >
<input type="text" id="startLocation" class="form-control" placeholder="von Bahnhof / Haltestelle / Adresse" tabindex="-1">
</div>
</form>
</div>
<div class="col-6">
<input type="text"id="destination" class="form-control" placeholder="nach Bahnhof / Haltestelle / Adresse" tabindex="-1">
</div>
</div>
I want my two text inputs to be the same with and toghther fill the total width. The Problem is the "startLocation does not have the correct width. I think its because its nested inside another element but I need the other element to have the class autocompleted so I don't know how to fix this.
Sorry If this is a stupid beginner question. Im new to html and bootstrap.
What is the "mb-3" class for in row?
Did you mean md-3? Which you would only need to set column widths (if you're using bootstrap).
Open the developer tools and check the padding and margin around the form. The form itself, and the nested div are probably taking up some space. Also the inputs have different parents so your styling might not be targeting the right selector.
Related
I am new to bootstrap forms. I see that the UI is different when the input is nested inside a label. Can someone explain me why?
Here is the code snippet
<form [formGroup]="loginForm" (ngSubmit)="onSubmit()">
<div class="form-group">
<label>userName:
<input class="form-control col-sm-5" formControlName="userName" type="text">
</label>
</div>
<div class="form-group">
<label>userName:</label>
<input class="form-control col-sm-5" formControlName="userName" type="text">
</div>
</form>
My page is rendered as shown in an image. My question is why does the input element appear shorter in the first and longer in the second row?
it`s according HTML Way of treating Codes as Block and Inline elements.
A block-level element always starts on a new line.
A block-level element always takes up the full width available (stretches out to the left and right as far as it can).
A block level element has a top and a bottom margin, whereas an inline element does not.
An inline element does not start on a new line.
An inline element only takes up as much width as necessary.
Source 1 Source 2
and the way bootstrap treat it according to flexbox theory
I have a bootstrap form in this jsfiddle and a simple label + textbox combo.
<div class="form-group">
<label class="col-md-4 control-label" for="af_Email">Email</label>
<div class="col-md-4">
<input id="af_Email" readonly="readonly" name="af_Email"
placeholder="" class="form-control input-md"
required="" value="frizzo#hotmail.com" type="email">
</div>
</div>
When page is expanded (assuming in the col-md-* range), labels right align and the margins are good and the page looks good.
When I shrink the page to something lesser than col-md-*, the labels left align, the margins to the panel are non-existent and it looks unprofessional:
How can I add margins (on both side of the panel) when page size lesser than col-md-*?
As a bonus question, can someone explain where in bootstrap this behavior is defined or documented?
Looks like you missed to add .col-md-12 before .form-group.
Here's the update: https://jsfiddle.net/ttb0xtn0/1/
Im having trouble with creating my form which is placed in a tab-pane. It seems that my labels and input
elements are crossing each others bounderies when labels are to long or the window made smaller
My code can be seen here .. please notice that labels and inputs dont stay aligned when window size changes. It seems like making rows and columns inside tab-pane is not working the same way as when they are created outside that class.
http://www.bootply.com/I3Iwdr4UVj
It's as if the input element does not know the boundry of the label ..
Are there other ways to nicely create the form inside my tab-pane ? ..
First of all, try to give a className with wider width, .col-sm-2 is too narrow for a label:
<div class="form-group">
<label class="control-label col-sm-5" for="pwd">Password:</label>
<div class="col-sm-7">
<input type="password" placeholder="Enter password" id="pwd" class="form-control">
</div>
</div>
I would suggest you always try to get the sum of 12 when you use Bootstrap classes.
Im designing a website using Visual Studio 2012 ASP.NET MVC4
And it’s supposed to be like this
but it turned out to be like this
![default2][2]
I need to align the logo with the Username & Password fields and those fields should have space in between. Btw, I'm using the latest version of Twitter Bootstrap as my CSS. Thanks for helping out!
Also, these are my codes.
<header class="navbar navbar-inverse" role="banner">
<div class="container">
<img src="#Url.Content("~/Content/img/Logo-Sample.png")" alt="Image" id="logo" class="img-responsive"/>
<div class="pull-right">
<form class="navbar-form pull-right" role="form">
<div class="form-group">
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="Username">
</div>
<div class="form-group">
<input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-default">Sign in</button>
</form>
</div>
</div>
</header>
Update:
I've applied Ryan's suggestion the "float stuff" and the logo is now inlined with the input fields.
But the input field went upward instead of downward. Any suggestions for this? Thanks!
Check out Bootstrap's docs for Inline forms. I believe this is exactly what you are looking for.
As a side note, check out TwitterBootstrapMVC. Your code might look cleaner with it.
So it looks like your logo and login sections are both block-level elements. They need to be inline-block OR one of them needs to be floated left or right as appropriate.
Insofar as the space between elements for your login block... I'd do a css selector to match the header login input elements and add some margin-right to them.
HTML formatting is very finicky sometimes. However, open up the markup for the asp file and put a space between those input areas' tags or put one trailing after the word in the placeholder. For the being slightly too high, I forgot the word I am looking for, but its something a bit like a table, make them both in slots for that row. Look around for what Im attempting to say as I just completely forgot the term.
(if I remember Ill come back and edit this)
I'm doing a layout for an account page. And I'm thinking my code looks horrible because I am trying to avoid using tables. Here is a screen shot of what I want to get:
Right now, I'm using something like this (see jsfiddle): http://jsfiddle.net/uaUtq/7/
Here it is for quick review:
<ul class="info_list">
<li>
<label>First name</label>
<div><input type="text" /></div>
</li>
<li>
<label>Email</label>
<div>
<p>john#gmail.com (Default)</p>
<input type="text"/></div>
</li>
<li>
<label></label>
<div>
<input type="checkbox" />Tickbox
</div>
</li>
</ul>
It feels ugly and complicated. What way would you advise to do it?
Thanks
There's nothing wrong with using an unordered list for what you're doing. Other options you could think about are just using a form, then just wrapping your label-input pairings in divs for layout purposes:
<form>
<div>
<label for="firstName">First Name</label>
<input type="text" id="firstName" />
</div>
<div>
<label for="email">Email</label>
<input type="text" id="email" />
</div>
// etc.
</form>
Don't mess with too many tags.
Just use <div>...</div> and leave the styling part to CSS
(that's its original purpose anyway : to separate "content" from "design")...
i think you should use div instead of li
like this
<div>
<div class="label">First Name</div>
<div class="element"><input type="text"/></div>
</div>
<div>
<div class="label">Email</div>
<div class="element"><input type="text"/></div>
</div>
and write CSS class for label and control to proper alignment i.e. margin, padding, float, etc.
You should use a table. A table is the only way to make the columns aligned so that the first column occupies just the width it needs (the width of the longest label). Any other approach forces you to make a guess on the width, and the results will inevitably vary, and the code will not be robust (the width needs to be adjusted whenever the length of the longest label changes).
(This is a repeating question, and you’ll find many versions of it at StackOverflow, with varying answers. The issue is very simple once you stop listening to ideological arguments that are not backed up with facts.)