How do i set width of input in this case in bootstrap 3.0
Here is the example http://jsfiddle.net/6eBFz/
code
<div class="submit">
<div class="col-md-8 col-sm-8">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
<div class="col-md-4 col-sm-4">
<div class="input-group">
<input type="text" class="form-control ">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Add </button>
</span>
</div>
</div>
</div>
i am looking at the bootstrap way and not custom css
Bootstrap inputs take on the width of their container.
From the Bootstrap docs (http://getbootstrap.com/css/#forms-inline)..
"Inputs, selects, and textareas are 100% wide by default in Bootstrap.
To use the inline form, you'll have to set a width on the form
controls used within."
CSS: .set-width{ width: 50%; }
HTML: <div class="input-group set-width">
You can add a set-width method (call it whatever you want) on any div and then manually size it in your CSS. I wouldn't recommend adding style="width: 50%;" to code because it makes it less readable and makes it much harder to edit later on. Plus with making a CSS class you can reuse it on several input fields (or anything else that you want to be set to that width really! Width can be set in pixels, or in em.
Here is a helpful resource to understand CSS classes and ID's
Related
Here is my code using latest bootstrap v3
/*here is the specialjum class in css*/
.specialjum {
background: #1F72B8;
background-size: cover;
min-height: 600px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0/css/bootstrap-theme.min.css" rel="stylesheet" />
<div class="jumbotron specialjum">
<div class="row">
<h6 class="text-center" style="position: relative; left: -200px;"><img src="~/Images/logo.png" /></h6>
</div>
<div class="col-lg-6 col-lg-offset-4">
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-secondary" type="button">Go!</button>
</span>
<input type="text" class="form-control" placeholder="Search for...">
</div>
</div>
</div>
No other bootstrap has been modified.
Now when I use the code above, the button gets pinned to the input field as expected and the input-group gets centered in the jumbotron div tag
however if I replace the span button after the input text
the button is way off to the right.
here is the following code for tat
.specialjum {
background: #1F72B8;
background-size: cover;
min-height: 600px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0/css/bootstrap-theme.min.css" rel="stylesheet" />
<div class="jumbotron specialjum">
<div class="row">
<h6 class="text-center" style="position: relative; left: -200px;"><img src="~/Images/logo.png" /></h6>
</div>
<div class="col-lg-6 col-lg-offset-4">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-secondary" type="button">Go!</button>
</span>
</div>
</div>
</div>
Notice the only difference is where the button is located before or after the input tag.
NOTE: Bootstrap V3 - with no modifications
Please help and thank you =)
Bootstrap 3 is a mobile-first framework, I bring this up because I noticed you used the col-lg-* class with its offset variant. The col-lg-* classes were specifically made for very large displays. One that will not be often used by your users. If you were using Bootstrap as a boilerplate without any interest on responsiveness, then the col-md-* classes are the ones that will help you most. But if you were coding for responsiveness, you should always start by declaring the mobile sizes first and work your way up. The way Bootstrap 3 was intelligently designed, unless the layout changes, you don't need to declare the larger devices because it will take your smaller devices declarations as a rule.
For instance,
If you coded something col-xs-12, it will be 12 columns span all the way to desktop.
If you coded something col-xs-6, it will be 6 columns span all the way to desktop
If you coded something col-md-6, you will get that at desktop, but most likely your tablets will be 12 column span, and your mobile devices will be most definitely 12 column span. It will always default to 12 columns on mobile unless directed otherwise.
With Bootstrap 3, we've rewritten the project to be mobile friendly from the start. Instead of adding on optional mobile styles, they're baked right into the core. In fact, Bootstrap is mobile first. Mobile first styles can be found throughout the entire library instead of in separate files. - Bootstrap docs
So with that in mind, try to start with the col-xs-* first.
Ok, now, to your centering problem and (not assuming you are coding for responsiveness, but for desktop only) All you need to do is adjust your classes like this:
Instead of this
<div class="col-lg-6 col-lg-offset-4">
Use this
<div class="col-md-6 col-md-push-3">
If you want to make full use of responsiveness, do the following:
<div class="col-xs-12 col-sm-6 col-sm-push-3 col-md-6 col-md-push-3">
See my DEMO
What is the exact version of Bootstrap that you use? Sorry, I wanted to ask this as a comment but I couldn't post one due to low rep.
For Bootstrap 3.3.6
Just give the .input-group specific width and margin: 0 auto; and you are good to go, e.g.
.input-group {
width: 20%;
/* Works for px values too */
margin: 0 auto;
}
.specialjum {
background: #1F72B8;
background-size: cover;
min-height: 600px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap-theme.min.css" rel="stylesheet" />
<div class="jumbotron specialjum">
<div class="row">
<h6 class="text-center" style="position: relative; left: -200px;"><img src="~/Images/logo.png" /></h6>
</div>
<div class="col-lg-6 col-lg-offset-4">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-secondary" type="button">Go!</button>
</span>
</div>
</div>
</div>
The above works for both occasions of html markup you provided.
See working fiddle ( All occasions included in fiddle: both html markups with px and % values for width of .input-group )
I have three buttons and I want them to be on the same line, take all the space and every button has to be the same size.
And as soon as the window is too small to show every button at at least 170px width, I want every button to have their own line and take 100% of it.
I remember seeing websites that have navigation bars which work somewhat like this..
This is what my code currently looks like:
<div class="modal-body">
<button style="min-width:33%;width:170px" type="submit" class="btn btn-primary btn-group">Button A</button><span></span>
<button style="min-width:33%;width:170px" type="submit" class="btn btn-primary btn-group">Button B</button><span></span>
<button style="min-width:33%;width:170px" type="submit" class="btn btn-primary btn-group">Button C</button>
</div>
The first part seems to work fine, but when the window gets too small, the buttons don't take 100% width on their line:
Is there a bootstrap way to achieve that? Or is a css hack necessary?
I would rewrite the HTML to look like this.
<div class="modal-body">
<div class="row">
<div class="col-lg-4 col-sm-12">
<button style="width:100%" type="submit" class="btn btn-primary btn-group">Button A</button>
</div>
<div class="col-lg-4 col-sm-12">
<button style="width:100%" type="submit" class="btn btn-primary btn-group">Button A</button>
</div>
<div class="col-lg-4 col-sm-12">
<button style="width:100%" type="submit" class="btn btn-primary btn-group">Button A</button>
</div>
</div>
</div>
You will need to add a media query to css
button{
width: 170px
}
#media (max-width: 540px){
button{
width: 100%;
}
}
For best results add a parent class to button
if you are using Bootstrap then you should be able to use the 'col' CSS selector
you should be able to apply a container (or row) class depending how much of the screen you want to fill, then apply 'col-md-4 col-sm-12' (depending on the breakpoint you want it to go 100%) to all the buttons you shouldn't write the CSS inline like the example above use the bootstrap classes...
link to the bootstrap documentation http://getbootstrap.com/
Please refer to the Bootstrap grid system documentation to understand more about Col settings on different sizes.
http://getbootstrap.com/css/#grid
I've this Bootstrap HTML markup:
<div class="container">
<div class="field col-md-6 col-md-offset-3">
<button type="button" class="btn btn-block btn-primary">Large button</button>
<button type="button" class="btn btn-primary">X</button>
</div>
</div>
I would like the large button to fill the column (col-md-6), therefore I've used btn-block. But I would like the X button to float right in the same line, taking a bit of the width of the Large button.
The X button should stay small, and the Large button should fill up the rest of the width.
How can I do that?
See my JSFiddle.
You'll want to use input groups to keep everything together.
http://getbootstrap.com/components/#input-groups
Extend form controls by adding text or buttons before, after, or on
both sides of any text-based . Use .input-group with an
.input-group-addon to prepend or append elements to a single
.form-control.
Buttons in input groups are a bit different and require one extra
level of nesting. Instead of .input-group-addon, you'll need to use
.input-group-btn to wrap the buttons. This is required due to default
browser styles that cannot be overridden.
Here is the modification I made to your fiddle.
http://jsfiddle.net/oayw7uhh/5/
All you need to do is surround both elements with a input-group-div
Then, wrap the X button in a span with the class input-group-btn.
https://jsfiddle.net/dennismadsen/oayw7uhh/
Your finished code is
<div class="container">
<div class="field col-md-6 col-md-offset-3">
<div class="input-group">
<button type="button" class="btn btn-block btn-primary">Large button</button>
<span class="input-group-btn">
<button type="button" class="btn btn-primary">X</button>
</span>
</div>
</div>
</div>
I am using the grid system of bootstrap.
My HTML looks as follows (jade syntax)
form.form-horizontal(role='form', name='containerForm', id='containerForm', novalidate)
fieldset
.form-group
label.col-lg-2.control-label(for='ContType')
.col-lg-4
select.form-control(ng-model="data.ContainerType", id='ContType', name='ContType', ng-options='translate(s.name) for s in containerTypeList')
.form-group
(and so on)
The 'form-control' CSS class is taking 100% width of parent DIV (e.g. col-lg-4, these col-lg classes are effectively "table cells"):
.form-control {
display: block;
width: 100%;
}
I need however to display some HTML right before the SELECT above (or, alternatively, after). I need that HTML to be in the same line as the SELECT. If I simply enter something after the SELECT now, it goes to next line, due to width=100% of that SELECT.
How I can possibly achieve my goal while keeping bootstrap classes in place?
You could place both in a row, then put each item in it's own column. For example:
<div class="row col-sm-12">
<div class="col-sm-6">
<input type="text" class="form-control">
</div>
<div class="col-sm-6">
<button class="btn btn-primary">Demo</button>
</div>
Alternatively, you could use an input-group, for example:
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default">Demo</button>
</span>
</div>
I have a form with an input and a button, styled with bootstrap.
I am using grid colums to give the input and the button their own width.
But it seems to change the input's width, I have to assign the col-* class to the div surrounding the input, whereas the button can receive the class on itself.
This ends up with the input not using the width I was hoping to give it.
<div class="container">
<div class="row">
<form name="search" role="search">
<div class="form-group col-sm-10 col-xs-12">
<input type="text" class="form-control input-lg" placeholder="Hey"/>
</div>
<div class="form-group">
<button class="btn btn-primary btn-lg col-sm-2 col-xs-12" type="submit">
Search
</button>
</div>
</form>
</div>
</div>
Here is a jsfiddle where I added a line on the page as a reference to show up to where the input should go on the left. As you make the fiddle window smaller, the button goes under the input and reaches a full lenght, but the input still has a gap on both sides.
It is because the column classes are meant to wrap the elements and give them structure. If you give your button those classes, it will give that element the full width instead of the typical padding.
I moved the column classes onto the form-group instead and made a simple class called .btn-full that sets the width: 100%; and it achieves what you want.
http://jsfiddle.net/SXus5/
If you want the button to be the full width of the container, just add the class 'btn-block' to it. Any inputs inside of a form group will automatically expand to fill their container. Instead of adding the .col classes to the form group, add it to a div the form is contained in.
Here's a modified version of your jsfiddle with the input, button and line all the same width.
<button type="submit" class="btn btn-primary btn-lg btn-block">Search</button>