Boot Strap Accordian Not collapsing - html

Hi y'all I'm trying to replicate a collapsing accordian example I found on https://getbootstrap.com/docs/4.1/components/collapse/ but for some reason they are not collapsing. In fact they start in the uncollapsed position which I think is strange because in the exmaple they start collapsed and then on the button click they collapse open. Anyways here is my code, I hope someone out there can help because I can't figure this out.
FINAL UPDATE: for any googlers that stumble upon this Here is the code that worked for me. Notice that the data-target => attr.data-target is the only way to use text binding with the data-target
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<div class="accordion" id="accordionExample">
<div class="card" *ngFor="let grocery of groceryList;index as index">
<div class="card-header" id="grocery1{{index}}">
<h5 class="mb-0">
<button class="btn btn-link" type="button" data-toggle="collapse" attr.data-target="#grocery2{{index}}" aria-expanded="true" aria-controls="grocery2{{index}}">
{{grocery.recipeName}}
</button>
</h5>
</div>
<div id="grocery2{{index}}" class="collapse show" aria-labelledby="grocery1{{index}}" data-parent="#accordionExample">
<div class="card-body">
<ul class="list-group" id="filterList">
<li class="list-group-item">
<span class="glyphicon glyphicon-chevron-down"></span>
<ul id="subgroup" class="list-group">
<li class="list-group-item" *ngFor="let ingredient of grocery.ingredients">{{ingredient}}</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>

So following you will find the list of problem you had:
ID are similar from header and child
Missing double quote
Simulation did not worked here because of the "." in the id that are breaking the ID
PS: Based on your code your code, the problem is that actualy you have a conflic between Bootstrap and another tool, because it does not show the arial-controls.
Please find a snippet demo working below:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<div class="accordion" id="accordionExample">
<div class="card" *ngFor="let grocery of groceryList">
<div class="card-header" id="grocery1">
<h5 class="mb-0">
<button class="btn btn-link" type="button" data-toggle="collapse" data-target="#grocery2" aria-expanded="true" aria-controls="grocery2">
{{grocery.recipeName}}
</button>
</h5>
</div>
<div id="grocery2" class="collapse show" aria-labelledby="grocery1" data-parent="#accordionExample">
<div class="card-body">
<ul class="list-group" id="filterList">
<li class="list-group-item">
<span class="glyphicon glyphicon-chevron-down"></span>
<ul id="subgroup" class="list-group">
<li class="list-group-item" *ngFor="let ingredient of grocery.ingredients">{{ingredient}}</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
It seems that Angular and Bootstrap accordion/collapse are no so friendly based on the different subject on stack overflow:
Bootstrap collapse menu doesn't work with angular
Angular 4: Bootstrap's collapse does not work using data-target attribute
angular-bootstrap accordion won't open

Related

Bootstrap data-target/aria-controls not triggering the id element

