I'm trying to have several input/buttons in a single input-group. I'd also like the first input to be smaller than the other one. For now, it re-sizes the input but the other element stay in place, creating a gap.
What am I missing?
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-fw fa-exclamation"></i></span>
<input style="width:150px" type="text" class="form-control" name="command">
<span class="input-group-addon"><i class="fa fa-fw fa-comment"></i></span>
<input type="text" class="form-control" name="message">
<div class="input-group-btn">
<button type="submit" class="btn btn-success" name="update"><i class="fa fa-fw fa-pencil"></i></button>
<button type="submit" class="btn btn-danger" name="delete"><i class="fa fa-fw fa-times"></i></button>
</div>
</div>
</div>
Related
I am trying to increase the width of the label in a form within a Boostrap modal. It has a max-width of max-width: 16.66667%;. Is there a better way or class I should set this up with? As you can see the label is being overwritten and there is plenty of space to the right. I'd rather use Bootstrap classes then my own custom ones if possible.
<form class="game-score-modal" novalidate="novalidate" action="#Url.Action(Model.Score.UpdateGameUrl)" data-bind="submit: save, with: score">
.
.
.
<div class="form-row">
<label for="EnableSubscription">Communication</label>
<div class="col-auto">
<button type="button" class="btn btn-check active" data-toggle="buttons-checkbox" title="Send Email/Text"><i class="fa fa-comment"></i> </button><input checked="checked" data-bind="value: EnableSubscription,disable: EnableSubscription() == null ? true : false, checkbox: { checked: true, iconClass: 'fa fa-comment'}" id="EnableSubscription" name="EnableSubscription" title="Send Email/Text" type="checkbox" value="true"><input name="EnableSubscription" type="hidden" value="false">
<button type="button" class="btn btn-check active" data-toggle="buttons-checkbox" title="Post To Twitter"><i class="fab fa-twitter"></i> </button><input checked="checked" data-bind="value: EnableTwitter,disable: EnableTwitter() == null ? true : false, checkbox: { checked: true, iconClass: 'fab fa-twitter'}" id="EnableTwitter" name="EnableTwitter" title="Post To Twitter" type="checkbox" value="true"><input name="EnableTwitter" type="hidden" value="false">
<button type="button" class="btn btn-check active" data-toggle="buttons-checkbox" title="Post To Facebook"><i class="fab fa-facebook"></i> </button><input checked="checked" data-bind="value: EnableFacebook,disable: EnableFacebook() == null ? true : false, checkbox: { checked: true, iconClass: 'fab fa-facebook'}" id="EnableFacebook" name="EnableFacebook" title="Post To Facebook" type="checkbox" value="true"><input name="EnableFacebook" type="hidden" value="false">
</div>
</div>
<button type="submit" class="btn btn-primary"><i class="fa fa-check"></i> Save</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal"><i class="fa fa-ban"></i> Cancel</button>
</div>
</form>
Treat the form as it was your bootstrap grid using column classes.
Switch from .row to .form-row when you want your gutters to be compact.
Also if your modal is purely a form then replace the div.modal-content with form.modal-content and utilise bootstraps modal classes.
For example...
$('#updateScore').modal('show');
<div class="modal" tabindex="-1" role="dialog" id="updateScore">
<div class="modal-dialog" role="document">
<form class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Update Score</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<i class="fa fa-times"></i>
</button>
</div>
<div class="modal-body">
<div class="form-group row">
<label class="col-form-label col-sm-4 col-12 text-sm-right">Team 1</label>
<div class="col-sm-8 col-12">
<div class="form-row">
<div class="form-group col-sm-3 col-4">
<input type="number" class="form-control" />
</div>
<div class="form-group col-sm-6 col-8">
<div class="input-group">
<div class="input-group-prepend">
<label class="input-group-text">
Won By
</label>
</div>
<select class="custom-select">
<option selected>-</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="form-group col-12">
<button type="button" class="btn btn-secondary">
<i class="fa fa-check"></i> Pool Play
</button>
<button type="button" class="btn btn-info">
<i class="fa fa-fw fa-info"></i>
</button>
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-circle-thin"></i>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Option</a>
<a class="dropdown-item" href="#">Option</a>
</div>
</div>
</div>
</div>
</div>
</div>
<hr />
<div class="form-group row">
<label class="col-form-label col-sm-4 col-12 text-sm-right">Team 2</label>
<div class="col-sm-8 col-12">
<div class="form-row">
<div class="form-group col-sm-3 col-4">
<input type="number" class="form-control" />
</div>
<div class="form-group col-sm-6 col-8">
<div class="input-group">
<div class="input-group-prepend">
<label class="input-group-text">
Won By
</label>
</div>
<select class="custom-select">
<option selected>-</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="form-group col-12">
<button type="button" class="btn btn-secondary">
<i class="fa fa-check"></i> Pool Play
</button>
<button type="button" class="btn btn-info">
<i class="fa fa-fw fa-info"></i>
</button>
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-circle-thin"></i>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Option</a>
<a class="dropdown-item" href="#">Option</a>
</div>
</div>
</div>
</div>
</div>
</div>
<hr />
<div class="form-group row">
<label class="col-form-label col-sm-4 col-12 text-sm-right">Notes</label>
<div class="col-sm-8 col-12">
<input type="text" class="form-control" />
</div>
</div>
<div class="form-group row">
<label class="col-form-label col-sm-4 col-12 text-sm-right">Uploads</label>
<div class="col-sm-8 col-12">
<div class="custom-file">
<input type="file" class="custom-file-input" id="uploads" required>
<label class="custom-file-label" for="uploads">Choose file...</label>
</div>
</div>
</div>
<div class="form-group row">
<label class="col-form-label col-sm-4 col-12 text-sm-right">Communication</label>
<div class="col-sm-8 col-12">
<button type="button" class="btn btn-primary">
<i class="fa fa-fw fa-comment"></i>
</button>
<button type="button" class="btn btn-primary">
<i class="fa fa-fw fa-twitter"></i>
</button>
<button type="button" class="btn btn-primary">
<i class="fa fa-fw fa-facebook"></i>
</button>
<input type="hidden" value="false" />
<input type="hidden" value="false" />
<input type="hidden" value="false" />
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">
<i class="fa fa-ban"></i> Cancel
</button>
<button type="submit" class="btn btn-primary">
<i class="fa fa-check"></i> Save
</button>
</div>
</form>
</div>
</div>
<div class="container mt-3">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#updateScore">
Launch demo modal
</button>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
I want to create an input group where the text input should be small, i add .col-3 but it breaks the layout
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<form class="form-horizontal">
<div class="row form-group">
<div class="col col-md-6">
<div class="input-group">
<div class="input-group-btn">
<div class="btn-group"><button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle btn btn-primary">Store Groups</button>
<div tabindex="-1" aria-hidden="true" role="menu" class="dropdown-menu"><button type="button" tabindex="0" class="dropdown-item">Sports</button><button type="button" tabindex="1" class="dropdown-item">Kids Sport</button></div>
</div>
</div>
<div class="col-3"><input type="number" step="5" id="input1-group3" name="input1-group3" placeholder="Username" class="form-control"></div>
<div class="input-group-addon">/page</div><button type="button" class="btn btn-primary"><i class="fa fa-search"></i></button></div>
</div>
</div>
</form>
here is if we add no sizing
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<form class="form-horizontal">
<div class="row form-group">
<div class="col col-md-6">
<div class="input-group">
<div class="input-group-btn">
<div class="btn-group"><button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle btn btn-primary">Store Groups</button>
<div tabindex="-1" aria-hidden="true" role="menu" class="dropdown-menu"><button type="button" tabindex="0" class="dropdown-item">Sports</button><button type="button" tabindex="1" class="dropdown-item">Kids Sport</button></div>
</div>
</div><input type="number" step="5" id="input1-group3" name="input1-group3" placeholder="Username" class="form-control">
<div class="input-group-addon">/page</div><button type="button" class="btn btn-primary"><i class="fa fa-search"></i></button></div>
</div>
</div>
</form>
what should i do?
I think you are looking for something like this one.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<form class="form-horizontal">
<div class="row form-group">
<div class="col col-md-6">
<div class="input-group">
<div class="input-group-btn">
<div class="btn-group"><button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle btn btn-primary">Store Groups</button>
<div tabindex="-1" aria-hidden="true" role="menu" class="dropdown-menu"><button type="button" tabindex="0" class="dropdown-item">Sports</button><button type="button" tabindex="1" class="dropdown-item">Kids Sport</button></div>
</div>
</div>
<div class="input-group mb-3 col-7">
<input type="number" step="5" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon2">
<div class="input-group-append">
<input class="form-control" id="disabledInput" type="text" placeholder="/page" disabled style="width: 100px">
<button class="btn btn-primary" type="button"><i class="fa fa-search"></i></button>
</div>
</div>
</div>
</div>
</div>
</form>
I Hope You Are Looking For This
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<form class="form-inline">
<div class="col col-md-6">
<div class="btn-group">
<button type="button" class="btn btn-primary form-control mb-2 ">Store Groups</button>
<button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split form-control mb-2 mr-sm-2" data-toggle="dropdown">
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Store Groups</a>
<a class="dropdown-item" href="#">Sports</a>
</div>
</div>
<input type="number" step="5" id="input1-group3" name="input1-group3" placeholder="Username" class="form-control mb-2 mr-sm-2">
<div class="input-group-addon form-control mb-2 ">/page</div> <button type="submit" class="btn btn-primary mb-2">Submit</button>
</div>
</form>
I'm trying to put all the controls on the same row without using the class row 'cause this controls are near a column, that also have other controls. So my structure is actually this:
<div class="col-xs-12 col-md-4">
<button class="btn btn-default">
<span class="glyphicon glyphicon-plus"></span>
Add</button>
<button class="btn btn-default" >
<span class="glyphicon glyphicon-plus"></span>
Remove</button>
<button class="btn btn-default">
<span class="glyphicon glyphicon-repeat"></span>
Refresh</button>
<button class="btn btn-default">
<span class="glyphicon glyphicon-fullscreen"></span>
</button>
<div class="input-group">
<input type="text"
class="form-control"
placeholder="Hello world">
<span class="input-group-btn">
<button class="clear btn btn-default clean-resource btn-danger" type="button">
<span class="glyphicon glyphicon-remove"></span>
</button>
</span>
</div>
</div>
and this is a jsfiddle
How you can see the buttons are on the same line but the textbox go ahead, I don't know wham is wrong. Someone could help? Thanks.
Use this type of grid section and http://www.w3schools.com/bootstrap/bootstrap_grid_system.asp and adjust screen size according to this link
<div class="row">
<div class="col-sm-4">
<button class="btn btn-default">
<span class="glyphicon glyphicon-plus"></span>
Add</button>
<button class="btn btn-default" >
<span class="glyphicon glyphicon-plus"></span>
Remove</button>
<button class="btn btn-default">
<span class="glyphicon glyphicon-repeat"></span>
Refresh</button>
<button class="btn btn-default">
<span class="glyphicon glyphicon-fullscreen"></span>
</button>
</div>
<div class="col-sm-4">
<div class="input-group">
<input type="text"
class="form-control"
placeholder="Hello world">
<span class="input-group-btn">
<button class="clear btn btn-default clean-resource btn-danger" type="button">
<span class="glyphicon glyphicon-remove"></span>
</button>
</span>
</div>
</div>
</div>
I have an app that uses Bootstrap. In this app, I have a list of items that I can reorder. Currently, my list looks like this:
<div class="col-xs-12">
<ul id="choices" class="list-unstyled">
<li>
<i class="fa fa-reorder"></i>
<div class="form-group">
<input type="text" class="form-control col-md-8">
</div>
<i class="fa fa-times-circle"></i>
</li>
<li>
<i class="fa fa-reorder"></i>
<div class="form-group">
<input type="text" class="form-control col-md-8">
</div>
<i class="fa fa-times-circle"></i>
</li>
<li>
<i class="fa fa-reorder"></i>
<div class="form-group">
<input type="text" class="form-control col-md-8">
</div>
<i class="fa fa-times-circle"></i>
</li>
</ul>
</div>
I'm trying to make this list such that each item fills the entire width of the entire space. In other words, I want it to looks like this:
div
+---------------------------------------------------------------------------+
| |
| = _____________________________________________________________________ x |
| = _____________________________________________________________________ x |
| = _____________________________________________________________________ x |
| |
+---------------------------------------------------------------------------+
At the moment, when I do this, I get the input field on a different line and I can't get each list item to fill the available space. What am I missing?
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<div class="col-xs-12">
<ul id="choices" class="list-unstyled">
<li>
<div class="input-group margin-bottom-sm">
<span class="input-group-addon"><i class="fa fa-reorder fa-fw"></i></span>
<input type="text" class="form-control col-md-8">
<span class="input-group-addon"><i class="fa fa-times-circle fa-fw"></i></span>
</div>
</li>
<li>
<div class="input-group margin-bottom-sm">
<span class="input-group-addon"><i class="fa fa-reorder fa-fw"></i></span>
<input type="text" class="form-control col-md-8">
<span class="input-group-addon"><i class="fa fa-times-circle fa-fw"></i></span>
</div>
</li>
<li>
<div class="input-group margin-bottom-sm">
<span class="input-group-addon"><i class="fa fa-reorder fa-fw"></i></span>
<input type="text" class="form-control col-md-8">
<span class="input-group-addon"><i class="fa fa-times-circle fa-fw"></i></span>
</div>
</li>
</ul>
</div>
you can add icons to each side of an input with bootstrap
take a look at this:
bootstrap input addons
see following for an example with font awesome icons (go to bootstrap 3 examples)
font awesome examples
You can achieve this using float with an explicit width on your icon, and adding overflow:hidden to the input codepen
HTML
<ul id="choices" class="list-unstyled">
<li>
<i class="fa fa-reorder left"></i>
<i class="fa fa-times-circle right"></i>
<div class="middle"><input type="text" class="form-control"></div>
</li>
</ul>
CSS
.left {
width: 50px;
float: left;
}
.right {
width: 50px;
float: right;
}
.middle {
overflow: hidden;
}
Try to use bootrstrap inline forms
<li class="form-inline">
<div class="form-group">
<i class="fa fa-reorder"></i>
<input type="text" class="form-control col-md-8">
<i class="fa fa-times-circle"></i>
</div>
</li>
try col-xs-12 and width attribute in styles
Hey for some reason this if/else statement in my template is not working:
<div class="col-md-4">
<div class="row">
<div id="custom-search-input">
<div class="form-group col-md-12">
<div class="input-group col-md-12">
{{#if addingSubreddit}}
<input class="form-control input-lg" type="text">
<span class="input-group-btn" style="width: 2%;">
<button class="btn btn-info btn-lg" id="addSubreddit" type="submit">
<i class="glyphicon glyphicon-plus"></i>
</button>
{{else}}
<button id="newSubreddit" class="btn btn-info btn-lg" type="submit">
<i class="glyphicon glyphicon-plus"></i>
</button>
{{/if}}
</span>
</div>
</div>
</div>
</div>
</div>
It gives me this error:
Your app is crashing. Here's the latest log.
Errors prevented startup:
While building the application:
client/views/subreddits.html:14: Unexpected {{else}}
...n> {{else}} hey ...
^
Your application has errors. Waiting for file change.
I cannot figure out why this doesn't work?
You have placed span tag wrong. you have coded the {{#if}} outside the span tag but coded the {{else}} inside the tag which is wrong.
instead this might solve the problem:
<div class="col-md-4">
<div class="row">
<div id="custom-search-input">
<div class="form-group col-md-12">
<div class="input-group col-md-12">
{{#if addingSubreddit}}
<input class="form-control input-lg" type="text">
<span class="input-group-btn" style="width: 2%;">
<button class="btn btn-info btn-lg" id="addSubreddit" type="submit">
<i class="glyphicon glyphicon-plus"></i>
</button>
</span>
{{else}}
<span class="input-group-btn" style="width: 2%;">
<button id="newSubreddit" class="btn btn-info btn-lg" type="submit">
<i class="glyphicon glyphicon-plus"></i>
</button>
</span>
{{/if}}
</div>
</div>
</div>
You can't let tags unclosed inside block helpers, so you have to rewrite your template code like this :
<div class="col-md-4">
<div class="row">
<div id="custom-search-input">
<div class="form-group col-md-12">
<div class="input-group col-md-12">
{{#if addingSubreddit}}
<input class="form-control input-lg" type="text">
{{/if}}
<span class="input-group-btn" style="width: 2%;">
{{#if addingSubreddit}}
<button class="btn btn-info btn-lg" id="addSubreddit" type="submit">
<i class="glyphicon glyphicon-plus"></i>
</button>
{{else}}
<button id="newSubreddit" class="btn btn-info btn-lg" type="submit">
<i class="glyphicon glyphicon-plus"></i>
</button>
{{/if}}
</span>
</div>
</div>
</div>
</div>
</div>