A button is created for each question from the database, when clicked, only one answer should be opened. But instead, when you click on any of the buttons, all answers open.
So far I've tried to change "collapse" to "${question.id}", but it seems to me that it doesn't work this way.
<div class="card-columns">
<#list questions as question>
<div class="card border-light mb-3 bg-card">
<div class="m-2">
<p>
<button class="btn btn-info" type="button"
data-toggle="collapse"
data-target="#collapse"
aria-expanded="false"
aria-controls="collapse">
${question.question}
</button>
</p>
</div>
<div class="m-2">
<div class="collapse" id="collapse">
<div class="card card-body border-info">
${question.answer}
</div>
</div>
</div>
<#else>
There is no questions.
</#list>
</div>
</div>
You need to change "collapse" to $question.id in 2 line:
<button ... data-target="#collapse"
and
<div ... id="collapse">(id not class).
I dont familiar with freemarker, so cant provide full fix.
I have a bootstrap grid that contain an expand component.
My actual problem is that when I expand one column, the other columns get shifted because they are in the same row.
I would like to know How can I make column independs each one to another
expand component
<p>
<button type="button" class="btn btn-outline-primary" (click)="isCollapsed = !isCollapsed"
[attr.aria-expanded]="!isCollapsed" aria-controls="collapseExample">
Toggle
</button>
</p>
<div id="collapseExample" [ngbCollapse]="isCollapsed">
<div >
<div class="">
You can collapse this card by clicking Toggle
</div>
</div>
</div>
app component ( container )
<div class="row">
<div *ngFor="let card of cards; let index=index" class="col-4 col-sm-4 col-xl-4">
<app-expend></app-expend>
</div>
</div>
Here's what is happening
Here's what I expect
Here's an example to illustrate my actual problem
Is accordion what you need? Check this example,
https://getbootstrap.com/docs/4.0/components/collapse/#accordion-example
I have three toggle "Image Buttons" within a button group on my HTML page
Initially all three buttons will show the black and white versions of their associated images.
When the user clicks on a particular image button, I want to display a colour version of the associated image.
Only one of the buttons should display a colour image at any one time.
If the user subsequently clicks on a different image button
The first image button clicked must reset its image back to the black and white version and the newly clicked on image button must display its colour image.
Heres as far as I have got displaying my three image buttons
<div class="container text-center">
<div class="row">
<div class="btn-group" data-toggle="buttons">
<div class="col-md-4">
<button class="btn btn-default">
<img id="riddler-img" src="images/2754.png" />
<img id="unhappy-img" src="images/1f621.png" class="hidden"/>
</button>
</div>
<div class="col-md-4">
<button class="btn btn-default">
<img id="riddler-img" src="images/2754.png" />
<img id="neutral-img" src="images/1f610.png" class="hidden"/>
</button>
</div>
<div class="col-md-4">
<button class="btn btn-default">
<img id="riddler-img" src="images/2754.png" />
<img id="happy-img" src="images/1f600.png" class="hidden" />
</button>
</div>
</div>
</div>
</div>
Is it possible to achieve the desired effect without employing javascript?
I am building a responsive calendar that has full-width buttons on it (events), and it shows extra info with the collapse component under it. But the button keeps appearing superimposed so it doesn't display the info correctly...
This is one of my event buttons:
<!--Event 1-->
<div class="div-event col-md-6">
<span class="date-event col-xs-2 col-md-1"><span class="num-date-event">22</span><br>SEP</span>
<button class="btn btn-event btn-block col-xs-8 col-md-4" type="button" data-toggle="collapse" data-target="#collapse-1" aria-expanded="false" aria-controls="collapse-1">Kate's Super Party<br>at her house</button>
<span class="glyphicon glyphicon-gift icon-event col-xs-2 col-md-1" aria-hidden="true"><span class="text-event"><br>PARTY</span></span>
<div class="collapse" id="collapse-1">
<div class="well">
Hi, I'm a collapsable well that shows something but I can't be seen because of the weird css I have!
</div>
</div>
<div class="clearfix"></div>
</div>
I have tried using margin-top and position but it hasn't worked.
Is there a way to "separate" the collapse from the parent row? Or any other way to do it?
Here is the full calendar: https://jsfiddle.net/mrndrmrj/16/
In following span add margin-bottom:10px
<span class="glyphicon glyphicon-gift icon-event col-xs-2 col-md-1" aria-hidden="true"><span class="text-event"><br>PARTY</span></span>
Well, I found that the problem was grouping the event with the collapsable "well", so putting the well outside the div-event made it work!
This is one of the events corrected:
<!--Event 1-->
<div class="div-event">
<span class="date-event col-xs-2 col-md-2"><span class="num-date-event">22</span><br>SEP</span>
<button class="btn btn-event btn-block col-xs-8 col-md-8" type="button" data-toggle="collapse" data-target="#collapse-1" aria-expanded="false" aria-controls="collapse-1">Kate's Super Party<br>at her house</button>
<span class="glyphicon glyphicon-gift icon-event col-xs-2 col-md-2" aria-hidden="true"><span class="text-event"><br>PARTY</span></span>
<div class="clearfix"></div>
</div>
<div class="collapse" id="collapse-1">
<div class="well">
Hi, I'm a collapsable well that shows something and now I can be seen, but not the last two guys.
</div>
</div>
And this is the updated fiddle with the first two events corrected and the last two wrong so you can see the difference...
https://jsfiddle.net/mrndrmrj/20/
I am building a form in Twitter Bootstrap but I'm having issues with centering the button below the input in the form. I have already tried applying the center-block class to the button but that didn't work. How should I fix this?
Here is my code.
<!-- Button -->
<div class="form-group">
<label class="col-md-4 control-label" for="singlebutton"></label>
<div class="col-md-4">
<button id="singlebutton" name="singlebutton" class="btn btn-primary center-block">
Next Step!
</button>
</div>
</div>
Wrap the Button in div with "text-center" class.
Just change this:
<!-- wrong -->
<div class="col-md-4 center-block">
<button id="singlebutton" name="singlebutton" class="btn btn-primary center-block">Next Step!</button>
</div>
To this:
<!-- correct -->
<div class="col-md-4 text-center">
<button id="singlebutton" name="singlebutton" class="btn btn-primary">Next Step!</button>
</div>
Edit
As of BootstrapV4, center-block was dropped #19102 in favor of m-*-auto
According to the Twitter Bootstrap documentation: http://getbootstrap.com/css/#helper-classes-center
<!-- Button -->
<div class="form-group">
<label class="col-md-4 control-label" for="singlebutton"></label>
<div class="col-md-4 center-block">
<button id="singlebutton" name="singlebutton" class="btn btn-primary center-block">
Next Step!
</button>
</div>
</div>
All the class center-block does is to tell the element to have a margin of 0 auto, the auto being the left/right margins. However, unless the class text-center or css text-align:center; is set on the parent, the element does not know the point to work out this auto calculation from so will not center itself as anticipated.
See an example of the code above here: https://jsfiddle.net/Seany84/2j9pxt1z/
<div class="row">
<div class="col-sm-12">
<div class="text-center">
<button class="btn btn-primary" id="singlebutton"> Next Step!</button>
</div>
</div>
</div>
add to your style:
display: table;
margin: 0 auto;
<div class="container-fluid">
<div class="col-sm-12 text-center">
<button class="btn btn-primary" title="Submit"></button>
<button class="btn btn-warning" title="Cancel"></button>
</div>
</div>
You can do it by giving margin or by positioning those elements absolutely.
For example
.button{
margin:0px auto; //it will center them
}
0px will be from top and bottom and auto will be from left and right.
I tried the following code and it worked for me.
<button class="btn btn-default center-block" type="submit">Button</button>
The button control is in a div and using center-block class of bootstrap helped me to align the button to the center of div
Check the link where you will find the center-block class
http://getbootstrap.com/css/#helper-classes-center
use text-align: center css property
Update for Bootstrap 4:
Wrap the button with a div set with the 'd-flex' and 'justify-content-center' utility classes to take advantage of flexbox.
<!-- Button -->
<div class="form-group">
<div class="d-flex justify-content-center">
<button id="singlebutton" name="singlebutton" class="btn btn-primary">
Next Step!
</button>
</div>
</div>
The benefit of using flexbox is being able to add additional elements/buttons on the same axis, but with their own separate alignment. It also opens up the possibility of vertical alignment with the 'align-items-start/center/end' classes, too.
You could wrap the label and button with another div to keep them aligned with each other.
e.g. https://codepen.io/anon/pen/BJoeRY?editors=1000
You can do the following. It also avoids buttons overlapping.
<div class="center-block" style="max-width:400px">
Accept
Reject
</div>
It works for me
try to make an independent <div>then put the button into that.
just like this :
<div id="contactBtn">
<button type="submit" class="btn btn-primary ">Send</button>
</div>
Then Go to to your CSSStyle page and do the Text-align:center like this :
#contactBtn{text-align: center;}
For Bootstrap 3
we divide the space with the columns, we use 8 small columns (col-xs-8), we leave 4 empty columns (col-xs-offset-4) and we apply the property (center-block)
<!--Footer-->
<div class="modal-footer">
<div class="col-xs-8 col-xs-offset-4 center-block">
<button type="submit" class="btn btn-primary">Enviar</button>
<button type="button" class="btn btn-danger" data-dismiss="modal">Cerrar</button>
</div>
</div>
For Bootstrap 4
We use Spacing, Bootstrap includes a wide range of abbreviated and padded response margin utility classes to modify the appearance of an element.
The classes are named using the format {property}{sides}-{size} for xs and {property}{sides}-{breakpoint}-{size} for sm, md, lg, and xl.
more info here: https://getbootstrap.com/docs/4.1/utilities/spacing/
<!--Footer-->
<div class="modal-footer">
<button type="submit" class="btn btn-primary ml-auto">Enviar</button>
<button type="button" class="btn btn-danger mr-auto" data-dismiss="modal">Cerrar</button>
</div>
I had this problem. I used
<div class = "col-xs-8 text-center">
On my div containing a few h3 lines, a couple h4 lines and a Bootstrap button.
Everything besides the button jumped to the center after I used text-center so I went into my CSS sheet overriding Bootstrap and gave the button a
margin: auto;
which seems to have solved the problem.
or you can give specific offsets to make button position where you want simply with bootstrap grid system,
<div class="col-md-offset-4 col-md-2 col-md-offset-5">
<input type="submit" class="btn btn-block" value="submit"/>
this way, also let you specify button size if you set btn-block.
sure, this will only work md size range, if you want to set other sizes too, use xs,sm,lg.