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
Related
I'm running into a similar issue as this question, in that I need the data-toggle option on a button to take two parameters.
I'm making a multi-card collapse with radio buttons. I.e., we have three options. When an option is selected, any open cards are collapsed, and the selected card is un-collapsed. What I'd also like is the selected button to stay selected.
<button href="#option1" class="btn btn-outline-primary" data-toggle="collapse">Option 1</button>
<button href="#option2" class="btn btn-outline-primary" data-toggle="collapse">Option 2</button>
<button href="#option3" class="btn btn-outline-primary" data-toggle="collapse">Option 3</button>
<div id="parent">
<div id="option1" class="collapse panel" data-parent="#parent">
<div class="card card-body">
Details of option 1
</div>
</div>
<div id="option2" class="collapse panel" data-parent="#parent">
<div class="card card-body">
Details of option 2
</div>
</div>
<div id="option3" class="collapse panel" data-parent="#parent">
<div class="card card-body">
Details of option 3
</div>
</div>
</div>
The trouble is, you can only specify one option to data-toggle, so when the buttons are clicked at the moment, they don't go into their active state, which would happen if I could specify something like data-toggle="collapse button"
Unfortunately, all the searching I've done for two data toggle parameters only leads to people asking about adding tooltips to buttons. Is there any way in bootstrap of changing the button's state while also using it to collapse elements?
Hi guys using bootstrap and struggling to understand how to get a my main div box to have other divs inside of it
For example i am trying to make this:
This big box is just a div.
What i got so far:
<div class="container">
<div class="MainBox">
<div class="Leftbox">
<h3>Box</h3>
<div class="btn-group-vertical">
<button type="button" class="btn btn-primary btn-responsive">P</button>
<button type="button" class="btn btn-success btn-responsive">B</button>
<button type="button" class="btn btn-success btn-responsive">L</button>
<button type="button" class="btn btn-success btn-responsive">R</button>
<button type="button" class="btn btn-success btn-responsive">T</button>
<button type="button" class="btn btn-success btn-responsive">F</button>
</div>
</div>
<div class="CentreBox">
</div>
</div>
</div>
I am not so sure how to do the boxes on the right hand side , i have tried different methods but it mucks up the whole div. Any help would be great. Thanks xx
You really want to look into Bootstraps grid system, as suggested by #Sringland in his comments, found here: Bootstrap Docs
The grid system creates 12 columns on any screen size (from xtra small - large), and can be defined as a class by col-(screensize)-(span). For example - if you want 12 columns spanning a large sized screen add the class: col-lg-12 to your div.
These columns are "embeddable", and will create a new 12-column layout inside one another. So if you want to split up an 8 column layout into two equal sized containers within it, it would like like this:
<div class="col-md-8">
<div class="col-md-6"> </div>
<div class="col-md-6"> </div>
</div>
So remember, each time you "open" a column regardless of its size, that container will have another 12 columns to work with.
After all this is said, your layout will look something like this:
<div class="row height-500px">
<div class="container">
<div class="col-md-3 border height-500px">
<!-- Content goes here -->
</div>
<div class="col-md-7 border height-500px">
<!-- CONTENT GOES HERE -->
</div>
<div class="col-md-2 height-500px">
<div class="col-md-12 height-125px border">
<!-- Content goes here -->
</div>
<div class="col-md-12 height-125px border">
<!-- Content goes here -->
</div>
<div class="col-md-12 height-125px border">
<!-- Content goes here -->
</div>
<div class="col-md-12 height-125px border">
<!-- Content goes here -->
</div>
</div>
</div>
</div>
Here is a link to a Bootply to see it in action. Please see the bootply for a better understanding of the height classes and border classes. I created these simply to represent your layout.
Now, gutters (the space between the columns) are not working as intended, and I hope someone help there. But, hopefully this will be a good starting point for you.
Jus try using bootstrap grid system. I used buttons for the right column, but you can use whatever you need.
<div class="container MainBox border-on">
<div class="col-md-2 left border-on">
<h3>Box</h3>
<div class="btn-group-vertical">
<button type="button" class="btn btn-primary btn-responsive">P</button>
<button type="button" class="btn btn-success btn-responsive">B</button>
<button type="button" class="btn btn-success btn-responsive">L</button>
<button type="button" class="btn btn-success btn-responsive">R</button>
<button type="button" class="btn btn-success btn-responsive">T</button>
<button type="button" class="btn btn-success btn-responsive">F</button>
</div>
</div>
<div class="col-md-8 CentreBox border-on">
<h3>
center
</h3>
</div>
<div class="col-md-2 right border-on">
<h3>
right
</h3>
<div class="col-md-12">
One
</div>
<div class="col-md-12">
Two
</div>
<div class="col-md-12">
Three
</div>
<div class="col-md-12">
Four
</div>
</div>
</div>
I am learning how to use Twitter Bootstrap. I need to put two buttons in one row, one in the centre and the other to the right. The buttons are in the right positions column wise but they are in different rows.
Could anyone assist me with fixing my code below to get the two buttons on the same row?
<div class="row">
<div class="col-sm-6">
<p class="lead pull-right"><button class="btn btn-default ">Edit Button left</button></p>
</div>
<div class="col-sm-6 col-sm-offset-6">
<button class="btn btn-default lead pull-right ">Edit Button Right</button>
</div>
</div>
The problem is that on your second div class you use col-sm-offset-6. Delete this and it should align on the same row.
Using offset will give you a left margin of 6 columns, and since your first div already use 6 columns, there arent enough columns on the same row.
I agree with the above answer, here is the code from bootstrap page which has some fairly clear examples: http://getbootstrap.com/css/
<div class="col-sm-9">
<div class="row">
<div class="col-xs-8 col-sm-6">
<p class="lead pull-right"><button class="btn btn-default ">Edit Button left</button></p>
</div>
<div class="col-xs-4 col-sm-6">
<p class="lead pull-right"><button class="btn btn-default ">Edit Button Right</button></p>
</div>
</div>
It does leave a space between the buttons, I don't know if you want that there or not.
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/
Using bootstrap 3's grid system I am trying to do the following -
|button1 button2| max horizontal space |button3|
or in html terms
|button1 button2 float:left| |button3 float:right|
I have created the above using bootstrap's column offset for the middle horizontal space - fiddle.
<div class="row">
<div class="col-md-3">
<button class="btn btn-default">Join</button>
<button class="btn btn-default">Leave</button>
</div>
<div class="col-md-offset-7 col-md-2 text-right">
<button class="btn btn-default">Start</button>
</div>
</div>
When resizing the offset acts as a block that forces the movement of other items. Is there a way to do this using bootstrap grid that acts in the traditional float behaviour?
I am not sure what you want but I can suggest you to use pull-right for the buttons to be on the right hand side:
<div class="container">
<button class="btn btn-default">Join</button>
<button class="btn btn-default">Leave</button>
<button class="btn btn-default pull-right">Start</button>
</div>
http://www.bootply.com/GpKoFcNvII is the link for a working example.