hi, i am learning bootstrap. thing i do not really get is how to create forms.
Here’s a form i would like to create. the part where the three inputs are in seperated with a / and have different sizes i cannot get this right.
The form should span 2/3 or 3/4 of the width. I would like to have a column of informational text at the right.
would be great if somebody could help me out with some code for this.
thanks
Could you post your attempt?
sure, but i think it is better to start over.
there is some trial and error code in there.
<form role="form" class="form-horizontal">
<div class="row">
<div class="col-sm-6">
<h3 class="page-header">Geconstateerd door</h3>
</div>
</div>
<div class="form-group ">
<label class="col-sm-1" for="inputNameEmployee">Naam</label>
<div class="col-sm-2">
<select class="form-control" id="inputNameEmployee">
<option value="Naam melder">Naam melder</option>
<option value="9231~1">Aasd dven</option>
</select>
</div>
<label class="col-sm-1" for="inputNameDepartment">Afdeling</label>
<div class="col-sm-2">
<select class="form-control" id="inputNameDepartment">
<option value="Uw afdeling">Uw afdeling</option>
<option value="25">dsds</option>
<option value="13">dsds</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-sm-6">
<label >Ben je ook veroorzaker?</label>
<label class="radio-inline radio-no-padding-top">
<input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> Ja
</label>
<label class="radio-inline radio-no-padding-top">
<input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> Nee
</label>
</div>
</div>
<div class="row">
<div class="col-xs-2">
<input type="text" class="form-control" placeholder=".col-xs-3"> <label>/</label>
</div>
<div class="col-xs-1">
<input type="text" class="form-control" placeholder=".col-xs-4"> <label>/</label>
</div>
<div class="col-xs-1">
<input type="text" class="form-control" placeholder=".col-xs-5">
</div>
</div>
<div class="form-inline">
<div class="col-sm-12">
<div class="form-group">
<label class="sr-onlky" for="inputEmail">INLINE!</label>
<input type="email" class="form-control" id="inputEmail" placeholder="Email">
<label class="sr-onlyf" for="inputPassword">/</label>
<input type="password" class="form-control" id="inputPassword" placeholder="Password" >
<label class="sr-onlyf" for="inputPassword">/</label>
<input type="password" class="form-control" id="inputPassword" placeholder="Password" >
</div>
</div>
</div>
</form>
@willems Good question, picking a challenging layout is a great way to learn. The key is nesting columns.
##Example
<html>
<head>
<link rel='stylesheet' href='css/bootstrap-16column.css' type='text/css' media='all' />
</head>
<div class="container">
<div class="row">
<div class="col-md-16">
<div class="row">
<div class="col-md-12">
<h1>A Big Title <small>A Small Subtitle</small></h1>
</div>
<div class="col-md-4">
</div>
</div>
</div>
</div>
</div>
</html>
*Keep in mind this is built to a 16 column grid (you can configure the grid layout with bootstrap sass or less)
##Full Codepen Example
A Bootstrap Form Example (Full Screen)
Hi toddsby, thanks. This looks promising. But if you check the mockup you will notice there are three inputs in seperated by slashes where the first is wider as the last two, and they are seperated by slashes. Underneath that is a single input the same with.
Like this:
label: __________ / _____ / _____
Label: __________________________
that is also where I am struggling. In normal HTML this would be very easy, but using Bootstrap conventions looks like so much more work, if at all possible???
thanks!
Bootstrap doesn’t contain any predefined “slashes,” you just have to use good ole fashioned html and css. Bootstrap doesn’t replace standard markup, it just augments it.
##Example
<label class="col-md-2 control-label">Date:</label>
<div class="col-md-5">
<input name="datemonth" type="text" placeholder="Month" class="form-control datemonth" />
</div>
<div class="forwardslash">/</div>
<div class="col-md-3">
<input name="dateday" type="text" placeholder="Day" class="form-control dateday" />
</div>
<div class="forwardslash">/</div>
<div class="col-md-3">
<input name="dateyear" type="text" placeholder="Year" class="form-control dateyear" />
</div>
.forwardslash {
float: left;
position: relative;
padding-top: 8px;
}
I usually keep the Bootstrap docs open in another window for reference: Bootstrap CSS (Grids)
##Updated Codepen Example
Updated Codepen Example
ah thanks!
what i did was put the slashes in a col-xx-xx div. i never realized i could just use normal div inbetween. that is where i get confusedl i try to only use classes from bootstrap, when it is not really needed.
One more thing on this. While it looks great, but how can i left align the form. This method aligns all the labels below the big “B” from Big, but i would like to have it aligned below the “A” .
I tried removing and adding some rows/columns but I cannot get it completely to the left.
Here’s what is left of the form (only one textbox and the button.)
<div class="container">
<h1 class="page-header">Add something </h1>
<p class="lead"> Fill in completely please</p>
<div class="row">
<form class="col-md-12 form-horizontal">
<div class="row form-group">
<div class="col-md-16">
<label class="col-md-2 control-label">Label:</label>
<div class="col-md-11 matchwidth">
<input type="text" placeholder="Placeholder" class="form-control">
</div>
</div>
</div>
<div class="row form-group">
<div class="col-md-16">
<input class="btn btn-primary" type="submit" value="Submit">
</div>
</div>
</form>
<div class="col-md-4">
<div class="row">
<div class="col-md-16">
<textarea class="form-control" rows="25"></textarea>
</div>
</div>
</div>
</div>
</div>
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.