Gif does not appear when clicking button - html

This is the code :
<button class="fun" data-toggle="collapse" data-target="emoji">Click For Fun!</button>
<div id="emoji" class="collapse">
<div class="container-fluid padding">
<div class="row text-center">
<div class="col-sm-6 col-md-3">
<img class="gif" src="img/gif/panda.gif">
</div>
</div>
</div>
</div>
The button has the data target set to "emoji" but when I click the button nothing happens.


data-target="#emoji" will solve your problem.
<button class="fun" data-toggle="collapse" data-target="#emoji">Click For Fun!</button>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<button class="fun" data-toggle="collapse" data-target="#emoji">Click For Fun!</button>
<div id="emoji" class="collapse">
<div class="container-fluid padding">
<div class="row text-center">
<div class="col-sm-6 col-md-3">
<img class="gif" src="https://media0.giphy.com/media/Tia2InBEWaQgckP3UG/source.gif">
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

Related

issue with button in html bootstrap

I'm following this video tutorial https://www.youtube.com/watch?v=36jRXMsIFuA
I am using bootstrap 5.0.0 beta 1
My code is following:
<header>
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-12 col-12 bg-light">
<div class="btn-group">
<button class="btn border dropdown-toggle my-md-4 my-2" data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false">AUD</button>
<div class="dropdown-menu">
USD
</div>
</div>
</div>
<div class="col-md-4 col-12 text-center bg-dark"></div>
<h2 class="my-md-3 site-title">Online Store</h2>
<div class="col-md-4 col-12 text-right bg-danger">
<p class="my-md-4 header-links">
Sign In
Create an Account
</p>
</div>
</div>
</div>
</header>
And it looks like this, and when I click the button there is no dropdown. Layout is messed up as well.
my website
Compared to tutorial:
tutorial picture

The tutorial's using Bootstrap 4.3.1, the 4th version rather than the newest 5.0. If you switch to v4, your dropdown would works. Since a major update of a framework (increase of the first version number) is always not compatible to below versions.
About the layout, there's a mistake in your code. You need to put your <h2> tag within the tag with a background color and a style, the above <div> tag.
So, change the lines below:
<div class="col-md-4 col-12 text-center bg-dark"></div>
<h2 class="my-md-3 site-title">Online Store</h2>
To:
<div class="col-md-4 col-12 text-center bg-dark">
<h2 class="my-md-3 site-title">Online Store</h2>
</div>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<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>
<header>
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-12 col-12 bg-light">
<div class="btn-group">
<button class="btn border dropdown-toggle my-md-4 my-2" data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false">AUD</button>
<div class="dropdown-menu">
USD
</div>
</div>
</div>
<div class="col-md-4 col-12 text-center bg-dark">
<h2 class="my-md-3 site-title">Online Store</h2>
</div>
<div class="col-md-4 col-12 text-right bg-danger">
<p class="my-md-4 header-links">
Sign In
Create an Account
</p>
</div>
</div>
</div>
</header>

How to show multiple horizontal images in Bootstrap card?

