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>
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 have created an input text beside a button like so:
It looks good on the regular computer screen, this is exactly how it supposed to look like. but in a phone device view, it's unaligned:
This is the working code I got:
<!-- Add Filer Form -->
<div class="row py-4 bg-darkblue">
<div class="col-md-12">
<form>
<div class="form-group row offset-md-1">
<label for="filerAddress" class="col-sm-2 col-form-label text-white font-weight-bold">Filer ID</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="filerAddress" placeholder="">
</div>
<button type="button" class="btn px-5 btn-light">
<i class="fas fa-search"></i>
</button>
</div>
<div class="form-group row offset-md-1">
<label for="filerName" class="col-sm-2 col-form-label text-white font-weight-bold">Filer Name</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="contact" placeholder="">
</div>
<button type="button" class="btn px-5 btn-light">
<i class="fas fa-search"></i>
</button>
</div>
<div class="form-group row offset-md-1">
<label for="filerType" class="col-sm-2 col-form-label text-white font-weight-bold">Filer Type</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="contact" placeholder="">
</div>
<button type="button" class="btn px-5 btn-light">
<i class="fas fa-search"></i>
</button>
</div>
</form>
</div>
</div>
<!-- #END# Add Filer Form -->
How can I fix this? And what things should I know in order to prevent this when I create more in the future?
Use col-6 instead of col-sm-6
Use offset-1 instead of offset-md-1
Use col-3 instead of col-sm-2
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.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://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>
<!-- Add Filer Form -->
<div class="container-fluid">
<div class="row py-4 bg-secondary">
<div class="col-md-12">
<form>
<div class="form-group row offset-1">
<label for="filerAddress" class="col-3 col-form-label text-white font-weight-bold">Filer ID</label>
<div class="col-6">
<input type="text" class="form-control" id="filerAddress" placeholder="">
</div>
<button type="button" class="btn px-5 btn-light">
<i class="fas fa-search"></i>
</button>
</div>
<div class="form-group row offset-1">
<label for="filerName" class="col-3 col-form-label text-white font-weight-bold">Filer Name</label>
<div class="col-6">
<input type="text" class="form-control" id="contact" placeholder="">
</div>
<button type="button" class="btn px-5 btn-light">
<i class="fas fa-search"></i>
</button>
</div>
<div class="form-group row offset-1">
<label for="filerType" class="col-3 col-form-label text-white font-weight-bold">Filer Type</label>
<div class="col-6">
<input type="text" class="form-control" id="contact" placeholder="">
</div>
<button type="button" class="btn px-5 btn-light">
<i class="fas fa-search"></i>
</button>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
I hope this will resolve your issue
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" />
<!-- Add Filer Form -->
<div class="container">
<div class="row py-4 bg-darkblue">
<div class="col-md-12">
<form>
<div class="form-group offset-md-1">
<div class="row">
<label for="filerAddress" class="col-12 col-sm-2 col-form-label font-weight-bold">Filer ID</label>
<div class="col-8">
<input type="text" class="form-control" id="filerAddress" placeholder="">
</div>
<div class="col-4 col-sm-2">
<button type="button" class="btn btn-primary">
<i class="fas fa-search"></i> Search
</button>
</div>
</div>
</div>
<div class="form-group offset-md-1">
<div class="row">
<label for="filerAddress" class="col-12 col-sm-2 col-form-label font-weight-bold">Filer ID</label>
<div class="col-8">
<input type="text" class="form-control" id="filerAddress" placeholder="">
</div>
<div class="col-4 col-sm-2">
<button type="button" class="btn btn-primary">
<i class="fas fa-search"></i> Search
</button>
</div>
</div>
</div>
<div class="form-group offset-md-1">
<div class="row">
<label for="filerAddress" class="col-12 col-sm-2 col-form-label font-weight-bold">Filer ID</label>
<div class="col-8">
<input type="text" class="form-control" id="filerAddress" placeholder="">
</div>
<div class="col-4 col-sm-2">
<button type="button" class="btn btn-primary">
<i class="fas fa-search"></i> Search
</button>
</div>
</div>
</div>
</form>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-6">``
<h2>Google</h2>
</div>
<div class="col-sm-6">
<div class="input-group pull-left">
<input type="text" class="form-control">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-right">
<li>
<form action="#" class="form-horizontal">
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<label class="col-sm-3 control-label" for="name">Input 1</label>
<div class="col-sm-9">
<input class="form-control" id="name" name="input1" type="text" />
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<label class="col-sm-3 control-label" for="name">Input2</label>
<div class="col-sm-9">
<input class="form-control" id="name" name="input2" type="text" />
</div>
</div>
</div>
</div>
<p>
<input class="btn action-button pull-right" name="commit" type="submit" value="Save">
</p>
</form>
</li>
</ul>
<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-search"></span></button>
</div>
</div>
</div>
</div>
Add h2 class instead of <h2> to your div. And you can also use col-xs-* instead of col-sm-*.
<div class="container">
<div class="row">
<div class="col-xs-2 h2">Google</div>
<div class="col-xs-10">
<div class="input-group">
<input type="text" class="form-control">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-right">
<li>
<form action="#" class="form-horizontal">
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<label class="col-sm-3 control-label" for="name">Input 1</label>
<div class="col-sm-9">
<input class="form-control" id="name" name="input1" type="text" />
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<label class="col-sm-3 control-label" for="name">Input2</label>
<div class="col-sm-9">
<input class="form-control" id="name" name="input2" type="text" />
</div>
</div>
</div>
</div>
<p>
<input class="btn action-button pull-right" name="commit" type="submit" value="Save">
</p>
</form>
</li>
</ul>
<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-search"></span></button>
</div>
</div>
</div>
</div>
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>
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>