I have added multiple elements to show and hide information on my HTML website code. Buttons, nav-tabs and modals are created correctly, but when I press on the triggering element, the related information doesn't show on. I have even copied the exact same code from the Boostrap documentation, but it isn't working at all. Can someone tell me what am I doing wrong? Thanks.
<ul class="nav nav-tab" id="tablaTabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="compara-tab" data-toggle="tab" href="#compara" role="tab" aria-controls="compara"aria-selected="true">Comparador</a> </li>
<li class="nav-item">
<a class="nav-link" id="pagos-tab" data-toggle="tab" href="#pagos" role="tab" aria-controls="pagos" aria-selected="false">Pagos</a> </li>
<li class="nav-item">
<a class="nav-link" id="valor-tab" data-toggle="tab" href="#valor" role="tab" aria-controls="valor" aria-selected="false">Valoraciones</a> </li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="compara" role="tabpanel" aria-labelledby="compara-tab">
<div class="table-responsive">
<table class="table">
<thead class="thead-light">
<th>Núm pax (precio por día)</th>
</thead>
<tbody>
<tr><td>1 persona <span class="oi oi-person" style="padding-left: 7px;"></span></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="tab-pane fade" id="pagos" role="tabpanel" aria-labelledby="pagos-tab">
</div>
<div class="tab-pane fade" id="valor" role="tabpanel" aria-labelledby="valor-tab">
Ratings
</div>
</div>
</div>
Apart on another file:
<div class="modal fade" id="contacto" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Contact</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="recipient-name" class="col-form-label">Email:</label>
<input type="text" class="form-control" id="recipient-name">
</div>
<div class="form-group">
<label for="message-text" class="col-form-label">Mensaje:</label>
<textarea class="form-control" id="message-text"></textarea>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-succes">Send</button>
</div>
</div>
</div>
</div>
<!-- I obviously have the library imports -->
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css"
integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="node_modules/jquery/dist/jquery.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="node_modules/popper.js/dist/popper.min.js"
integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
crossorigin="anonymous"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"
integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s"
crossorigin="anonymous"></script>
Have you provided correct paths to all the css and javascript files?
Does your javascript files have errors in the code? If there is an error it may block the javascript that follows from running correctly.
I have recreated your code and it works, but i have added the css and the js files from a CDN:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
I already solve it. The code had no errors. I jus changed the script and now I use
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="node_modules/popper.js/dist/umd/popper.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
and it seems to work fine. I had the css references up in the head part but I assumed it was not a problem with that.

Bootstrap 4 input drop-down-list. How?

