I'm trying to display 3 cols in a different order and position, on display bigger or smaller then the "md" breakpoint.
On > md layout, the col "A" "B" should be one above the other, while the col "C" should be on the right of both of them.
On < md layout the col "A" should be 100% large, while the "B" and "C" should be on the same row.
I tried so far most of combination of bootsrap classes (for row and col), but haven't figured out how to reach this behaviour.
Attacched an image to better explain the question.
Using Bootstrap 4 do something like this...
.border-div {
margin: 5px;
border: 4px solid;
min-height: 100px;
}
.c-div-block {
max-width: calc(100% - 10px);
max-height: calc(100% - 25px);
}
.border-div.normal-span {
line-height: 100px;
}
.border-div.expanded-span {
line-height: 200px;
}
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" />
<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>
</head>
<body>
<div class="container-fluid my-5">
<div class="row no-gutters position-relative py-2">
<div class="col-12 col-md-9 order-first order-md-first">
<div class="border-div border-dark text-center normal-span">A</div>
</div>
<div class="col-6 col-md-9 order-2 order-md-last">
<div class="border-div border-danger text-center normal-span">B</div>
</div>
<div class="position-absolute offset-md-9 col-md-3 order-md-2 h-100 d-none d-md-block">
<div class="border-div border-success h-100 c-div-block text-center expanded-span">C</div>
</div>
<div class="col-6 order-last d-block d-md-none">
<div class="border-div border-success text-center normal-span">C</div>
</div>
</div>
</div>
</body>
</html>
Note: div width and height may differ as per your requirement, so do the adjustment on you own.
Hope it will help many one.
Related
I am unable to get the columns to align next to each other. Instead, they are just stacked on top of each other.
.col-sm-4{
background-color: black;
opacity:0.9;
height: 100%;
margin: auto;
position: absolute
}
.container-fluid{
padding: 0;
}
.row{
margin: auto;
}
.col-sm-8{
background-color: darkred;
opacity: 0.9;
position: absolute;
text-align: right;
height: 100%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class=" col-xs-2 col-sm-4 col-lg-2">
</div>
<div class="col-xs-10 col-sm-8 col-lg-10" >
</div>
</div>
</div>
Remove position: absolute; in the classes .col-sm-4 and .col-sm-4 and you're done.
Here you can see the result: https://jsfiddle.net/yz96fgje/
just a quick note that Bootstrap 4 is a mobile-first design. So col-xs-2 doesn't work. Instead, use col-2 which will apply it's effect from 0px till the next breakpoint you make such as col-sm-4 in your case.
Also, you don't need extra CSS you can just delete it. Remember that col-xs does not exist in bootstrap 4.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<div class="container-fluid">
<div class="row">
<div class=" col-2 col-sm-4 col-lg-2">
hi 1
</div>
<div class="col-10 col-sm-8 col-lg-10">
hi 2
</div>
</div>
</div>
<!-- JS, Popper.js, and jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous">
</script>
Can you help me do a css for this sample?
I want to display the card in 1 column when it's view on tablet devices,
and 2 column if it's view on desktop.
Sample
Thanks!
You should use Bootstrap's grid system here. I have attached a sample code with just two divs. This is for your better understanding. Before you proceed to cards, first play around with the grid system and make yourself wise in it. This is as simple as it looks. A bootstrap row is divided by equal 12 columns. They can be represented using- lg- large device, md- medium device, sm- small device and xs- extra small device.
col-lg-6 col-md-12 -This implies that, the DOM elements should take 6 columns of a row when it is in Desktop view and 12 columns when it is in Tablet view.
Make sure you learn how media queries work, then proceed with bootstrap's grid system. Hope it helps!.. Happy coding.!!
<html>
<head>
<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">
<style>
#div1{
background: #0ef;
}
#div2{
background: #fe0;
}
</style>
</head>
<body>
<div class="jumbotron">
<div class="row">
<div class="col-lg-6 col-md-12" id="div1">div 1</div>
<div class="col-lg-6 col-md-12" id="div2">div 2</div>
</div>
</div>
<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>
Grid system - bootstrap 4
https://getbootstrap.com/docs/4.3/layout/grid/
<html>
<head>
<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">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-12">
<div class="media border border-secoundery m-2">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSeLpmTC32CdJU5T9AuHFGCtPwbt_MCnhc4b7RPsm1uSK-0SslS" class="mr-3" style="max-width:100px" alt="...">
<div class="media-body">
<h5 class="mt-2">test title 1</h5>
content test
</div>
</div>
</div>
<div class="col-lg-6 col-md-12">
<div class="media border border-secoundery m-2">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSeLpmTC32CdJU5T9AuHFGCtPwbt_MCnhc4b7RPsm1uSK-0SslS" class="mr-3" style="max-width:100px" alt="...">
<div class="media-body">
<h5 class="mt-2">test title 1</h5>
content test
</div>
</div>
</div>
<div class="col-lg-6 col-md-12">
<div class="media border border-secoundery m-2">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSeLpmTC32CdJU5T9AuHFGCtPwbt_MCnhc4b7RPsm1uSK-0SslS" class="mr-3" style="max-width:100px" alt="...">
<div class="media-body">
<h5 class="mt-2">test title 1</h5>
content test
</div>
</div>
</div>
<div class="col-lg-6 col-md-12">
<div class="media border border-secoundery m-2">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSeLpmTC32CdJU5T9AuHFGCtPwbt_MCnhc4b7RPsm1uSK-0SslS" class="mr-3" style="max-width:100px" alt="...">
<div class="media-body">
<h5 class="mt-2">test title 1</h5>
content test
</div>
</div>
</div>
</div>
</div>
<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>
It would be pretty simple using css grid.
Let’s say you have 4 divs. Put those in a container. Set that container to:
container {
display: grid;
grid-template-columns: auto auto;
}
This sets 2 automatically scaled columns normally.
and then set a media query for your selected width of a tablet
#media (max-width: 500px) {
container {
grid-template-columns: auto;
}
}
This means up to 500px, there will only be one column. No one else used css grid so I thought it would be cool to show.
I might have mixed up columns and rows cause I’m dumb but yea that’s it. I suggest you learn about media queries, and css grid/flexgrid/bootstrap
I'm trying to create a layout like following using bootstrap 4.
Following is my JSFiddle and I think the approach I have taken is incorrect and there's a better way of doing this. And also there are responsive issues.
JSFiddle
html,
body {
height: 100%;
}
.yellow {
background-color: yellow;
}
.red {
background-color: red;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container-fluid h-100 ">
<div class="row justify-content-center h-100">
<div class="col-4 hidden-md-down yellow" id="yellow">
Form Goes Here
</div>
<div class="col-10 col-sm-10 col-md-8 col-lg-8 col-xl-8 red">
Background image
</div>
</div>
</div>
bootstrap grid has 12 column and your total was coming to 14. I have added
col-sm-4 to yellow div and col-sm-8 to red div.
refer below link for more details. thanks
https://getbootstrap.com/docs/4.1/layout/grid/
html,
body {
height: 100%;
}
.yellow {
background-color: yellow;
}
.red {
background-color: red;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container-fluid h-100 ">
<div class="row justify-content-center h-100">
<div class="col-sm-4 hidden-md-down yellow" id="yellow">
Form Goes Here
</div>
<div class="col-sm-8 col-md-8 col-lg-8 col-xl-8 red">
Background image
</div>
</div>
</div>
Bootstrap columns must add up to 12, yet yours add up to 14 for some viewports.What you probably want is to have one column at 4 and one at 8:
.left, .right {
height: 100vh;
}
.left {
background: yellow;
}
.right {
background: red;
}
<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="row">
<div class="col-4 left"></div>
<div class="col-8 right"></div>
</div>
The better option is to just use .col for the red region so that it occupies the remaining width.
html,
body {
height: 100%;
}
.yellow {
background-color: yellow;
}
.red {
background-color: red;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid h-100">
<div class="row h-100">
<div class="col-4 hidden-md-down yellow" id="yellow">
Form Goes Here
</div>
<div class="col red">
Background image
</div>
</div>
</div>
I've got some weird spaces in the mobile version, here some images:
Here's how does it look on desktop:
Desktop #01
Desktop #02
And a mobile:
Mobile #01 - with spacing on the right
Mobile #02 - with a "h3 class="display-4" maybe calling that spacing?
HTML:
<!-- The beginning of html -->
<!DOCTYPE HTML>
<html lang="PL-pl">
<head>
<title>The page is being rebuilt...</title>
<meta charset="utf-8">
<!-- versioning can often help (href="css/style.css?ver=2.0") -->
<!-- BOOTSTRAP 4 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<link rel="stylesheet" href="https://reportsquestionsznaczki65.000webhostapp.com/css/restyled.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
</head>
<body>
<main>
<div class="jumbotron jumbotron-fluid text-white text-center bg-info nomarginbottom">
<div class="container">
<h3 class="display-2">This site is being finally rebuilt!</h3>
<p class="lead">Hence it will have more features soon.</p>
</div>
</div>
<div class="container-fluid">
<div class="row mt-3 text-center">
<div class="col-12">
<h3 class="display-4">Sites done:</h3>
</div>
</div>
<div class="row justify-content-center mt-2 text-white text-center mb-4">
<div class="col-12 col-lg-4">
<a class="websitelink" href="https://reportsquestionsznaczki65.000webhostapp.com/wszyscy.html">
<div class="box lead p-4">Go to: "WSZYSCY"</div>
</a>
</div>
</div>
<div class="row text-center">
<div class="col-12 change"><h4 class="display-4">What will be changed?</h4></div>
</div>
<div class="text-center">
<div class="row change2">
<p class="col-sm-6 col-lg-3 feature lead">The structure of the page.</p> <!-- class feature not used -->
<p class="col-sm-6 col-lg-3 feature lead">The site will be now responsive.</p>
<p class="col-sm-6 col-lg-3 feature lead">Lessons will be adding automatically via JS.</p>
<p class="col-sm-6 col-lg-3 feature lead">More code, more readable..</p>
</div>
<div class="row change2">
<div class="col-sm-6 col-lg-3 feature lead"><p>Sleek look.</p></div>
<div class="col-sm-6 col-lg-3 feature lead"><p>Fast and comprehensive.</p></div>
<div class="col-sm-6 col-lg-3 feature lead"><p>Inspiring quotes.</p></div>
<div class="col-sm-6 col-lg-3 feature lead"><p>And much more...</p></div>
</div>
</div>
<div class="row change2">
<div class="col-12">
<h5 class="text-center border border-3 border-dashed border-info change3 nomarginbottom">
<q>You can do everything, unless your imagination has stopped you.</q>
</h5>
</div>
</div>
<div class="row change2">
<div class="col-12">
<h3 class="display-4 text-center nomarginbottom">Current status: Learning Bootstrap 4.2 (80%) + Added "wszyscy.html".</h3>
<p class="lead text-center nomarginbottom">Overall status: 5% done on the page.</p>
</div>
</div>
<div class="row mb-5">
<div class="col-12">
<h5 class="text-center border border-3 border-dashed border-info change3 nomarginbottom">
<q>Change is best, when it's changing with you, not without.</q>
</h5>
</div>
</div>
</div>
</main>
<noscript>
<meta http-equiv="refresh" content="0; URL=https://reportsquestionsznaczki65.000webhostapp.com/noscript.html"/>
</noscript>
<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.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
</body>
</html>
CSS (restyled.css):
body {
background-color: #eee;
}
/* Rebuilding the page */
.change {
padding: 30px 10px;
background-color: #dedede;
}
.change2 {
padding: 15px 5px;
}
.change3 {
padding: 20px 5px;
}
.nomargin {
margin: 0;
}
.nomarginbottom {
margin-bottom: 0;
}
img[alt="www.000webhost.com"] {
display: none;
}
.border-3 {
border-width: 3px !important;
}
.border-dashed {
border-style: dashed !important;
}
.websitelink, .websitelink:hover {
text-decoration: none;
color: #FFF;
}
.box {
background-color: #343a40;
font-size: 170%;
}
.box:hover {
background-color: darkslategray;
cursor: pointer;
}
Here's the website :
https://reportsquestionsznaczki65.000webhostapp.com
Due to it's online you can use:
view-source:https://reportsquestionsznaczki65.000webhostapp.com/index.html
https://reportsquestionsznaczki65.000webhostapp.com/css/restyled.css
Thank you for any help.
The text "wszyscy.html" in the mobile version is bigger than the screen due to its font-size . Make that smaller and you will no longer see that space
This question already has answers here:
Vertical alignment in Bootstrap 4
(2 answers)
Vertical Align Center in Bootstrap 4 [duplicate]
(20 answers)
Closed 5 years ago.
Reading the Bootstrap docs you can get to the alignment examples section.
It tells you can use use flexbox alignment utilities to vertically and horizontally align columns as Bootstrap CSS classes align-items-start, align-items-center and align-items-end but when I'm trying it the content is not vertically aligned as expected with a full height container, see the following code:
html,
body {
height: 100%;
}
.fill {
min-height: 100%;
height: auto !important;
height: 100%;
background-color: lightblue;
}
.col {
border: 1px solid red;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<div class="container fill">
<div class="row align-items-start">
<div class="col text-center">
align-items-start
</div>
</div>
<div class="row align-items-center">
<div class="col text-center">
align-items-center
</div>
</div>
<div class="row align-items-end">
<div class="col text-center">
align-items-end
</div>
</div>
</div>
<!-- jQuery first, then Tether, then Bootstrap JS. -->
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
I expected to have align-items-center content on the vertical middle and align-items-end at the bottom of the container.
What I'm doing wrong or what I misunderstood?
In order to vertically align items in flex-container you need to give height to flex-container.
.row{
min-height:100px;
}
html,
body {
height: 100%;
}
.fill {
min-height: 100%;
height: auto !important;
height: 100%;
background-color: lightblue;
}
.col {
border: 1px solid red;
}
.row{
min-height:100px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<div class="container fill">
<div class="row align-items-start">
<div class="col text-center">
align-items-start
</div>
</div>
<div class="row align-items-center">
<div class="col text-center">
align-items-center
</div>
</div>
<div class="row align-items-end">
<div class="col text-center">
align-items-end
</div>
</div>
</div>
<!-- jQuery first, then Tether, then Bootstrap JS. -->
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>