I have a group of buttons group:
<div class="row">
<div class="col-md-2">
<div class="btn-group-vertical btn-group-justified" role="group" id="nav_bar">
<div id="accordion" role="tablist" aria-multiselectable="true">
<div class="row">
<a class="btn btn-primary" data-toggle="collapse" href="#Setup1" data-parent="#accordion">Setup1</a>
<div id="Setup1" class="panel-collapse collapse">
<div class="col-md-12">
<div class="btn-group-vertical btn-group-justified" role="group">
<div class="row">
<button type="button" class="btn btn-default">MAIN</button>
</div>
<div class="row">
<button type="button" class="btn btn-default">EXEC</button>
</div>
<div class="row">
<button type="button" class="btn btn-default">ROUTER</button>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<a class="btn btn-primary" data-toggle="collapse" href="#Setup2" data-parent="#accordion">Setup2</a>
<div id="Setup2" class="panel-collapse collapse">
<div class="col-md-12">
<div class="btn-group-vertical btn-group-justified" role="group">
<div class="row">
<button type="button" class="btn btn-default">MAIN</button>
</div>
<div class="row">
<button type="button" class="btn btn-default">EXEC</button>
</div>
<div class="row">
<button type="button" class="btn btn-default">ROUTER</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
and in output this is:
but I cant figure out, how to make collapse one group, when you expand other. Could someone help with that?
I was trying to play with panels, but it's unsuitable, because i need a style, which showed on attached image. And in panels only text is clickable.
Thanks
You can do it by setting up your elements with bootstrap properly.
But you can also extend the collapse by:
$('.btn').on('click',function(){
$('.panel-collapse').each(function(){
$(this).removeClass('in');
}):
});
Related
I have a form that looks like the following:
<div class="row">
<div class="col">
<textarea name="comment" class='form-control' placeholder='Type new comment here..'></textarea>
</div>
<div class="col">
<div class="row">
<div class="col">
<button class="btn btn-secondary btn-sm" type='button'><span class="fa fa-times mr5"></span>Cancel</button>
</div>
</div>
<div class="row">
<div class="col">
<button class="btn btn-primary btn-sm mt5" name='new_comment' type='submit'><span class="fa fa-plus mr5"></span>Save</button>
</div>
</div>
</div>
</div>
I'm using Bootstrap 4. The thing is, I want this form to be the max width of its container - to have the textarea stretch and the buttons be a static width. If I use the above, I get a big empty gap because the smallest col (col-1) is to wide for the buttons. How can I have it fill the width of the screen with the button columns remaining a fixed width?
I have a feeling its using flex and d-flex but I cant manage to get it work.
add flex-grow-0 to buttons column:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" >
<div class="container-fluid">
<div class="row">
<div class="col">
<textarea name="comment" class='form-control' placeholder='Type new comment here..'></textarea>
</div>
<div class="col flex-grow-0">
<div class="row">
<div class="col">
<button class="btn btn-secondary btn-sm" type='button'><span class="fa fa-times mr5"></span>Cancel</button>
</div>
</div>
<div class="row">
<div class="col">
<button class="btn btn-primary btn-sm mt5" name='new_comment' type='submit'><span class="fa fa-plus mr5"></span>Save</button>
</div>
</div>
</div>
</div>
</div>
You can remove .col and use d-flex and flex-grow-1.
Then, you can also add a margin-left using ml-3 to the buttons.
<div class="row mw-100">
<div class="d-flex flex-grow-1">
<textarea name="comment" class='form-control' placeholder='Type new comment here..'></textarea>
</div>
<div class="ml-3">
<div class="row">
<div class="col">
<button class="btn btn-secondary btn-sm" type='button'><span class="fa fa-times mr5"></span>Cancel</button>
</div>
</div>
<div class="row">
<div class="col">
<button class="btn btn-primary btn-sm mt5" name='new_comment' type='submit'><span class="fa fa-plus mr5"></span>Save</button>
</div>
</div>
</div>
</div>
For the buttons container, you can set the width you want.
I need to center horizontally a set of buttons into div.
My problem is that the buttons continues left aligned.
//css
.space-btn{
margin-bottom:5px!important;
}
here is my markup:
<div class="row">
<div class="col-sm-12">
<div class="panel panel-default">
<div class="panel-body">
<div class="text-center">
<div class="btn-toolbar">
<button class="btn btn-primary space-btn" type="button">Histórico</button>
<button class="btn btn-primary space-btn" type="button">Reagendar</button>
<button class="btn btn-primary space-btn" type="button">Detalhes</button>
</div>
</div>
</div>
</div>
</div>
</div>
The issue is that btn in bootstrap used inside btn-toolbar are floated
so you may add this code :
.space-btn {
float: none!important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="row">
<div class="col-sm-12">
<div class="panel panel-default">
<div class="panel-body">
<div class="btn-toolbar text-center">
<button class="btn btn-primary space-btn" type="button">Histórico</button>
<button class="btn btn-primary space-btn" type="button">Reagendar</button>
<button class="btn btn-primary space-btn" type="button">Detalhes</button>
</div>
</div>
</div>
</div>
</div>
There is no big issue in code you have to change position of text-center class. this will come like this.
<div class="row">
<div class="col-sm-12">
<div class="panel panel-default">
<div class="panel-body">
<div class="btn-toolbar text-center">
<button class="btn btn-primary space-btn" type="button">Histórico</button>
<button class="btn btn-primary space-btn" type="button">Reagendar</button>
<button class="btn btn-primary space-btn" type="button">Detalhes</button>
</div>
</div>
</div>
</div>
</div>
There is a small change also in css which is
.space-btn{
float:none!important;
}
Add text-center class to the button container.
<div class="row">
<div class="col-sm-12">
<div class="panel panel-default">
<div class="panel-body">
<div class="btn-toolbar text-center">
<button class="btn btn-primary space-btn" type="button">Histórico</button>
<button class="btn btn-primary space-btn" type="button">Reagendar</button>
<button class="btn btn-primary space-btn" type="button">Detalhes</button>
</div>
</div>
</div>
</div>
</div>
I'm practicing bootstrap buttons.
I've written the following code
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-5">
<button class="btn btn-success performanceButton">Best case performance</button>
</div>
<div class="col-md-6"> </div>
</div>
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-5">
<button class="btn btn-warning performanceButton">Average case performance </button>
</div>
<div class="col-md-6"> </div>
</div>
The code is working well, but when I test it for small screen size by downsizing the browser it seems that the text in the second button expands out of the button.
Here is a screen capture of the issue.
Does anyone know how to solve this please ? Thank you in advance :)
You need to make your columns bigger for smaller screens, try this:
<div class="row">
<div class="col-md-1"></div>
<div class="col-sm-8 col-md-5">
<button class="btn btn-success performanceButton">Best case performance</button>
</div>
<div class="col-sm-3 col-md-6"> </div>
</div>
<div class="row">
<div class="col-sm-1 col-md-1"></div>
<div class="col-sm-8 col-md-5">
<button class="btn btn-warning performanceButton">Average case performance </button>
</div>
<div class="col-sm-3 col-md-6"> </div>
</div>
By giving min-width property to your button, it won't break.
button {
min-width: 200px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-5">
<button class="btn btn-success performanceButton">Best case performance</button>
</div>
<div class="col-md-6"> </div>
</div>
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-5">
<button class="btn btn-warning performanceButton">Average case performance </button>
</div>
<div class="col-md-6"> </div>
</div>
you can also make the text of button wrap instead of making button larger
just jive button a class like and in css
.wrapit{
width: 30px;
white-space: normal;
word-Wrap: break-word;
}
I have the following HTML and am wondering why there is a margin between my "equals" button and the neighbouring buttons (3 and .)
<div class="row">
<div class="col-md-9">
<div class="row">
<button class="col-md-4">1</button>
<button class="col-md-4">2</button>
<button class="col-md-4">3</button>
</div>
<div class="row">
<button class="col-md-8">0</button>
<button class="col-md-4">.</button>
</div>
</div>
<div class="col-md-3">
<button class="col-md-12" id="equal">=</button>
<br/>
</div>
</div>
screen shot of described margin
SOLUTION 1:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="row">
<div class="col-xs-9">
<div class="row">
<button class="col-xs-4">1</button>
<button class="col-xs-4">2</button>
<button class="col-xs-4">3</button>
</div>
<div class="row">
<button class="col-xs-8">0</button>
<button class="col-xs-4">.</button>
</div>
</div>
<button class="col-xs-1" id="equal">=</button>
<br/>
</div>
You are getting a gap because there is a padding of 15px for bootstrap columns. So I made a few changes to your code and removed the parent div wrapper for the button with = sign and added col-xs-1 class to it. You can add col-xs-3 if you wish.
Note that I have also changed all the classes from col-md- to col-xs- which is entirely optional. You can keep it md. I have added xs so that the result can be seen on the preview screen.
SOLUTION 2:
.equal-wrapper {
padding-left: 0 !important;
padding-right: 0 !important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="row">
<div class="col-xs-9">
<div class="row">
<button class="col-xs-4">1</button>
<button class="col-xs-4">2</button>
<button class="col-xs-4">3</button>
</div>
<div class="row">
<button class="col-xs-8">0</button>
<button class="col-xs-4">.</button>
</div>
</div>
<div class="col-xs-3 equal-wrapper">
<button class="col-xs-12" id="equal">=</button>
<br/>
</div>
</div>
Just put your button in a row, bootstrap columns have padding by default.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="row calculator">
<div class="col-md-9">
<div class="row">
<button class="col-md-4">1</button>
<button class="col-md-4">2</button>
<button class="col-md-4">3</button>
</div>
<div class="row">
<button class="col-md-8">0</button>
<button class="col-md-4">.</button>
</div>
</div>
<div class="col-md-3">
<div class="row">
<button class="col-md-12" id="equal">=</button>
</div>
</div>
</div>
Note: Check the above example in full screen mode.
HTML
Add a class calculator
<div class="row calculator">
<div class="col-md-9">
<div class="row">
<button class="col-md-4">1</button>
<button class="col-md-4">2</button>
<button class="col-md-4">3</button>
</div>
<div class="row">
<button class="col-md-8">0</button>
<button class="col-md-4">.</button>
</div>
</div>
<div class="col-md-3">
<button class="col-md-12" id="equal">=</button>
<br/>
</div>
</div>
CSS:
Remove Paddings.
.calculator .col-md-9{
padding-right:0;
}
.calculator .col-md-3{
padding-right:0;
}
You missed to wrap button tag in row class like below code
<div class="row">
<div class="col-md-9">
<div class="row">
<button class="col-md-4">1</button>
<button class="col-md-4">2</button>
<button class="col-md-4">3</button>
</div>
<div class="row">
<button class="col-md-8">0</button>
<button class="col-md-4">.</button>
</div>
</div>
<div class="col-md-3">
<div class="row">
<button class="col-md-12" id="equal">=</button>
<br/>
</div>
</div>
I am using bootstrap 3 and have a my data coming from a service. I am using ng-repeat to render the design,I need two buttons to appear in one row and if we are using mobile then one button in a row. The Buttons should be center on the screen as indicated below.
Button Text 1 Button Text 2
Button Tex 3 Button Text 4
This is my html code
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-sm-4 col-md-offset-2"><button type="button" class="btn btn-default btn-block">Here sits text 1</button></div>
<div class="col-sm-4"><button type="button" class="btn btn-default btn-block">Here sits text 2</button></div>
</div>
<div class="row">
<div class="col-sm-4 col-md-offset-2"><button type="button" class="btn btn-default btn-block">Here sits text 3</button></div>
<div class="col-sm-4">
<button type="button" class="btn btn-default btn-block" style="word-wrap: break-word;">Here sits text 4 </button></div>
</div>
</div>
How would I avoid using multiple rows in order to force two columns?
I am asking for that to make my ng-repeat just render some columns because, it would not work with this design?
Update For Question:
I have updated using the answer suggested below, its working now:
<div class="container">
<div class="row">
<div class="col-sm-4 col-md-offset-2 col-sm-offset-2 col-lg-offset-2 col-lg-4 col-md-4 col-sm-4 col-xs-12" style="text-align:center;">
<button type="button" class="btn btn-primary btn-block">Button text 1</button>
</div>
<div class="col-sm-4 col-lg-4 col-md-4 col-sm-4 col-xs-12" style="text-align:center;">
<button type="button" class="btn btn-primary btn-block">Button text 2</button>
</div>
<div class="col-sm-4 col-md-offset-2 col-sm-offset-2 col-lg-offset-2 col-lg-4 col-md-4 col-sm-4 col-xs-12" style="text-align:center;">
<button type="button" class="btn btn-primary btn-block">Button text 1</button>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12" style="text-align:center;">
<button type="button" class="btn btn-primary btn-block">Button text 4</button>
</div>
</div>
Is it possible to use the same styling for cols and and make it work (there are offsets on alternate cols.
I thinkyou should take a look at this: https://jsfiddle.net/2zu0oksc/
You can have a div with class row and many col-*
Setting the col-xs-12 to the div, you are saying taht in small devices it will take all the row width.
This is the code:
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12" style="text-align:center;">
<button type="button" class="btn btn-primary">Button text 1</button>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12" style="text-align:center;">
<button type="button" class="btn btn-primary">Button text 2</button>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12" style="text-align:center;">
<button type="button" class="btn btn-primary">Button text 3</button>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12" style="text-align:center;">
<button type="button" class="btn btn-primary">Button text 4</button>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-xs-8 col-xs-offset-2">
<div class="col-xs-2 col-xs-offset-4">
<button class="btn btn-primary">
Text 1
</button>
</div>
<div class="col-xs-2 col-xs-offset-1">
<button class="btn btn-primary">
Text 1
</button>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-8 col-xs-offset-2">
<div class="col-xs-2 col-xs-offset-4">
<button class="btn btn-primary">
Text 1
</button>
</div>
<div class="col-xs-2 col-xs-offset-1">
<button class="btn btn-primary">
Text 1
</button>
</div>
</div>
</div>
</div>
https://jsfiddle.net/wuy235f9/
This works but you'll have to adjust the offset and col size you want for it!