Below is a sample of a button dropdown I've customized with material icons and the google roboto mono font which is great for spacing. My question is how can I get an input to behave in the same manner?
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- GOOGLE FONT CSS - Roboto Mono -->
<link href="https://fonts.googleapis.com/css?family=Roboto+Mono:100,300,400,500,700&display=swap" rel="stylesheet">
<!-- GOOGLE FONT CSS - Material Icons -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<!-- FORM-ROW -->
<div class="form-row mb-2">
<!-- ROW > COLUMN -->
<div class="col">
<!-- <label for="dropDown1" class="small my-0">DROPDOWN 1</label> -->
<!-- DROPDOWN -->
<div class="dropdown">
<!-- BUTTON -->
<button class="btn btn-outline-dark btn-block rounded-0" type="button" id="dropDown1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<div class="d-flex justify-content-start align-items-center">
<i class="material-icons md-24 mr-2">double_arrow</i>
<span class="mr-auto" id="dropDownClockProjectText">DROPDOWN 1</span>
<i class="material-icons md-24">expand_more</i>
</div>
</button>
<!-- DROPDOWN > MENU -->
<div class="dropdown-menu dropdown-menu-right dropdown-menu-scrollable w-100 rounded-0" aria-labelledby="dropDown1">
<!-- MENU - HEADER -->
<!-- <h6 class="dropdown-header">Dropdown header</h6> -->
<!-- <div class="dropdown-divider"></div> -->
<!-- MENU - LINK -->
<a class="dropdown-item" data-item-id="1" href="#">ITEM 1</a>
<div class="dropdown-divider"></div>
<!-- MENU - LINK -->
<a class="dropdown-item" data-item-id="2" href="#">ITEM 2</a>
<div class="dropdown-divider"></div>
<!-- MENU - LINK -->
<a class="dropdown-item" data-item-id="3" href="#">ITEM 3</a>
<div class="dropdown-divider"></div>
</div>
</div>
</div>
</div>
If I convert the button to an input of type text, the goal would be to type into it and display the filtered list of results. Kind like a google but the data being filtered is already downloaded by the time the user types to filter.
Alright. So, after a little more paying around I have come up with this solution. It would be nice to know how to get rid of the dropdown-dividers that had their respective links hidden during filtering.
// List Filter
$(document).ready(function() {
// On KeyUp...
$("#inputText9").on("keyup", function() {
// No results have been found yet
let result_found = false;
// All values typed in to lower case...
var search_string = $(this).val().toLowerCase();
$("#dropDown9 a").filter(function() {
// Hide if it does not match
$(this).toggle($(this).text().toLowerCase().indexOf(search_string) > -1);
if ($(this).text().toLowerCase().indexOf(search_string) > -1) {
// Results found
//$("#no_search_results").hide();
result_found = true;
}
// No results found
if (!result_found) {
//$("#no_search_results").show();
}
});
});
});
.material-icons.md-24 { font-size: 24px; }
.dropdown-menu-scrollable {
height: auto;
max-height: 244px; /* 5 items */
overflow-x: hidden;
}
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- GOOGLE FONT CSS - Roboto Mono -->
<link href="https://fonts.googleapis.com/css?family=Roboto+Mono:100,300,400,500,700&display=swap" rel="stylesheet">
<!-- GOOGLE FONT CSS - Material Icons -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<div class="form-row mb-2">
<!-- ROW > COLUMN -->
<div class="col">
<!-- <label for="dropDown1" class="small my-0">DROPDOWN 1</label> -->
<!-- DROPDOWN -->
<div class="dropdown">
<!-- DROPDOWN > TOGGLER -->
<!-- <a class="btn btn-secondary btn-block dropdown-toggle rounded-0" href="#" role="button" id="dropDown1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown 1
</a> -->
<button class="btn btn-dark btn-block rounded-0" type="button" id="dropDown1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<div class="d-flex justify-content-start align-items-center">
<i class="material-icons md-24 mr-2">done</i>
<span class="mr-auto" id="dropDownClockProjectText">DROPDOWN FILTER</span>
<i class="material-icons md-24">expand_more</i>
</div>
</button>
<!-- DROPDOWN > MENU -->
<div class="dropdown-menu dropdown-menu-right dropdown-menu-scrollable w-100 rounded-0" aria-labelledby="dropDown1" id="dropDown9">
<!-- MENU - HEADER -->
<!-- <h6 class="dropdown-header">Dropdown header</h6> -->
<!-- <div class="dropdown-divider"></div> -->
<!-- INPUT TEXT -->
<div class="col mb-2">
<!-- <label for="inputText1">inputText1</label> -->
<input type="text" class="form-control rounded-0" id="inputText9" aria-describedby="inputText1Desc" placeholder="Filter dropdown-items..">
</div>
<div class="dropdown-divider"></div>
<!-- MENU - LINK -->
<a class="dropdown-item searchable" data-item-id="1" href="./">dropdown-item 1</a>
<div class="dropdown-divider"></div>
<!-- MENU - LINK -->
<a class="dropdown-item searchable" data-item-id="2" href="./">dropdown-item 2</a>
<div class="dropdown-divider"></div>
<!-- MENU - LINK -->
<a class="dropdown-item searchable" data-item-id="3" href="./">dropdown-item 3</a>
<div class="dropdown-divider"></div>
<!-- MENU - LINK -->
<a class="dropdown-item searchable" data-item-id="4" href="./">dropdown-item 4</a>
<div class="dropdown-divider"></div>
<!-- MENU - LINK -->
<a class="dropdown-item searchable" data-item-id="5" href="./">dropdown-item 5</a>
<div class="dropdown-divider"></div>
<!-- MENU - LINK -->
<a class="dropdown-item searchable" data-item-id="6" href="./">dropdown-item 6</a>
<div class="dropdown-divider"></div>
</div>
</div>
</div>
</div>
Search by number for highest specificity.
This should help you:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bootstrap Dropdown Example</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<select class="custom-select">
<option selected><i class="fa fa-angle-double-right"></i>Dropdown 1</option>
<option value="1">Item 1</option>
<option value="2">Item 2</option>
<option value="3">Item 3</option>
</select>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
This is my best example. I don't think you can add a custom font because Bootstrap has its own font installed. I don't think you can add icons either, because I tried to in the example.

Bootstrap 4: Right-align content inside grid cell

