any advice how to select first and last child of Bootstrap collapse module? I need to select ".accordion-heading" first and last..
<div id="accordion2" class="accordion">
<div class="accordion-group">
<div class="accordion-heading"><a class="accordion-toggle" href="#collapseOne" data-toggle="collapse" data-parent="#accordion2"><br />
Toggle Accordion 1<br />
</a></div>
<div id="collapseOne" class="accordion-body in collapse" style="height: auto;">
<div class="accordion-inner">
<p>Content 1</p>
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading"><a class="accordion-toggle" href="#collapseTwo" data-toggle="collapse" data-parent="#accordion2"><br />
Toggle Accordion 2<br />
</a></div>
<div id="collapseTwo" class="accordion-body collapse" style="height: 0px;">
<div class="accordion-inner">
<p>Content 2</p>
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading"><a class="accordion-toggle" href="#collapseThree" data-toggle="collapse" data-parent="#accordion2"><br />
Toggle Accordion 3<br />
</a></div>
<div id="collapseThree" class="accordion-body collapse" style="height: 0px;">
<div class="accordion-inner">
<p>Content 3</p>
</div>
</div>
</div>
http://jsfiddle.net/PzB8D/1/
You must go to accordion-group first, then refer to accordion-heading There's gonna be the only one element with class accordion-heading:)
.accordion-group:first-child .accordion-heading a{color: #f00;}
.accordion-group:last-child .accordion-heading a{color: #0f0;}
Related
so basically im doing this in angular and using bootstrap
I want the name and description on the left and img on the right but it isn't working , pls help
code link is below
here
<div class="row">
<div class="col-xs-12">
<button class='btn btn-success'>New bug</button>
</div>
</div>
<hr>
<div class="row">
<div class="col-xs-12">
<a href="#" class="list-group-item clearfix"
style="background:grey ; color:red;"
*ngFor="let bug of bugs">
<div class="pull-left">
<h4 class="list-group-item-headin">name</h4>
<p class="list-group-item-text">description</p>
<span class="list-group-item-text">type</span>
<span class="list-group-item-text">status</span>
<span class="list-group-item-text">priority</span> </div>
<div class="pull-right">
<img src="https://upload.wikimedia.org/wikipedia/commons/3/3f/Dead-Bug_43215-480x360_%285000576310%29.jpg"
alt="{{bug.name}}"
class="img-responsive"
style="max-height: 100px;">
</div>
</a>
<app-bugs-item></app-bugs-item>
</div>
</div>
I'm guessing you want the text to wrap around the image. If that is the case then only put the float class on the image, and reorder the image to above the text.
<div class="container">
<div class="row">
<div class="col-xs-12">
<button class="btn btn-success">New bug</button>
</div>
</div>
<hr />
<div class="row">
<div class="col-xs-12">
<a href="#" class="list-group-item clearfix" style="background: grey; color: red" *ngFor="let bug of bugs">
<div class="float-right">
<img src="https://upload.wikimedia.org/wikipedia/commons/3/3f/Dead-Bug_43215-480x360_%285000576310%29.jpg" alt="{{bug.name}}" class="img-responsive" style="max-height: 100px" />
</div>
<h4 class="list-group-item-headin">name</h4>
<p class="list-group-item-text">description</p>
<span class="list-group-item-text">type</span>
<span class="list-group-item-text">status</span>
<span class="list-group-item-text">priority</span>
</a>
<app-bugs-item></app-bugs-item>
</div>
</div>
</div>
If you want the text and image to be in 2 columns I would suggest using flexbox
<div class="container">
<div class="row">
<div class="col-xs-12">
<button class="btn btn-success">New bug</button>
</div>
</div>
<hr />
<div class="row">
<div class="col-xs-12">
<a href="#" class="list-group-item d-flex justify-content-between" style="background: grey; color: red" *ngFor="let bug of bugs">
<div>
<h4 class="list-group-item-headin">name</h4>
<p class="list-group-item-text">description</p>
<span class="list-group-item-text">type</span>
<span class="list-group-item-text">status</span>
<span class="list-group-item-text">priority</span>
</div>
<div>
<img src="https://upload.wikimedia.org/wikipedia/commons/3/3f/Dead-Bug_43215-480x360_%285000576310%29.jpg" alt="{{bug.name}}" class="img-responsive" style="max-height: 100px" />
</div>
</a>
<app-bugs-item></app-bugs-item>
</div>
</div>
</div>
I am showing my div in column. Issue is i need to center my text
MY code
<div class="card mb-4">
<div class="card-header">
<div class="card-title-wrap bar-info">
<div class="card-title">Personal Information</div>
</div>
</div>
<div class="card-body">
<div class="card-block">
<div class="align-self-center halfway-fab text-center">
<a class="profile-image">
<img src="assets/img/portrait/medium/avatar-m-9.jpg"
class="rounded-circle img-border gradient-summer width-100" alt="Card image">
</a>
</div>
<div class="text-center">
<span class="font-medium-2 text-uppercase">{{selectedPatient?.patientName}}</span>
<p class="grey font-small-2"></p>
</div>
<div class="row align-self-center">
<div class="col-12 col-sm-6">
<ul class="no-list-style pl-0 text-center">
<li class="mb-2">
<div class="d-flex align-items-center">
<div class="d-inline-block">
<span class="text-bold-500 primary"><a><i class="ft-briefcase font-small-3"></i>
ID: </a></span>
</div>
<div class="d-inline-block">
<span class="">
<span class="display-block overflow-hidden">
{{selectedPatient?.mrn}}</span>
</span>
</div>
</div>
</li>
</ul>
</div>
<div class="col-12 col-sm-6">
<ul class="no-list-style pl-0 text-center">
<li class="mb-2">
<div class="d-flex align-items-center">
<div class="d-inline-block">
<span class="text-bold-500 primary"><a><i class="ft-briefcase font-small-3"></i>
Age:</a></span>
</div>
<div class="d-inline-block">
<span class="">
<span
class="display-block overflow-hidden"> {{selectedPatient?.age}}</span>
</span>
</div>
</div>
</li>
<li class="mb-2">
</ul>
</div>
</div>
</div>
</div>
</div>
Its look like this right now
I need to center the ID and AGE Text in center of my card. They are showing on left right now i need to show them in middle to the center. I try to give the text-align center but its not come in a center
.centered {
width: 100%;
display: flex;
justify-content: center;
}
place your items within that div containg that class.
Try this one. I removed some extra html code which making no sense.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<div class="card mb-4">
<div class="card-header">
<div class="card-title-wrap bar-info">
<div class="card-title">Personal Information</div>
</div>
</div>
<div class="card-body">
<div class="card-block">
<div class="align-self-center halfway-fab text-center">
<a class="profile-image">
<img src="assets/img/portrait/medium/avatar-m-9.jpg"
class="rounded-circle img-border gradient-summer width-100" alt="Card image">
</a>
</div>
<div class="text-center">
<span class="font-medium-2 text-uppercase">{{selectedPatient?.patientName}}</span>
</div>
<div class="row align-self-center justify-content-center">
<div class="p-2 ">
<span class="text-primary font-weight-bold">ID:</span>
<span>{{selectedPatient?.mrn}}</span>
</div>
<div class="p-2 ">
<span class="text-primary font-weight-bold">Age:</span>
<span>{{selectedPatient?.age}}</span>
</div>
</div>
</div>
</div>
</div>
I am trying to make 4 pictures, when clicked on, open collapsable div. I got that part, but the problem is that when I click on the second picture the content from the first image are still visible. They would need to hide
I have tried the solutions from here and from all over of internet, but with no success.
jsfiddle: https://jsfiddle.net/pqhz5jLa/
<div class="row">
<div class="col" role="button" data-toggle="collapse" data-target="#collapseExample1" aria-expanded="false" aria-controls="collapseExample">
<img src="https://upload.wikimedia.org/wikipedia/commons/7/71/Black.png" width="100%">
</div>
<div class="col" role="button" data-toggle="collapse" data-target="#collapseExample2" aria-expanded="false" aria-controls="collapseExample">
<img src="https://upload.wikimedia.org/wikipedia/commons/7/71/Black.png" width="100%">
</div>
<div class="col" role="button" data-toggle="collapse" data-target="#collapseExample3" aria-expanded="false" aria-controls="collapseExample">
<img src="https://upload.wikimedia.org/wikipedia/commons/7/71/Black.png" width="100%" >
</div>
<div class="col" role="button" data-toggle="collapse" data-target="#collapseExample4" aria-expanded="false" aria-controls="collapseExample">
<img src="https://upload.wikimedia.org/wikipedia/commons/7/71/Black.png" width="100%" >
</div>
</div>
<br>
<div class="collapse" id="collapseExample1" >
<div class="card card-body">
1
</div>
</div>
<div class="collapse" id="collapseExample2">
<div class="card card-body">
2
</div>
</div>
<div class="collapse" id="collapseExample3">
<div class="card card-body">
3
</div>
</div>
<div class="collapse" id="collapseExample4">
<div class="card card-body">
4
</div>
</div>
Thank you
You can fix this problem with using javascript. First of all I would give each collapsible div a own class
<div class="collapse collapseExample1" id="collapseExample1" >
<div class="card card-body">
1
</div>
</div>
<div class="collapse collapseExample2" id="collapseExample2">
<div class="card card-body">
2
</div>
</div>
<div class="collapse collapseExample3" id="collapseExample3">
<div class="card card-body">
3
</div>
</div>
<div class="collapse collapseExample4" id="collapseExample4">
<div class="card card-body">
4
</div>
</div>
and then this js should fix the problem.
$(document).ready(function(){
$(".collapseExample1").on('show.bs.collapse', function(){
$(".collapseExample2").collapse("hide");
$(".collapseExample3").collapse("hide");
$(".collapseExample4").collapse("hide");
});
$(".collapseExample2").on('show.bs.collapse', function(){
$(".collapseExample1").collapse("hide");
$(".collapseExample3").collapse("hide");
$(".collapseExample4").collapse("hide");
});
$(".collapseExample3").on('show.bs.collapse', function(){
$(".collapseExample1").collapse("hide");
$(".collapseExample2").collapse("hide");
$(".collapseExample4").collapse("hide");
});
$(".collapseExample4").on('show.bs.collapse', function(){
$(".collapseExample1").collapse("hide");
$(".collapseExample2").collapse("hide");
$(".collapseExample3").collapse("hide");
});
});
I'm using Bootstrap 2.3.2 for a website which contains an accordion element with one row within it. Accordion is span6 and I expected that the row will be able to contain two span3 elements but it can't. Here is my code simplified:
<div class="span6">
<div class="accordion" id="accordion2">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
<p><h3>Some text here</h3></p>
</a>
</div>
<div id="collapseOne" class="accordion-body collapse">
<div class="accordion-inner">
<div class="row">
<br />
<div class="span3 offer">
<div class="offer-wrap">
This one should be on the left
</div>
</div>
<div class="span3 offer">
<div class="offer-wrap">
This one should be on the right, but is BELOW
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I was able to make them appear next to each other, but only with some nasty CSS fiddling, which only works on my screen size.
Expected behaviour: http://imgur.com/O1z4mZN
Actual result: http://imgur.com/fP568Tl
If I put that row outside of accordion element everything looks perfect.
This has to do with the margins of both the accordion and the .span classes.
My tip: never use the .row class, always use the .row-fluid class. With .row-fluid, you can always split up the available width into 12 columns.
<div class="span6">
<div class="accordion" id="accordion2">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
<p><h3>Some text here</h3></p>
</a>
</div>
<div id="collapseOne" class="accordion-body collapse">
<div class="accordion-inner">
<br />
<div class="row-fluid">
<div class="span6 offer">
<div class="offer-wrap">
This one should be on the left
</div>
</div>
<div class="span6 offer">
<div class="offer-wrap">
This one should be on the right, but is BELOW
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Sorry but another bootstrap question, but after 1 1/2 days battling this, I hoped that maybe someone can help me with this.
I have an asp.net 4.5 web form with a bootstrap menu, tabs (they work great!)
During a mobile view I wanted to display an accordion instead of the tabs.
I created a new section and followed the code in bootstraps example, and cannot get it to toggle. When I click on a link nothing happens.
I changed one of the accordion sections to accordion-body collapse in, so that one would section would be open, hoping maybe it would work them.
No luck. It is open when first opening, but once you click on another accordion header, the open one closes and nothing will open.
<section class="hidden-desktop visible-tablet visible-phone">
<div id="accordion2" class="accordion">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#acServ">Services
</a>
</div>
<div id="acServ" class="accordion-body collapse in">
<div class="accordion-inner">
<div>
Services
</div>
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#acSched">Scheduling
</a>
</div>
<div id="acSched" class="accordion-body collapse">
<div class="accordion-inner">
<div>
Scheduling
</div>
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#acClient">Clients
</a>
</div>
<div id="acClient" class="accordion-body collapse">
<div class="accordion-inner">
<div>
Clients
</div>
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#acForm">Formulas
</a>
</div>
<div id="acForm" class="accordion-body collapse">
<div class="accordion-inner">
<div>
Formulas
</div>
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#acProd">Products
</a>
</div>
<div id="acProd" class="accordion-body collapse">
<div class="accordion-inner">
<div>
Products
</div>
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#acAbout">About
</a>
</div>
<div id="acAbout" class="accordion-body collapse">
<div class="accordion-inner">
<div>
About
</div>
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#acStart">Get Started
</a>
</div>
<div id="acStart" class="accordion-body collapse">
<div class="accordion-inner">
<div>
Get Started
</div>
</div>
</div>
</div>
</div>
</section>
Anyone have any ideas of what is going on?
Oh yes, the scripts are ordered like...
<script src="Scripts/jquery-1.9.1.min.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
<script src="Scripts/bootstrap-collapse.js"></script>
<script src="Scripts/bootstrap-transition.js"></script>
and the css is like...
<link href="Content/bootstrap.css" rel="stylesheet" />
<link href="Content/bootstrap-responsive.min.css" rel="stylesheet" />
<link href="Content/Site.css" rel="stylesheet" />
Site.css is some simple changes, (i.e. Colors) I made to bootstrap.css tabs.