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}
Related
I have input field inside a dropdown css and I am using bootstrap 4. when I enter some character I am not able to enter but I am able to input numbers. How to solve this.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></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>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="dropdown" data-dropdown="true">
<button type="button" class="btn btn-light btn-sm dropdown-toggle" data-toggle="dropdown" data-boundary="viewport">Spot</button>
<div class="dropdown-menu" style="overflow-y: auto; max-height: 300px;" data-loaded="true" data-selectedvalues="S">
<input placeholder="Search...Type" type="search">
<button type="button" class="dropdown-item active" data-selectedvalues="S">Spot</button>
<button type="button" class="dropdown-item" data-selectedvalues="T">Term</button>
</div>
</div>
Ok I found the issue. There was a event listener for document level for a particular class input. It will fire every time I press the character key. The script was on some other file so was not able to find out. I thought it was a bootsrap feature initially.
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
I'm trying to create navbar with a hamburger on the left and icon centered. How can I do this with responsively?
I tried to use mx-auto (margin-left margin-right: auto) but since I have a inline block on the left, the centered icon is pushed to the left.
I have also tried making the navbar d-flex and add justify-content-center but it just did nothing...
<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 class="pos-f-t">
<nav id="navbar" class="navbar navbar-expand-sm fixed-top navbar-dark bg-dark d-flex flex-row">
<button class="navbar-toggler d-flex justify-content-start" type="button">
<span class="navbar-toggler-icon"></span>
</button>
<img src="https://picsum.photos/20" alt="apple icon" class="d-flex justify-content-center mx-auto" id="icon">
</nav>
</div>
Expected result:
- Hamburger stays left, but apple icon stay center.
Actual result:
- apple icon pushed slightly right by hamburger,
- or nothing changed at all, just sitting at the right side.
This works perfectly with your above code. Check the below screenshot.
Make sure you have added the bootstrap4 css file
Lewis, Your code is working fine. I just added bootstrap4 CSS file. Below is my code.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
<div class="pos-f-t">
<nav
id="navbar"
class="navbar navbar-expand-sm fixed-top navbar-dark bg-dark d-flex flex-row"
>
<button class="navbar-toggler d-flex justify-content-start" type="button">
<span class="navbar-toggler-icon"></span>
</button>
<img
src="http://www.newdesignfile.com/postpic/2012/09/small-apple-logo_154074.jpg"
alt="apple icon"
class="d-flex justify-content-center mx-auto"
id="icon"
width="50px"
/>
</nav>
</div>
What you can do here is that add a right padding equal to the width of the navbar toggle button (width = 56px) to navbar. It already has a right padding of 16px. So, our total padding should be 16px + 56px = 72px.
This will align the image exactly in the center of the navbar.
.navbar-fix {
padding-right: 72px !important;
}
<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 class="pos-f-t">
<nav id="navbar" class="navbar navbar-expand-sm fixed-top navbar-dark bg-dark d-flex flex-row navbar-fix">
<button class="navbar-toggler d-flex justify-content-start" type="button">
<span class="navbar-toggler-icon"></span>
</button>
<img src="https://picsum.photos/20" alt="apple icon" class="d-flex justify-content-center mx-auto" id="icon">
</nav>
</div>
<header>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand logo" href="index.php"><span class="logo_main">test1</span>
<span class="logo_sub d-none d-md-block ">test2</span>
<span class="logo_main d-none d-md-block ">Test3</span></a>
</nav>
</header>
Now, I'm doing web design using bootstrap4. But, there's a mysterious bug.
I want to put test2 part and test3 part right after test1 and test2.
But Starting a new line occurs.
How should i do that?
First, note that you have the .d-none class on your test2 and Test3 elements, which hides their display. I assume you'll want to remove this, so I've done so in my examples.
Simply removing .d-none from these two elements causes all three elements to display next to each other, which sounds like what you want:
<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>
<header>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand logo" href="index.php">
<span class="logo_main">test1</span>
<span class="logo_sub d-md-block ">test2</span>
<span class="logo_main d-md-block ">Test3</span>
</a>
</nav>
</header>
If instead you actually want to 'create' a new line, so that test2 is below test1, simply make use of <div> elements instead of <span> elements:
<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>
<header>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand logo" href="index.php">
<div class="logo_main">test1</div>
<div class="logo_sub d-md-block ">test2</div>
<div class="logo_main d-md-block ">Test3</div>
</a>
</nav>
</header>
Also note that your <a> tag wraps all three elements in your example. This will cause all three elements to point to the same location. If you want them to point to different locations, you'll want to close the tag after each element, and open a new <a> tag for the proceeding elements.
Try closing the test1 class after test 3
So I was wondering how to change the H1 font-family in Bootstrap 4? Can't seem to get it right.. I'm kind of new to this bootstrap thing, so I followed a tutorial on Youtube, but they didn't explain how to change the font-family..
See the code here: (I deleted my css, because it didn't work at all and I honestly didn't even know what I was doing)
<div class="container">
<h1 class="display-2">Hello, World!</h1>
<p class="lead">This is a paragraph, you can say a lot of things in here!.</p>
</div>
FULL CODE:
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="stylesheet.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<nav class="navbar navbar-expand-sm navbar-light bg-info">
<button class="navbar-toggler" data-toggle="collapse" data-target="#mainNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="mainNav">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="index.html">Home</a>
<a class="nav-item nav-link" href="about.html">About</a>
<a class="nav-item nav-link" href="port.html">Work</a>
<a class="nav-item nav-link" href="contact.html">Contact</a>
</div>
</div>
</nav>
<div class="jumbotron jumbotron-fluid bg-info text-white text-center" style="background: #aaa">
<div class="container">
<h1 class="display-2">Hello, World!</h1>
<p class="lead">This is a paragraph, you can put text in me.</p>
</div>
</div>
<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>
You are loading the style sheets in the wrong order - first needs to be the Bootstrap css and then yours (assuming that stylesheet.css is where you are setting the alternate font-family on the h1) - so that your can overwrite the BS styles- AFTER loading bootstrap. The following shows the order the stylesheets should be loaded :
<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" href="stylesheet.css">
As a demo of the alternate font family:
The following shows 2 h1's - and I am loading in an alternate font family
.alternate-font {
font-family:"Montserrat"
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600" rel="stylesheet">-
<h1>This is a h1 using standard bootstrap h1 font-family</h1>
<h1 class="alternate-font">This is a h1 using Montserrat font-family</h1>
<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>