input width and button width with bootstrap - html

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>

Related

Find out how the height of a button was set

My code (full version):
<div class="modal-body">
<div class="container">
<div class="row">
<div class="col-8 p-0">
<form class="form-group">
<form>
<input type="text" class="form-control w-100 pr-0 mr-0" id="quick-add-task-control-text-area" placeholder="Task name">
</form>
</form>
</div>
<div class="col-4 p-0">
<button type="button" class="btn btn-secondary w-100 h-100 ml-0" id="schedule-button">Schedule</button>
</div>
</div>
</div>
<div class="modal-footer d-flex flex-row justify-content-start pl-0">
<button type="button" class="btn btn-primary btn-sm" id="add-task-modal-save">Save changes</button>
<div class="input-group mb-0 w-50">
<div class="input-group-prepend">
<label class="input-group-text" for="inputGroupSelectPriority">Priority</label>
</div>
<select class="custom-select" id="inputGroupSelectPriority">
<option selected>Choose...</option>
<option value="Low">Low</option>
<option value="Medium">Medium</option>
<option value="High">High</option>
</select>
</div>
</div>
</div>
</div>
</div>
After opening my modal on the navbar ("+" icon), I wanted the height of my input-group to be the same height as my "save changes" button on the left. After inspecting its styles (of the 'save button' I could not understand how it's height was calculated. I did not find any em or rem, or any reference to the parent element like the bootstrap class "h-100". So I had to do it using the height property and pixels, which I know is a terrible way of doing it.
So my question is, how do I set the height of my input-group element in the proper responsive-friendly way?
(For the modal footer I didn't set a container and a row and columns as I did in the modal body, is that terrible?)
The button's height is not explicitly set by Bootstrap, it's automatically calculated from the size of the content plus its margin, padding and border. The custom select's height, however, is explicitly set, so there is not a way to make it smaller without explicitly overriding that, as well as the properties on the label, unfortunately.
The way you're doing it is not really that bad, just indicative of what, in my opinion, is Bootstrap's biggest drawback: that if you need to even moderately customize your styles, you'll end up fighting and overriding its CSS for much longer than you save by making use of its grid system, though some of the components are quite useful. You may just want to use a custom input element you style yourself, that way you can use flexbox to have it size up automatically.
Otherwise if you add h-100 to the select element it should be what you're looking for. Note that if you do shrink the select's height, you will also need to override its padding and/or font size to prevent the text from being cut off.
In projects using Bootstrap, any element with d-flex is a flexbox container, making the immediate child elements flex items.
Flexbox can drastically change the height of items when flex-direction equals row, which is the default. The items will naturally take up the height of the flexbox container.
Applying a fixed height to items might help but in this circumstance it might just be easier to add a wrapper div around elements like <select> and <button> that are being effected in this way by a flexbox container. That way the wrapper you added can have its height changed by the flexbox container, but the <select> inside keeps its natural height.
Awesome resource about how flexbox works.

input button occupying 100% in bootstrap div

Input button occupying 100% in bootstrap div. I want see button and <a> next to each other. I don't know what's wrong here.
<div class="col-xs-12 col-sm-6 col-md-5">
<input type="submit" value="Save" class="btn btn-success " onclick="javascript: submitPhone();">
<a class="linkbutton linkbutton" onclick="PostEditPhoneCancel()"> Cancel </a>
</div>
You can try and set the 'a' tag class as a button, instead of a link it already is.
This is probably happened because the elements have display: block applied.
There's a couple of solutions you can use. One would be to use floats so apply float:left to both the button and the anchor.
Another way of achieving this is to add display: inline-block to both of the elements.

Bootstrap button positioning

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>

bootstrap grid - form-control takes full width of parent div, how to insert something next to it?

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>

How can i set width of a input group

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