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>
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 the problem with center all button in each col-md-4:
<div class="row position-relative mt-2">
<div class="col-md-4 center-block">
<div class="center-block align-to-bottom">
<div class="btn-group-vertical">
<p>
<button class="btn btn-info btn-sm btn-block" type="button">
button
</button>
</p>
<p>
<button class="btn btn-warning btn-sm btn-block" type="button">
button
</button>
</p>
</div>
</div>
</div>
<div class="col-md-4 center-block">
<div class="btn-group-vertical">
<p>
<button class="btn btn-info btn-sm btn-block" type="button">
button
</button>
</p>
<p>
<button class="btn btn-info btn-sm btn-block" type="button">
button
</button>
</p>
<p>
<button class="btn btn-warning btn-sm btn-block" type="button">
button
</button>
</p>
</div>
</div>
<div class="col-md-4 center-block">
<p>
<button class="btn btn-success btn-sm btn-block" type="button">
button
</button>
</p>
</div>
</div>
Also second question -> I uses also w-100, h-85... But it is no working. I am also looking for solution to set up relative size of buttons.
To horizontally align a button you can just add the class text-center to your parent column.
I also removed the p tags and instead added the margin to the button itself with the class mb-2
I did remove a lot of your classes too as they didn't seem to be Bootstrap 4 classes. If these are needed just add them back where you think neccessary.
Also rather than making your button a block which gives it the full width of your parent, I just added another row and put each button in its own full width column which will act as the block.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row mt-2">
<div class="col-md-4 text-center">
<div class="row">
<div class="col-12 mb-2">
<button class="btn btn-info btn-sm" type="button">
Button
</button>
</div>
<div class="col-12 mb-2">
<button class="btn btn-warning btn-sm" type="button">
Button
</button>
</div>
<div class="col-12 mb-2">
<button class="btn btn-warning btn-sm" type="button">
Button
</button>
</div>
</div>
</div>
<div class="col-md-4 text-center">
<div class="row">
<div class="col-12 mb-2">
<button class="btn btn-info btn-sm" type="button">
Button
</button>
</div>
<div class="col-12 mb-2">
<button class="btn btn-info btn-sm" type="button">
Button
</button>
</div>
<div class="col-12 mb-2">
<button class="btn btn-warning btn-sm" type="button">
Button
</button>
</div>
</div>
</div>
<div class="col-md-4 text-center">
<button class="btn btn-success btn-sm" type="button">
Button
</button>
</div>
</div>
I hope this solves your issues, let me know if it's not quite what you were looking for.
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>
I have the following code to display some buttons and dropdown menus.
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group" role="group" aria-label="Toolbar Group">
<button type="button" class="btn btn-default as-btn-text as-add-btn">Add</button>
<button type="button" class="btn btn-default as-btn-text as-delete-btn">Delete</button>
<button type="button" class="btn btn-default dropdown-toggle as-btn-text as-conf-btn" data-toggle="dropdown" aria-expanded="false">Configuration <span class="caret"></span>
</button>
<ul class="dropdown-menu as-toolbar-dropdown" role="menu">
<li>Enable
</li>
<li>Disable
</li>
</ul>
</div>
<div class="button-group pull-right">
<button type="button" class="btn btn-default as-btn-text as-refresh-btn"></button>
</div>
</div>
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group" role="group" aria-label="Toolbar Group">
<button type="button" class="btn btn-default dropdown-toggle as-btn-text as-conf-btn" data-toggle="dropdown" aria-expanded="false">Configuration <span class="caret"></span>
</button>
<ul class="dropdown-menu as-toolbar-dropdown" role="menu">
<li>
<button id="btnEnable" type="submit" name="command" value="Enable"><span>Enable</span>
</button>
</li>
<li>
<button id="btnDisable" type="submit" name="command" value="Disable"><span>Disable</span>
</button>
</li>
</ul>
</div>
</div>
It works okay except one of the menus doesn't appear under the dropdown.
Fiddle here
Any ideas would be appreciated.
Looks like you are not using latest version of JQuery. Please update JQuery and use Bootstrap library to make this work.
In you fiddle, choose jQuery 2.1.0 and select Bootstrap 3.2.0 option.
Looks like I had to put the dropdown buttons into their own btn-group.
Fiddle here
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group" role="group" aria-label="Toolbar Group">
<button type="button" class="btn btn-default as-btn-text as-add-btn">Add</button>
<button type="button" class="btn btn-default as-btn-text as-delete-btn">Delete</button>
<div class="btn-group" role="group" aria-label="Dropdown Group">
<button type="button" class="btn btn-default dropdown-toggle as-btn-text as-conf-btn" data-toggle="dropdown" aria-expanded="false">Configuration <span class="caret"></span>
</button>
<ul class="dropdown-menu as-toolbar-dropdown" role="menu">
<li>Enable
</li>
<li>Disable
</li>
</ul>
</div>
</div>
<div class="button-group pull-right">
<button type="button" class="btn btn-default as-btn-text as-refresh-btn"></button>
</div>
</div>
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group" role="group" aria-label="Toolbar Group">
<button type="button" class="btn btn-default dropdown-toggle as-btn-text as-conf-btn" data-toggle="dropdown" aria-expanded="false">Configuration <span class="caret"></span>
</button>
<ul class="dropdown-menu as-toolbar-dropdown" role="menu">
<li>
<button id="btnEnable" type="submit" name="command" value="Enable"><span>Enable</span>
</button>
</li>
<li>
<button id="btnDisable" type="submit" name="command" value="Disable"><span>Disable</span>
</button>
</li>
</ul>
</div>
</div>
I have the following code which displays some buttons:
Fiddle
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group" role="group" aria-label="Toolbar Group">
<button type="button" class="btn btn-default as-btn-text as-add-btn">Add</button>
<button type="button" class="btn btn-default as-btn-text as-delete-btn">Delete</button>
<button type="button" class="btn btn-default dropdown-toggle as-btn-text as-conf-btn" data-toggle="dropdown" aria-expanded="false">Configuration <span class="caret"></span>
</button>
<ul class="dropdown-menu as-toolbar-dropdown" role="menu">
<li>A
</li>
<li>B
</li>
</ul>
<button type="button" class="btn btn-default as-btn-text as-refresh-btn">X</button>
</div>
</div>
I want to pull the "X" to the far right of the group. I have tried .pull-right, float:right but neither seem to work.
Any ideas appreciated!
I would put the close ("X") button in its own .button-group and pull the group to the right:
<!-- previous button location -->
</div><!-- close the existing group -->
<div class="button-group pull-right">
<!-- new button location -->
<button type="button" class="btn btn-default as-btn-text as-refresh-btn">X</button>
</div>
</div><!-- end .btn-toolbar -->
Here's an update to your fiddle.
The advantage to this approach is that you get the correct button rounding based on the .button-group rules and you don't need to alter or override existing Bootstrap framework CSS.
Updated HTML
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
<div id ="b"class="btn-group" role="group" aria-label="Toolbar Group">
<button type="button" class="btn btn-default as-btn-text as-add-btn">Add</button>
<button type="button" class="btn btn-default as-btn-text as-delete-btn">Delete</button>
<button type="button" class="btn btn-default dropdown-toggle as-btn-text as-conf-btn" data-toggle="dropdown" aria-expanded="false">
Configuration
<span class="caret"></span>
</button>
<ul class="dropdown-menu as-toolbar-dropdown" role="menu">
<li>A</li>
<li>B</li>
</ul>
<button type="button" id="right" class="btn btn-default as-btn-text as-refresh-btn">X</button>
</div>
</div>
Updated CSS:
#b{
width:100%;
}
#right{
float:right;
}
Working Example:http://jsfiddle.net/tmurmvnx/
In bootstrap 4 you can use the strong text class, check this simple example:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<div class="btn-group btn-group-lg float-right" role="group">
<button type="submit" class="btn btn-dark">
Btn 1
</button>
<button type="submit" class="btn btn-primary">
Btn 2
</button>
</div>
For more information check this documentation:
https://getbootstrap.com/docs/4.0/utilities/float/
https://getbootstrap.com/docs/4.0/utilities/text/#text-alignment