How do I place multiple images side by side in a Bootstrap Card?
It should be multiple pictures, but only one title header and description.
In my code, the images start crossing over and intersecting each other.
Eventually, I'd like to use an array of pictures (two or more) and combine them with JavaScript.
The card can be as wide as needed.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="well text-center">
<div class="row">
<div class="col-md-6">
<img src="https://images.unsplash.com/reserve/bOvf94dPRxWu0u3QsPjF_tree.jpg?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="inn_logo">
</div>
<div class="col-md-6">
<img src="https://images.unsplash.com/reserve/bOvf94dPRxWu0u3QsPjF_tree.jpg?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="ccs_logo">
</div>
</div>
</div>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="card" style="width: 50rem;">
<!--Accordion wrapper-->
<div class="accordion md-accordion" id="accordionEx" role="tablist" aria-multiselectable="true">
<!-- Accordion card -->
<div class="card">
<div cardcheckbox id="checkboxdiv">
<input type="checkbox" class="cardcheckbox" id="checkid" align="right" onclick="toggleBoxVisibility()" />
</div>
<div class="well text-center">
<div class="col-md-12">Sister Properties:</div>
<div class="row">
<div class="col-md-6">
<img src="https://images.unsplash.com/reserve/bOvf94dPRxWu0u3QsPjF_tree.jpg?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="inn_logo">
</div>
<div class="col-md-6">
<img src="https://images.unsplash.com/reserve/bOvf94dPRxWu0u3QsPjF_tree.jpg?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="ccs_logo">
</div>
</div>
</div>
<!-- Card header -->
<div class="card-header" role="tab" id="headingOne1">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordionEx" href="#collapseOne1" aria-expanded="true" aria-controls="collapseOne1">
Tree
</a>
</div>
<!-- Card body -->
<div id="collapseOne1" class="collapse" role="tabpanel" aria-labelledby="headingOne1" data-parent="#accordionEx">
<div class="card-body">
Oak Tree with leaves in grassy picture with sunset
</div>
</div>
</div>
</div>
</div>