The following html on a small screen results in overlapping columns:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<div class="row">
<div class="col-sm-1">
<a class="btn btn-secondary">New</a>
</div>
<div class="col-sm-8">
<form method="get">
<div class="row form-group">
<div class="col-8">
<input name="custName" value="" class="form-control" placeholder="Customer" />
</div>
<div class="col-4">
<button type="button" class="btn btn-secondary">Seach</button>
<button type="button" class="btn btn-secondary">Clear</button>
</div>
</div>
</form>
</div>
<div class="col-sm-3">
<nav aria-label="Pagination">
<ul class="pagination float-right">
<li><a class="page-link" href="#">Prev</a></li>
<li><a class="page-link" href="#">1</a></li>
<li><a class="page-link" href="#">2</a></li>
<li><a class="page-link" href="#">3</a></li>
<li><a class="page-link" href="#">Next</a></li>
</ul>
</nav>
</div>
</div>
I need to right-align nav element. How can I prevent overlapping of columns?
This is not a bug. It's working as design. There are only certain amounts of spaces you can have, and obviously you can't put everything there and expect they will still look nice and be in one row.
You can change the breakpoint from sm to maybe lg so that those columns will become rows earlier?
Fiddle: http://jsfiddle.net/aq9Laaew/111085/

What to do instead of <a> in <a>?

I am working on a new site, using this bootstrap tutorial for collapsing cards.
I want to click on the whole card-header though, not just its button, so I replaced it with an <a> tag and removed the button inside.
But I also want to have multiple other clickable links in the card header and they are dynamically generated <a> tags so I will not change their tag type.
I tried to change the card header to a button to be able to put <a> tags in it, but then I can not click them anymore.
Hoping for some easy creative solution you html-genius can come up with (best would be no addition css and no js at all please) :)
Keep in mind: I want the card-header and sub-links to have the clickable-mouse-icon on mouseover.
I inserted some code here:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div>
<div class="card">
<button href="#" id="headingOne"
class="card-header mb-0 d-flex justify-content-between align-items-center"
data-toggle="collapse"
data-target="#collapseOne"
aria-expanded="true"
aria-controls="collapseOne">
Some Text
<a id="alwaysATag" href="#">Clickable Link</a>
<a id="alwaysATag2" href="#">Clickable Link2</a>
<a id="alwaysATag3" href="#">Clickable Link3...</a>
</button>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim...
</div>
</div>
</div>
</div>
Just replace the button with span because you can't put links in a button in the first place so your code will be like this
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div>
<div class="card">
<span id="headingOne"
class="card-header mb-0 d-flex justify-content-between align-items-center"
data-toggle="collapse"
data-target="#collapseOne"
aria-expanded="true"
aria-controls="collapseOne">
Some Text
<a id="alwaysATag" href="/">Clickable Link</a>
<a id="alwaysATag2" href="http://google.com">Clickable Link2</a>
<a id="alwaysATag3" href="#">Clickable Link3...</a>
</span>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim...
</div>
</div>
</div>
</div>
EDIT
to make the mouse pointer use this css
a{cursor: pointer}

Bootstrap container, grid rows width and a padding issue

I'm creating my first bootstrap frontend, and I'm experiencing some issues which I'm not able to solve:
The row expanding to the whole width of the container, the max column width (12 units) will not extend to this width:
Further on, why is within the container writing over the padding:
Any hints appreciated!
I already tried to use container-fluid class, but the row seems not to get the max width.
Whole HTML:
<!DOCTYPE html>
<html>
<head>
<title>Snoo</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="app.css">
</head>
<body>
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Snoo!</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Reddit!</a>
</li>
</ul>
</div>
</nav>
</div>
<div class="container">
<div class="row">
<div class="col_xl-12">
<div id="content">
<h1>Snoo!</h1>
<hr>
<h3>A chatbot based on a million reddit comments, quiet salty!</h3>
<button class="btn btn-primary btn-lg">Learn more!</button>
</div>
</div>
</div>
</div>
</body>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
</html>
css:
#content {
text-align: center;
padding-top: 25%
}
your class name wrong col_xl-12 to change class name col-xl-12
https://v4-alpha.getbootstrap.com/layout/grid/
I'm seeing a typo, try to change:
col_xl-12 to -> col-xl-12
Remove container from your coding. Then the row will have full width
your class should be col-*-*, but you used col_xl-12
The HTML Structure Will be:
<div class="row">
<div class="/* Container or Container-fluid or Col-* */">
</div>
</div>