You might find Bootstrap's image-fluid class useful.
Images in Bootstrap are made responsive with .img-fluid.
max-width: 100%; and height: auto; are applied to the image so that it scales with the parent element.
Responsive images
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="well text-center">
<div class="row">
<div class="col-md-6">
<img src="https://images.unsplash.com/reserve/bOvf94dPRxWu0u3QsPjF_tree.jpg?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="inn_logo" class="img-fluid">
</div>
<div class="col-md-6">
<img src="https://images.unsplash.com/reserve/bOvf94dPRxWu0u3QsPjF_tree.jpg?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="ccs_logo" class="img-fluid">
</div>
</div>
</div>
Here's your second version with the checkbox.
You might consider using max-width instead of width to keep the card responsive.
.card {
max-width: 50rem;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="card">
<!--Accordion wrapper-->
<div class="accordion md-accordion" id="accordionEx" role="tablist" aria-multiselectable="true">
<!-- Accordion card -->
<div class="card">
<div cardcheckbox id="checkboxdiv">
<input type="checkbox" class="cardcheckbox" id="checkid" align="right" onclick="toggleBoxVisibility()" />
</div>
<div class="well text-center">
<div class="col-md-12">Sister Properties:</div>
<div class="row">
<div class="col-md-6">
<img src="https://images.unsplash.com/reserve/bOvf94dPRxWu0u3QsPjF_tree.jpg?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="inn_logo" class="img-fluid">
</div>
<div class="col-md-6">
<img src="https://images.unsplash.com/reserve/bOvf94dPRxWu0u3QsPjF_tree.jpg?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="ccs_logo" class="img-fluid">
</div>
</div>
</div>
<!-- Card header -->
<div class="card-header" role="tab" id="headingOne1">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordionEx" href="#collapseOne1" aria-expanded="true" aria-controls="collapseOne1">Tree</a>
</div>
<!-- Card body -->
<div id="collapseOne1" class="collapse" role="tabpanel" aria-labelledby="headingOne1" data-parent="#accordionEx">
<div class="card-body">
Oak Tree with leaves in grassy picture with sunset
</div>
</div>
</div>
</div>
</div>

Bootstrap 4 custom carousel

i'm new to bootstrap and i need some help to make this custom carousel.
The pictures above below will explain perfectly what i'm trying to make!
Thank you!
Desktop view
Mobile view

Here's my solution using JQuery. Make sure to update each image's src attribute to the appropriate value. I've included links to most of the important methods that were used at the bottom of this post.
<html>
<head>
<title>Custom Carousel</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- CDNs -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" 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.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
<script>
$(document).ready(function(){
// lg breakpoint that bootstrap defines is at 992px width
// Look at the Bootstrap Responsive Breakpoints page for more info
if($(window).width() <= 992)
// Look at JQuery Starts-With-Selector and Remove Documentation for more info
$("div[id^='3-slides-']").remove();
else
$("div[id^='slide-']").remove();
});
</script>
</head>
<body>
<div id="custom-carousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<!-- First 3 slides -->
<div class="carousel-item active" id="3-slides-1">
<div class="container-fluid">
<!-- Check out Bootstrap Grid Documentation for info about rows/cols -->
<div class="row align-items-center">
<img class="col-lg-3" src="https://via.placeholder.com/940x600"/>
<img class="col-lg-6" src="https://via.placeholder.com/940x600"/>
<img class="col-lg-3" src="https://via.placeholder.com/940x600"/>
</div>
</div>
</div>
<div class="carousel-item active" id="slide-1">
<div class="container-fluid">
<div class="row align-items-center">
<img class="col-12" src="https://via.placeholder.com/940x600"/>
</div>
</div>
</div>
<div class="carousel-item" id="slide-2">
<div class="container-fluid">
<div class="row align-items-center">
<img class="col-12" src="https://via.placeholder.com/940x600"/>
</div>
</div>
</div>
<div class="carousel-item" id="slide-3">
<div class="container-fluid">
<div class="row align-items-center">
<img class="col-12" src="https://via.placeholder.com/940x600"/>
</div>
</div>
</div>
<!-- Second 3 slides -->
<div class="carousel-item" id="3-slides-2">
<div class="container-fluid">
<div class="row align-items-center">
<img class="col-lg-3" src="https://via.placeholder.com/940x600"/>
<img class="col-lg-6" src="https://via.placeholder.com/940x600"/>
<img class="col-lg-3" src="https://via.placeholder.com/940x600"/>
</div>
</div>
</div>
<div class="carousel-item" id="slide-4">
<div class="container-fluid">
<div class="row align-items-center">
<img class="col-12" src="https://via.placeholder.com/940x600"/>
</div>
</div>
</div>
<div class="carousel-item" id="slide-5">
<div class="container-fluid">
<div class="row align-items-center">
<img class="col-12" src="https://via.placeholder.com/940x600"/>
</div>
</div>
</div>
<div class="carousel-item" id="slide-6">
<div class="container-fluid">
<div class="row align-items-center">
<img class="col-12" src="https://via.placeholder.com/940x600"/>
</div>
</div>
</div>
<!-- Third 3 slides -->
<div class="carousel-item" id="3-slides-3">
<div class="container-fluid">
<div class="row align-items-center">
<img class="col-lg-3" src="https://via.placeholder.com/940x600"/>
<img class="col-lg-6" src="https://via.placeholder.com/940x600"/>
<img class="col-lg-3" src="https://via.placeholder.com/940x600"/>
</div>
</div>
</div>
<div class="carousel-item" id="slide-7">
<div class="container-fluid">
<div class="row align-items-center">
<img class="col-12" src="https://via.placeholder.com/940x600"/>
</div>
</div>
</div>
<div class="carousel-item" id="slide-8">
<div class="container-fluid">
<div class="row align-items-center">
<img class="col-12" src="https://via.placeholder.com/940x600"/>
</div>
</div>
</div>
<div class="carousel-item" id="slide-9">
<div class="container-fluid">
<div class="row align-items-center">
<img class="col-12" src="https://via.placeholder.com/940x600"/>
</div>
</div>
</div>
<!-- Carousel controls -->
<a class="carousel-control-prev" href="#custom-carousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#custom-carousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</body>
CodePen
This is not responsive.
If you resize the window to the size of a mobile view, the JQuery function won't be called; however, if the screen starts with a mobile size, the carousel will be appropriate.
If you need the carousel to be updated to the right view during resizing, I believe you can wrap a resize function on the window around the main JQuery function I've used.
e.g.,
$(window).resize(function() {
if( $(this).width() > width ) {
if($(window).width() <= 992)
...
else
...
}
Useful Links
Bootstrap Responsive Breakpoints
Bootstrap Carousel Documentation
Bootstrap Grid Documentation
JQuery Remove Documentation
JQuery Resize Documentation
JQuery Starts-With-Selector Documentation

Hamburger drop-down menu not working when page is in "mobile" size on desktop

my hamburger button isn't working when I minimize the page to mobile size. Everything else seems to flow correctly, I've checked numerous times on the code and it seems to be correct. At this point, I'm not sure whether it's the script codes I have down below which disables the drop-down menu or what?
<!DOCTYPE html>
<html>
<head>
<title>Image Gallery</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="gallery.css">
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" date-target="#bs-nav-demo" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<span class="glyphicon glyphicon-picture" aria-hidden="true"></span> IMAGES
</div>
<div class="collapse navbar-collapse" id="bs-nav-demo-1">
<ul class="nav navbar-nav">
<li>About</li>
<li>Contact</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Sign Up</li>
<li>Login</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="jumbotron">
<h1><span class="fas fa-camera-retro"></span> The Image Gallery</h1>
<p>Wonderful pictures at your disposal!</p>
</div>
<div class="row">
<div class="col-lg-4 col-sm-6" >
<div class="thumbnail">
<img src="http://i.imgur.com/qK42fUu.jpg">
</div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="thumbnail">
<img src="https://images.unsplash.com/photo-1435771112039-1e5b2bcad966?dpr=2&fit=crop&fm=jpg&h=825&q=50&w=1450">
</div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="thumbnail">
<img src="https://images.unsplash.com/photo-1442406964439-e46ab8eff7c4?dpr=2&fit=crop&fm=jpg&h=825&q=50&w=1450">
</div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="thumbnail">
<img src="https://images.unsplash.com/photo-1439524970634-649c37a69e5c?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1450&h=825&fit=crop&s=bfda9916c885869b43b70738693428d9">
</div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="thumbnail">
<img src="https://images.unsplash.com/photo-1444090542259-0af8fa96557e?dpr=2&fit=crop&fm=jpg&h=825&q=50&w=1450">
</div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="thumbnail">
<img src="https://images.unsplash.com/photo-1434543177303-ef2cc7707e0d?dpr=2&fit=crop&fm=jpg&h=825&q=50&w=1450">
</div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="thumbnail">
<img src="https://images.unsplash.com/photo-1436262513933-a0b06755c784?dpr=2&fit=crop&fm=jpg&h=825&q=50&w=1450">
</div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="thumbnail">
<img src="https://images.unsplash.com/photo-1439396087961-98bc12c21176?dpr=2&fit=crop&fm=jpg&h=825&q=50&w=1450">
</div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="thumbnail">
<img src="https://images.unsplash.com/photo-1439694458393-78ecf14da7f9?dpr=2&fit=crop&fm=jpg&h=825&q=50&w=1450">
</div>
</div>
</div>
</div>
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
</body>
</html>

-> please update following code into your existing code.
-> must be same id name into button data-target name and collapse id name.
-> also add meta tag into head tag.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Image Gallery</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="gallery.css">
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-nav-demo-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<span class="glyphicon glyphicon-picture" aria-hidden="true"></span> IMAGES
</div>
<div class="collapse navbar-collapse" id="bs-nav-demo-1">
<ul class="nav navbar-nav">
<li>About</li>
<li>Contact</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Sign Up</li>
<li>Login</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="jumbotron">
<h1><span class="fas fa-camera-retro"></span> The Image Gallery</h1>
<p>Wonderful pictures at your disposal!</p>
</div>
<div class="row">
<div class="col-lg-4 col-sm-6" >
<div class="thumbnail">
<img src="http://i.imgur.com/qK42fUu.jpg">
</div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="thumbnail">
<img src="https://images.unsplash.com/photo-1435771112039-1e5b2bcad966?dpr=2&fit=crop&fm=jpg&h=825&q=50&w=1450">
</div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="thumbnail">
<img src="https://images.unsplash.com/photo-1442406964439-e46ab8eff7c4?dpr=2&fit=crop&fm=jpg&h=825&q=50&w=1450">
</div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="thumbnail">
<img src="https://images.unsplash.com/photo-1439524970634-649c37a69e5c?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1450&h=825&fit=crop&s=bfda9916c885869b43b70738693428d9">
</div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="thumbnail">
<img src="https://images.unsplash.com/photo-1444090542259-0af8fa96557e?dpr=2&fit=crop&fm=jpg&h=825&q=50&w=1450">
</div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="thumbnail">
<img src="https://images.unsplash.com/photo-1434543177303-ef2cc7707e0d?dpr=2&fit=crop&fm=jpg&h=825&q=50&w=1450">
</div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="thumbnail">
<img src="https://images.unsplash.com/photo-1436262513933-a0b06755c784?dpr=2&fit=crop&fm=jpg&h=825&q=50&w=1450">
</div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="thumbnail">
<img src="https://images.unsplash.com/photo-1439396087961-98bc12c21176?dpr=2&fit=crop&fm=jpg&h=825&q=50&w=1450">
</div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="thumbnail">
<img src="https://images.unsplash.com/photo-1439694458393-78ecf14da7f9?dpr=2&fit=crop&fm=jpg&h=825&q=50&w=1450">
</div>
</div>
</div>
</div>
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
</body>
</html>

How to align button to right in bootstrap 4

I tried looking this up here but I can't find anything related to this specific problem.
I'm trying to make a header which has a button on the left and right of the screen with a logo in the middle, but whenever I make the window smaller or larger the button on the right doesnt stay aligned.
Small window
Large window
Here is the code:
<header>
<div id="container-fluid">
<div class="row">
<div class=" col-2">
Menu
</div>
<div class="col-8 text-center ">
Logo
</div>
<div class="col-2 float-right">
Contact
</div>
</div>
</div>
</header>
What am I missing here?
Thanks in advance.
Fixed it, code now looks like this:
<body>
<header>
<div id="container-fluid">
<div class="row">
<div class="col">
<span class="float-left">Menu</span>
</div>
<div class="col text-center">
Logo
</div>
<div class="col">
<span class="float-right">Contact</span>
</div>
</div>
</div>
</header>
</body>

wrap your content so it can be aligned according to the parent container.
<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">
<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>
<header>
<div id="container-fluid">
<div class="row">
<div class="col-2">
<span class="float-left">Menu</span>
</div>
<div class="col-8 text-center">
Logo
</div>
<div class="col-2">
<span class="float-right">Contact</span>
</div>
</div>
</div>
</header>

You can use the flex-bootstrap-class and justify-content for this approach:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="container">
<div class="row d-flex justify-content-between bg-light">
<div class="p-2 bg-dark text-light">
Menu
</div>
<div class="p-2 bg-dark text-light">
Logo
</div>
<div class="p-2 bg-dark text-light">
Contact
</div>
</div>
</div>

You havn't defined what size of column grid you are using. Using col-xs,col-sm, col-md,col-lg will have different effects for the particular code. Run the snippet code in full page below and see how the col-size affects when the browser is resized.
Update - Bootstrap 4 has replaced the col-xs with col- .
<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>
<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 id="container-fluid">
Col:xs
<div class="row">
<div class=" col-2">
Menu
</div>
<div class="col-8 text-center ">
Logo
</div>
<div class="col-2 float-right">
Contact
</div>
</div>
</div>
<br>
<br>
<div id="container-fluid">
Col:sm
<div class="row">
<div class=" col-sm-2">
Menu
</div>
<div class="col-sm-8 text-center ">
Logo
</div>
<div class="col-sm-2 float-right">
Contact
</div>
</div>
</div>
<br>
<br>
<div id="container-fluid">
Col:md
<div class="row">
<div class=" col-md-2">
Menu
</div>
<div class="col-md-8 text-center ">
Logo
</div>
<div class="col-md-2 float-right">
Contact
</div>
</div>
</div>
<br>
<br>
<div id="container-fluid">
Col:lg
<div class="row">
<div class=" col-lg-2">
Menu
</div>
<div class="col-lg-8 text-center ">
Logo
</div>
<div class="col-lg-2 float-right">
Contact
</div>
</div>
</div>