How to remove the underline from the link on the button? - html

Good afternoon! I am reviewing a college paper and wanted to remove the underline from the link inside the button, the underline only appears when hovering over the button. I would like to remove the underline to make the button totally clean, can anyone tell me which tags are used to remove?
body {
margin-left: auto;
margin-right: auto;
text-align: center;
}
.div {
display: inline-block;
}
.botao {
width: 30px;
height: 45px;
border-radius: 25px;
}
.esquerda {
margin-right: 5%;
}
.indicador {
width: 30px;
height: 45px;
border-radius: 25px;
}
.indicador:visited {
width: 300px;
height: 45px;
border-radius: 25px;
}
#compra {
background-color: orange;
width: 10%;
margin-top: 3.5%;
border-radius: 25px;
}
.btn {
text-decoration: none;
}
<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>Eco Aero - Viagens</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Boostrap CSS -->
<link rel="stylesheet" href="../node_modules/bootstrap/compiler/bootstrap.css">
<link rel="stylesheet" type="text/css" href="../estilo/style.css">
<script type="text/JavaScript" src="../js/resultadomes.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand h1 mb-0" href="index.html">Eco Aero - Viagens</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSite">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSite">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="index.html">Início</a>
</li>
<li class="nav-item">
<a class="nav-link" href="sobre.html">Sobre</a>
</li>
<li>
<a class="nav-link" href="contato.html">Contato</a>
</li>
<li class="nav-item">
<a class="nav-link" href="passagensareas.html">Passagens Aéreas</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="login.html">Entrar</a>
</li>
<li class="nav-item">
<a class="nav-link" href="inscrever.html">Inscrever-se</a>
</li>
</ul>
</div>
</div>
</nav>
<div id="carouselSite" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselSite" data-slide-to="0" class="active"></li>
<li data-target="#carouselSite" data-slide-to="1"></li>
<li data-target="#carouselSite" data-slide-to="2"></li>
<li data-target="#carouselSite" data-slide-to="3"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="../imagem/slide-01.png" class="img-fluid d-block">
</div>
<div class="carousel-item">
<img src="../imagem/slide-02.jpeg" class="img-fluid d-block">
</div>
<div class="carousel-item">
<img src="../imagem/slide-03.jpeg" class="img-fluid d-block">
</div>
<div class="carousel-item">
<img src="../imagem/slide-04.jpeg" class="img-fluid d-block">
</div>
</div>
<a class="carousel-control-prev" href="#carouselSite" role="button" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
<span class="sr-only">Anterior</span>
</a>
<a class="carousel-control-next" href="#carouselSite" role="button" data-slide="next">
<span class="carousel-control-next-icon"></span>
<span class="sr-only">Próximo</span>
</a>
</div>
<div class="container">
<div class="row">
<div class="col-12 text-center my-5">
<h1 class="display-3">Passagens Aéreas</h1>
</div>
</div>
<div class="row justify-content-center mb-5">
<div class="col-sm-12 col-md-10 col-lg-8">
<form name="consulta" method="post">
<div class="form-row">
<div class="form-group col-sm-6">
<label for="escolhaDataIda">Escolha Data de Ida:</label>
<input type="date" id="escolhaDataIda" class="form-control" name="dataida" required>
</div>
<div class="form-group col-sm-6">
<label for="escolhaDataVolta">Escolha Data de Volta:</label>
<input type="date" id="escolhaDataVolta" class="form-control" name="datavolta">
</div>
<div class="form-group col-sm-12">
<a href="listaderesultados.html">
<button type="button" class="btn btn-outline-dark btn-lg btn-block">Pesquisar</button>
</a>
</div>
</div>
</form>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-12 mb-3">
<hr>
</div>
<div class="col-sm-4">
<h3>Eco Aero - Viagens</h3>
<p>A melhor agência de viagens sobre medidas para todos os tipos de pessoas e gostos.Viaje com a gente e venha conhecer novos lugares, culturas e compartilhar as melhores imagens e guardar as melhores lembranças.</p>
</div>
<div class="col-sm-4">
<h3>Menu</h3>
<div class="list-group text-center">
Início
Sobre
Contato
Passagens Aéreas
</div>
</div>
<div class="col-sm-4">
<h3>Social</h3>
<div class="btn-group-vertical btn-block btn-group-lg" role="group">
<a class="btn btn-outline-primary" href="#">Facebook</a>
<a class="btn btn-outline-info" href="#">Twitter</a>
<a class="btn btn-outline-warning" href="#">Instagram</a>
</div>
</div>
<div class="col-12 mt-5">
<blockquote class="blockquote text-center">
<p class="mb-0">O sucesso não é garantido, mas o fracasso é certo se você não estiver emocionalmente envolvido em seu trabalho.</p>
<footer class="blockquote-footer">Biz Stone <cite title="Título">Fundador do Twitter</cite></footer>
</blockquote>
</div>
</div>
</div>
<!-- Modal -->
<!-- Optional JavaScript -->
<!-- jquery first, then popper.js, then Bootstrap 3S -->
<script src="../node_modules/jquery/dist/jquery.js"></script>
<script src="../node_modules/popper.js/dist/umd/popper.js"></script>
<script src="../node_modules/bootstrap/dist/js/bootstrap.js"></script>
</body>
</html>


Simply added this CSS rule to your existing code in last line
a {text-decoration: none;}
body{
margin-left:auto;
margin-right:auto;
text-align:center;
}
.div{
display:inline-block;
}
.botao{
width:30px;
height:45px;
border-radius:25px;
}
.esquerda{
margin-right:5%;
}
.indicador{
width:30px;
height:45px;
border-radius:25px;
}
.indicador:visited{
width:300px;
height:45px;
border-radius:25px;
}
#compra{
background-color:orange;
width:10%;
margin-top:3.5%;
border-radius:25px;
}
.btn, a {
text-decoration: none;
}
<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>Eco Aero - Viagens</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Boostrap CSS -->
<link rel="stylesheet" href="../node_modules/bootstrap/compiler/bootstrap.css">
<link rel="stylesheet" type="text/css" href="../estilo/style.css">
<script type="text/JavaScript" src="../js/resultadomes.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand h1 mb-0" href="index.html">Eco Aero - Viagens</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSite">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSite">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="index.html">Início</a>
</li>
<li class="nav-item">
<a class="nav-link" href="sobre.html">Sobre</a>
</li>
<li>
<a class="nav-link" href="contato.html">Contato</a>
</li>
<li class="nav-item">
<a class="nav-link" href="passagensareas.html">Passagens Aéreas</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="login.html">Entrar</a>
</li>
<li class="nav-item">
<a class="nav-link" href="inscrever.html">Inscrever-se</a>
</li>
</ul>
</div>
</div>
</nav>
<div id="carouselSite" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselSite" data-slide-to="0" class="active"></li>
<li data-target="#carouselSite" data-slide-to="1"></li>
<li data-target="#carouselSite" data-slide-to="2"></li>
<li data-target="#carouselSite" data-slide-to="3"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="../imagem/slide-01.png" class="img-fluid d-block">
</div>
<div class="carousel-item">
<img src="../imagem/slide-02.jpeg" class="img-fluid d-block">
</div>
<div class="carousel-item">
<img src="../imagem/slide-03.jpeg" class="img-fluid d-block">
</div>
<div class="carousel-item">
<img src="../imagem/slide-04.jpeg" class="img-fluid d-block">
</div>
</div>
<a class="carousel-control-prev" href="#carouselSite" role="button" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
<span class="sr-only">Anterior</span>
</a>
<a class="carousel-control-next" href="#carouselSite" role="button" data-slide="next">
<span class="carousel-control-next-icon"></span>
<span class="sr-only">Próximo</span>
</a>
</div>
<div class="container">
<div class="row">
<div class="col-12 text-center my-5">
<h1 class="display-3">Passagens Aéreas</h1>
</div>
</div>
<div class="row justify-content-center mb-5">
<div class="col-sm-12 col-md-10 col-lg-8">
<form name="consulta" method="post">
<div class="form-row">
<div class="form-group col-sm-6">
<label for="escolhaDataIda">Escolha Data de Ida:</label>
<input type="date" id="escolhaDataIda" class="form-control" name="dataida" required>
</div>
<div class="form-group col-sm-6">
<label for="escolhaDataVolta">Escolha Data de Volta:</label>
<input type="date" id="escolhaDataVolta" class="form-control" name="datavolta">
</div>
<div class="form-group col-sm-12">
<a href="listaderesultados.html">
<button type="button" class="btn btn-outline-dark btn-lg btn-block">Pesquisar</button>
</a>
</div>
</div>
</form>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-12 mb-3"><hr></div>
<div class="col-sm-4">
<h3>Eco Aero - Viagens</h3>
<p>A melhor agência de viagens sobre medidas para todos os tipos de pessoas e gostos.Viaje com a gente e venha conhecer novos lugares, culturas e compartilhar as melhores imagens e guardar as melhores lembranças.</p>
</div>
<div class="col-sm-4">
<h3>Menu</h3>
<div class="list-group text-center">
Início
Sobre
Contato
Passagens Aéreas
</div>
</div>
<div class="col-sm-4">
<h3>Social</h3>
<div class="btn-group-vertical btn-block btn-group-lg" role="group">
<a class="btn btn-outline-primary" href="#">Facebook</a>
<a class="btn btn-outline-info" href="#">Twitter</a>
<a class="btn btn-outline-warning" href="#">Instagram</a>
</div>
</div>
<div class="col-12 mt-5">
<blockquote class="blockquote text-center">
<p class="mb-0">O sucesso não é garantido, mas o fracasso é certo se você não estiver emocionalmente envolvido em seu trabalho.</p>
<footer class="blockquote-footer">Biz Stone <cite title="Título">Fundador do Twitter</cite></footer>
</blockquote>
</div>
</div>
</div>
<!-- Modal -->
<!-- Optional JavaScript -->
<!-- jquery first, then popper.js, then Bootstrap 3S -->
<script src="../node_modules/jquery/dist/jquery.js"></script>
<script src="../node_modules/popper.js/dist/umd/popper.js"></script>
<script src="../node_modules/bootstrap/dist/js/bootstrap.js"></script>
</body>
</html>

Related

Sticky navbar only is sticky for first section of page

So I am creating a bootstrap website. It is supposed to be a one-page website and I have a navar at the top. My navbar is only sticky for the first section and then it just entirely disappears. How do I make it continue to stay sticky so that when I scroll through the entire page comes along at the top?
Here is my current code:
body,
td,
th {
font-family: muli;
font-style: normal;
color: #000000;
}
body {
min-height: 100%;
width: 100%;
argin-left: 0px;
background-image: url();
background-color: #FFFFFF;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Group</title>
<!-- Bootstrap Core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">
<link href="vendor/simple-line-icons/css/simple-line-icons.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/stylish-portfolio.min.css" rel="stylesheet">
<!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.-->
<script>
var __adobewebfontsappname__ = "dreamweaver"
</script>
<script src="http://use.edgefonts.net/muli:n4:default.js" type="text/javascript"></script>
</head>
<body marginwidth="200px" id="page-top">
<!-- Navigation -->
<header class="header sticky-top">
<nav class="navbar navbar-expand-lg navbar-light bg-white shadow-sm">
<a class="navbar-brand" href="#"><img src="img/MBGlogo.svg" width="200" height="50" alt=""></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation" style="border-radius:30px">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Get Involved</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Career Fair</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Ideation</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Jobs</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Sponsor</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</nav>
</header>
<!-- Header -->
<header class="masthead d-flex">
<div class="container text-center my-auto">
<h6 style="font-size:25px; letter-spacing:2px; color: white">CLUB</h6>
<h1 style="font-size:85px; color:white">Industry</h1>
<pre> </pre>
<a class="btn btn-primary btn-M js-scroll-trigger" href="#get-involved">Get Involved</a>
</div>
<div class="overlay"></div>
</header>
<!-- About -->
<section class="content-section bg-primary text-white text-center" id="about">
<div class="container text-center">
<div class="content-section-heading">
<h2 class="mb-5">Vision</h2>
<h4 style="font-weight:normal">business</h4>
<h4 style="font-weight:normal">careers</h4>
</div>
</div>
</section>
<!-- Portfolio -->
<section class="content-section" id="portfolio">
<div class="container">
<div class="content-section-heading text-center">
<h3 class="text-secondary mb-0">Portfolio</h3>
<h2 class="mb-5">Recent Projects</h2>
</div>
<div class="row no-gutters">
<div class="col-lg-6">
<a class="portfolio-item" href="#">
<span class="caption">
<span class="caption-content">
<h2>Stationary</h2>
<p class="mb-0">A yellow pencil with envelopes on a clean, blue backdrop!</p>
</span>
</span>
<img class="img-fluid" src="img/portfolio-1.jpg" alt="">
</a>
</div>
<div class="col-lg-6">
<a class="portfolio-item" href="#">
<span class="caption">
<span class="caption-content">
<h2>Ice Cream</h2>
<p class="mb-0">A dark blue background with a colored pencil, a clip, and a tiny ice cream cone!</p>
</span>
</span>
<img class="img-fluid" src="img/portfolio-2.jpg" alt="">
</a>
</div>
<div class="col-lg-6">
<a class="portfolio-item" href="#">
<span class="caption">
<span class="caption-content">
<h2>Strawberries</h2>
<p class="mb-0">Strawberries are such a tasty snack, especially with a little sugar on top!</p>
</span>
</span>
<img class="img-fluid" src="img/portfolio-3.jpg" alt="">
</a>
</div>
<div class="col-lg-6">
<a class="portfolio-item" href="#">
<span class="caption">
<span class="caption-content">
<h2>Workspace</h2>
<p class="mb-0">A yellow workspace with some scissors, pencils, and other objects.</p>
</span>
</span>
<img class="img-fluid" src="img/portfolio-4.jpg" alt="">
</a>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="footer text-center">
<div class="container">
<ul class="list-inline mb-5">
<li class="list-inline-item">
<a class="social-link rounded-circle text-white mr-3" href="mailto: bio#gmail.com">
<i class="icon-envelope"></i>
</a>
</li>
<li class="list-inline-item">
<a class="social-link rounded-circle text-white mr-3" href="#">
<i class="icon-social-twitter"></i>
</a>
</li>
</ul>
<p class="text-muted small mb-0">Copyright ©2020</p>
</div>
</footer>
<!-- Scroll to Top Button-->
<a class="scroll-to-top rounded js-scroll-trigger" href="#page-top">
<i class="fas fa-angle-up"></i>
</a>
<!-- Bootstrap core JavaScript -->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Plugin JavaScript -->
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
<!-- Custom scripts for this template -->
<script src="js/stylish-portfolio.min.js"></script>
</body>
</html>

You can remove the sticky-top class and just add header{position:sticky;} in css as there is some particular javascript which hides your header after first section.

Add 'fixed-top' in the nav tag
and remove the " sticky-top" from header tag

Why my button does not move even if I make a margin?

Good evening,
I am developing an online shopping site for supermarkets.
The problem I have is that I want to move a button upwards so that it is in the same line of a text, I show you the image so that you understand better:
you see the buy button I want to put it in the same line as the "price: 2.5 dhs", I put a margin-bottom : 30px;
but it does not work the button does not move!
I do not know if it is a problem of template that puts conditions because I download the template aroma.
here is my html code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Bougrine Shop - Home</title>
<link rel="icon" href="img/Fevicon.png" type="image/png">
<link rel="stylesheet" href="vendors/bootstrap/bootstrap.min.css">
<link rel="stylesheet" href="vendors/fontawesome/css/all.min.css">
<link rel="stylesheet" href="vendors/themify-icons/themify-icons.css">
<link rel="stylesheet" href="vendors/nice-select/nice-select.css">
<link rel="stylesheet" href="vendors/owl-carousel/owl.theme.default.min.css">
<link rel="stylesheet" href="vendors/owl-carousel/owl.carousel.min.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/Css_acceuil_marjane.css">
</head>
<body>
<!--================ Start Header Menu Area =================-->
<header class="header_area">
<div class="main_menu">
<nav class="navbar navbar-expand-lg navbar-light">
<div class="container">
<a class="navbar-brand logo_h" href="#"><i class="fas fa-shopping-cart"></i> Bougrine</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="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse offset" id="navbarSupportedContent">
<ul class="nav navbar-nav menu_nav ml-auto mr-auto">
<li class="nav-item active"><a class="nav-link" href="index.html">Home</a></li>
<li class="nav-item submenu dropdown">
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">Shop</a>
<ul class="dropdown-menu">
<li class="nav-item"><a class="nav-link" href="category.html">Shop Category</a></li>
<li class="nav-item"><a class="nav-link" href="single-product.html">Product Details</a></li>
<li class="nav-item"><a class="nav-link" href="checkout.html">Product Checkout</a></li>
<li class="nav-item"><a class="nav-link" href="confirmation.html">Confirmation</a></li>
<li class="nav-item"><a class="nav-link" href="cart.html">Shopping Cart</a></li>
</ul>
</li>
<li class="nav-item submenu dropdown">
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">Pages</a>
<ul class="dropdown-menu">
<li class="nav-item"><a class="nav-link" href="login.html">Login</a></li>
<li class="nav-item"><a class="nav-link" href="register.html">Register</a></li>
<li class="nav-item"><a class="nav-link" href="tracking-order.html">Tracking</a></li>
</ul>
</li>
<li class="nav-item"><a class="nav-link" href="contact.html">Contact</a></li>
</ul>
<ul class="nav-shop">
<li class="nav-item"><button><i class="ti-search"></i></button></li>
<li class="nav-item"><button><i class="ti-shopping-cart"></i><span class="nav-shop__circle">3</span></button> </li>
<li class="nav-item"><a class="button button-header" href="#">Buy Now</a></li>
</ul>
</div>
</div>
</nav>
</div>
</header>
<!--================ End Header Menu Area =================-->
<main class="site-main">
<!--================ Hero banner start =================-->
<section class="hero-banner">
<div class="container">
<div class="row no-gutters align-items-center pt-60px">
<div class="col-5 d-none d-sm-block">
<div class="hero-banner__img">
<img class="img-fluid" src="img/marjane.png" alt="">
</div>
</div>
<div class="col-sm-7 col-lg-6 offset-lg-1 pl-4 pl-md-5 pl-lg-0">
<div class="hero-banner__content">
<h4>Shop is fun</h4>
<h1>Parcourer tout les produits de marjane sur cette page !</h1>
<p>Notre site est là pour vous aidez a faire vos courses sur tout les grandes surfaces du maroc alors profitez de nos belles offres !</p>
<a class="button button-hero" href="#">Browse Now</a>
</div>
</div>
</div>
</div>
</section>
<!--------------- all produit ------------>
<section id="section_all_produit">
<h1 id="h1_all_product">Voici tout les produits dans dispose notre magasin "Marjane"</h1>
<div class="card" style="width: 18rem; height: 500px;">
<img src="img/perli.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Perly</h5>
<p class="card-text">Quantité : 90g</p>
<p class="card-text">Marques : Jaouda</p>
<p class="card-text">Lieux de fabrication: Taroudant</p>
<h3 class="prix">Prix : 2.5 Dhs</h3>
<button href="#" class="btn btn-primary btn-lg btn-achat"><i class="fas fa-shopping-cart"></i></button>
</div>
</div>
<div class="card" style="width: 18rem; height: 500px;" id="card2">
<img src="img/yopro.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Yopro</h5>
<p class="card-text">Quantité : 90g</p>
<p class="card-text">Marques : Jaouda</p>
<p class="card-text">Lieux de fabrication: Taroudant</p>
<h3 class="prix">Prix : 2.5 Dhs</h3>
<button href="#" class="btn btn-primary btn-lg btn-achat"><i class="fas fa-shopping-cart"></i></button>
</div>
</div>
</section>
<!--================ Start footer Area =================-->
<footer class="footer">
<div class="footer-area">
<div class="container">
<div class="row section_gap">
<div class="col-lg-3 col-md-6 col-sm-6">
<div class="single-footer-widget tp_widgets">
<h4 class="footer_title large_title">Notre mission</h4>
<p>
Notre mission c'est de vous satisfere et de rendre vos courses beaucoup plus facile grace à notre site, plus besoin d'allez jusqu'à une grande surface pour faire vos courses, vous pouvez le faire ici sur notre site d'une manière assez facile !.
</p>
</div>
</div>
<div class="offset-lg-1 col-lg-2 col-md-6 col-sm-6">
<div class="single-footer-widget tp_widgets">
<h4 class="footer_title">Quick Links</h4>
<ul class="list">
<li>Home</li>
<li>Shop</li>
<li>Product</li>
<li>Brand</li>
<li>Contact</li>
</ul>
</div>
</div>
<div class="col-lg-2 col-md-6 col-sm-6">
<div class="single-footer-widget instafeed">
<h4 class="footer_title">Gallery</h4>
<ul class="list instafeed d-flex flex-wrap">
<li><img src="img/gallery/r1.jpg" alt=""></li>
<li><img src="img/gallery/r2.jpg" alt=""></li>
<li><img src="img/gallery/r3.jpg" alt=""></li>
<li><img src="img/gallery/r5.jpg" alt=""></li>
<li><img src="img/gallery/r7.jpg" alt=""></li>
<li><img src="img/gallery/r8.jpg" alt=""></li>
</ul>
</div>
</div>
<div class="offset-lg-1 col-lg-3 col-md-6 col-sm-6">
<div class="single-footer-widget tp_widgets">
<h4 class="footer_title">Contact Us</h4>
<div class="ml-40">
<p class="sm-head">
<span class="fa fa-location-arrow"></span>
Notre position
</p>
<p>Temara, hay el wifaq</p>
<p class="sm-head">
<span class="fa fa-phone"></span>
Numéro de téléphone
</p>
<p>
(+212) 06 33 26 39 43 <br>
</p>
<p class="sm-head">
<span class="fa fa-envelope"></span>
Notre email
</p>
<p>
nawfalbougrine#outlook.fr <br>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="footer-bottom">
<div class="container">
<div class="row d-flex">
<p class="col-lg-12 footer-text text-center">
<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
Copyright ©<script>document.write(new Date().getFullYear());</script> Droit d'auteur appartient à Mr.Nawfel Bougrine <i class="fa fa-heart" aria-hidden="true"></i>
<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. --></p>
</div>
</div>
</div>
</footer>
<!--================ End footer Area =================-->
<script src="vendors/jquery/jquery-3.2.1.min.js"></script>
<script src="vendors/bootstrap/bootstrap.bundle.min.js"></script>
<script src="vendors/skrollr.min.js"></script>
<script src="vendors/owl-carousel/owl.carousel.min.js"></script>
<script src="vendors/nice-select/jquery.nice-select.min.js"></script>
<script src="vendors/jquery.ajaxchimp.min.js"></script>
<script src="vendors/mail-script.js"></script>
<script src="js/main.js"></script>
</body>
</html>
and this is my css code :
#h1_all_product {
text-align: center;
font-size: 250%;
text-transform: uppercase;
color: #2a2b75;
}
.prix{
color: red;
font-size: 150%;
}
.btn-achat{
margin-left: 200px;
margin-bottom: 50px;
}
#card2{
margin-left: 300px;
margin-bottom: 300px;
}
Thank you in advance for your help !

You have to wrap and in a div
<div class="myClass">
<h3 class="prix">Prix : 2.5 Dhs</h3>
<button type="button" class="btn btn-primary">Primary</button>
</div>
and give it a class here in my demo i have given it name myClass and add following properties:
.myClass{
display:flex;
align-items: center;
justify-content: space-between;
}
Working demo:
Note : i don't have all you local images so i have only focussed on your requirement, so do scroll down and check checkout button alignment with price.
#h1_all_product {
text-align: center;
font-size: 250%;
text-transform: uppercase;
color: #2a2b75;
}
.prix{
color: red;
font-size: 150%;
}
.btn-achat{
margin-left: 200px;
margin-bottom: 50px;
}
#card2{
margin-left: 300px;
margin-bottom: 300px;
}
.myClass{
display:flex;
align-items: center;
justify-content: space-between;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Bougrine Shop - Home</title>
<link rel="icon" href="img/Fevicon.png" type="image/png">
<link rel="stylesheet" href="vendors/bootstrap/bootstrap.min.css">
<link rel="stylesheet" href="vendors/fontawesome/css/all.min.css">
<link rel="stylesheet" href="vendors/themify-icons/themify-icons.css">
<link rel="stylesheet" href="vendors/nice-select/nice-select.css">
<link rel="stylesheet" href="vendors/owl-carousel/owl.theme.default.min.css">
<link rel="stylesheet" href="vendors/owl-carousel/owl.carousel.min.css">
<link rel="stylesheet" href="./text.css">
<link rel="stylesheet" href="css/Css_acceuil_marjane.css">
</head>
<body>
<!--================ Start Header Menu Area =================-->
<header class="header_area">
<div class="main_menu">
<nav class="navbar navbar-expand-lg navbar-light">
<div class="container">
<a class="navbar-brand logo_h" href="#"><i class="fas fa-shopping-cart"></i> Bougrine</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="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse offset" id="navbarSupportedContent">
<ul class="nav navbar-nav menu_nav ml-auto mr-auto">
<li class="nav-item active"><a class="nav-link" href="index.html">Home</a></li>
<li class="nav-item submenu dropdown">
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">Shop</a>
<ul class="dropdown-menu">
<li class="nav-item"><a class="nav-link" href="category.html">Shop Category</a></li>
<li class="nav-item"><a class="nav-link" href="single-product.html">Product Details</a></li>
<li class="nav-item"><a class="nav-link" href="checkout.html">Product Checkout</a></li>
<li class="nav-item"><a class="nav-link" href="confirmation.html">Confirmation</a></li>
<li class="nav-item"><a class="nav-link" href="cart.html">Shopping Cart</a></li>
</ul>
</li>
<li class="nav-item submenu dropdown">
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">Pages</a>
<ul class="dropdown-menu">
<li class="nav-item"><a class="nav-link" href="login.html">Login</a></li>
<li class="nav-item"><a class="nav-link" href="register.html">Register</a></li>
<li class="nav-item"><a class="nav-link" href="tracking-order.html">Tracking</a></li>
</ul>
</li>
<li class="nav-item"><a class="nav-link" href="contact.html">Contact</a></li>
</ul>
<ul class="nav-shop">
<li class="nav-item"><button><i class="ti-search"></i></button></li>
<li class="nav-item"><button><i class="ti-shopping-cart"></i><span
class="nav-shop__circle">3</span></button> </li>
<li class="nav-item"><a class="button button-header" href="#">Buy Now</a></li>
</ul>
</div>
</div>
</nav>
</div>
</header>
<!--================ End Header Menu Area =================-->
<main class="site-main">
<!--================ Hero banner start =================-->
<section class="hero-banner">
<div class="container">
<div class="row no-gutters align-items-center pt-60px">
<div class="col-5 d-none d-sm-block">
<div class="hero-banner__img">
<img class="img-fluid" src="img/marjane.png" alt="">
</div>
</div>
<div class="col-sm-7 col-lg-6 offset-lg-1 pl-4 pl-md-5 pl-lg-0">
<div class="hero-banner__content">
<h4>Shop is fun</h4>
<h1>Parcourer tout les produits de marjane sur cette page !</h1>
<p>Notre site est là pour vous aidez a faire vos courses sur tout les grandes surfaces du maroc alors
profitez de nos belles offres !</p>
<a class="button button-hero" href="#">Browse Now</a>
</div>
</div>
</div>
</div>
</section>
<!--------------- all produit ------------>
<section id="section_all_produit">
<h1 id="h1_all_product">Voici tout les produits dans dispose notre magasin "Marjane"</h1>
<div class="card" style="width: 18rem; height: 500px;">
<img
src="data:image/jpeg;base64,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"
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Perly</h5>
<p class="card-text">Quantité : 90g</p>
<p class="card-text">Marques : Jaouda</p>
<p class="card-text">Lieux de fabrication: Taroudant</p>
<div class="myClass">
<h3 class="prix">Prix : 2.5 Dhs</h3>
<button type="button" class="btn btn-primary">Primary</button>
</div>
</div>
</div>
<div class="card" style="width: 18rem; height: 500px;" id="card2">
<img src="img/yopro.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Yopro</h5>
<p class="card-text">Quantité : 90g</p>
<p class="card-text">Marques : Jaouda</p>
<p class="card-text">Lieux de fabrication: Taroudant</p>
<h3 class="prix">Prix : 2.5 Dhs</h3>
<button href="#" class="btn btn-primary btn-lg btn-achat"><i class="fas fa-shopping-cart"></i></button>
</div>
</div>
</section>
<!--================ Start footer Area =================-->
<footer class="footer">
<div class="footer-area">
<div class="container">
<div class="row section_gap">
<div class="col-lg-3 col-md-6 col-sm-6">
<div class="single-footer-widget tp_widgets">
<h4 class="footer_title large_title">Notre mission</h4>
<p>
Notre mission c'est de vous satisfere et de rendre vos courses beaucoup plus facile grace à notre
site, plus besoin d'allez jusqu'à une grande surface pour faire vos courses, vous pouvez le faire ici
sur notre site d'une manière assez facile !.
</p>
</div>
</div>
<div class="offset-lg-1 col-lg-2 col-md-6 col-sm-6">
<div class="single-footer-widget tp_widgets">
<h4 class="footer_title">Quick Links</h4>
<ul class="list">
<li>Home</li>
<li>Shop</li>
<li>Product</li>
<li>Brand</li>
<li>Contact</li>
</ul>
</div>
</div>
<div class="col-lg-2 col-md-6 col-sm-6">
<div class="single-footer-widget instafeed">
<h4 class="footer_title">Gallery</h4>
<ul class="list instafeed d-flex flex-wrap">
<li><img src="img/gallery/r1.jpg" alt=""></li>
<li><img src="img/gallery/r2.jpg" alt=""></li>
<li><img src="img/gallery/r3.jpg" alt=""></li>
<li><img src="img/gallery/r5.jpg" alt=""></li>
<li><img src="img/gallery/r7.jpg" alt=""></li>
<li><img src="img/gallery/r8.jpg" alt=""></li>
</ul>
</div>
</div>
<div class="offset-lg-1 col-lg-3 col-md-6 col-sm-6">
<div class="single-footer-widget tp_widgets">
<h4 class="footer_title">Contact Us</h4>
<div class="ml-40">
<p class="sm-head">
<span class="fa fa-location-arrow"></span>
Notre position
</p>
<p>Temara, hay el wifaq</p>
<p class="sm-head">
<span class="fa fa-phone"></span>
Numéro de téléphone
</p>
<p>
(+212) 06 33 26 39 43 <br>
</p>
<p class="sm-head">
<span class="fa fa-envelope"></span>
Notre email
</p>
<p>
nawfalbougrine#outlook.fr <br>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="footer-bottom">
<div class="container">
<div class="row d-flex">
<p class="col-lg-12 footer-text text-center">
<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
Copyright ©
<script>document.write(new Date().getFullYear());</script> Droit d'auteur appartient à Mr.Nawfel Bougrine
<i class="fa fa-heart" aria-hidden="true"></i>
<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
</p>
</div>
</div>
</div>
</footer>
<!--================ End footer Area =================-->
<script src="vendors/jquery/jquery-3.2.1.min.js"></script>
<script src="vendors/bootstrap/bootstrap.bundle.min.js"></script>
<script src="vendors/skrollr.min.js"></script>
<script src="vendors/owl-carousel/owl.carousel.min.js"></script>
<script src="vendors/nice-select/jquery.nice-select.min.js"></script>
<script src="vendors/jquery.ajaxchimp.min.js"></script>
<script src="vendors/mail-script.js"></script>
<script src="js/main.js"></script>
</body>
</html>

you should add this line to your css file:
.prix {
color: red;
font-size: 150%;
display:inline-block
}
and delete this one:
.btn-achat {
/* margin-left: 200px; */
margin-bottom: 50px;
}

How to change position for a div who has class card

Good evening,
I am developing a website for online purchase.
i want my div down a little down for which aye the same positioning as any other class card div.
here is an image to better understand:
How can you see the div that contains the "yopro" and a little up not like the first.
here is my html code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Bougrine Shop - Home</title>
<link rel="icon" href="img/Fevicon.png" type="image/png">
<link rel="stylesheet" href="vendors/bootstrap/bootstrap.min.css">
<link rel="stylesheet" href="vendors/fontawesome/css/all.min.css">
<link rel="stylesheet" href="vendors/themify-icons/themify-icons.css">
<link rel="stylesheet" href="vendors/nice-select/nice-select.css">
<link rel="stylesheet" href="vendors/owl-carousel/owl.theme.default.min.css">
<link rel="stylesheet" href="vendors/owl-carousel/owl.carousel.min.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/Css_acceuil_marjane.css">
</head>
<body>
<!--================ Start Header Menu Area =================-->
<header class="header_area">
<div class="main_menu">
<nav class="navbar navbar-expand-lg navbar-light">
<div class="container">
<a class="navbar-brand logo_h" href="#"><i class="fas fa-shopping-cart"></i> Bougrine</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="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse offset" id="navbarSupportedContent">
<ul class="nav navbar-nav menu_nav ml-auto mr-auto">
<li class="nav-item active"><a class="nav-link" href="index.html">Home</a></li>
<li class="nav-item submenu dropdown">
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">Shop</a>
<ul class="dropdown-menu">
<li class="nav-item"><a class="nav-link" href="category.html">Shop Category</a></li>
<li class="nav-item"><a class="nav-link" href="single-product.html">Product Details</a></li>
<li class="nav-item"><a class="nav-link" href="checkout.html">Product Checkout</a></li>
<li class="nav-item"><a class="nav-link" href="confirmation.html">Confirmation</a></li>
<li class="nav-item"><a class="nav-link" href="cart.html">Shopping Cart</a></li>
</ul>
</li>
<li class="nav-item submenu dropdown">
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">Pages</a>
<ul class="dropdown-menu">
<li class="nav-item"><a class="nav-link" href="login.html">Login</a></li>
<li class="nav-item"><a class="nav-link" href="register.html">Register</a></li>
<li class="nav-item"><a class="nav-link" href="tracking-order.html">Tracking</a></li>
</ul>
</li>
<li class="nav-item"><a class="nav-link" href="contact.html">Contact</a></li>
</ul>
<ul class="nav-shop">
<li class="nav-item"><button><i class="ti-search"></i></button></li>
<li class="nav-item"><button><i class="ti-shopping-cart"></i><span class="nav-shop__circle">3</span></button> </li>
<li class="nav-item"><a class="button button-header" href="#">Buy Now</a></li>
</ul>
</div>
</div>
</nav>
</div>
</header>
<!--================ End Header Menu Area =================-->
<main class="site-main">
<!--================ Hero banner start =================-->
<section class="hero-banner">
<div class="container">
<div class="row no-gutters align-items-center pt-60px">
<div class="col-5 d-none d-sm-block">
<div class="hero-banner__img">
<img class="img-fluid" src="img/marjane.png" alt="">
</div>
</div>
<div class="col-sm-7 col-lg-6 offset-lg-1 pl-4 pl-md-5 pl-lg-0">
<div class="hero-banner__content">
<h4>Shop is fun</h4>
<h1>Parcourer tout les produits de marjane sur cette page !</h1>
<p>Notre site est là pour vous aidez a faire vos courses sur tout les grandes surfaces du maroc alors profitez de nos belles offres !</p>
<a class="button button-hero" href="#">Browse Now</a>
</div>
</div>
</div>
</div>
</section>
<!--------------- all produit ------------>
<section id="section_all_produit">
<h1 id="h1_all_product">Voici tout les produits dans dispose notre magasin "Marjane"</h1>
<div class="card cardcss" style="width: 18rem; height: 500px;">
<img src="img/perli.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Perly</h5>
<p class="card-text">Quantité : 90g</p>
<p class="card-text">Marques : Jaouda</p>
<p class="card-text">Lieux de fabrication: Taroudant</p>
<h3 class="prix" >Prix : 2.5 Dhs</h3>
<button href="#" class="btn btn-primary btn-lg btn-achat"><i class="fas fa-shopping-cart"></i></button>
</div>
</div>
<div class="card" style="width: 18rem; height: 530px;" id="card2">
<img src="img/yopro.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Yopro</h5>
<p class="card-text">Quantité : 90g</p>
<p class="card-text">Marques : Jaouda</p>
<p class="card-text">Lieux de fabrication: Taroudant</p>
<h3 class="prix">Prix : 2.5 Dhs</h3>
<button href="#" class="btn btn-primary btn-lg btn-achat"><i class="fas fa-shopping-cart"></i></button>
</div>
</div>
</section>
<!--================ Start footer Area =================-->
<footer class="footer">
<div class="footer-area">
<div class="container">
<div class="row section_gap">
<div class="col-lg-3 col-md-6 col-sm-6">
<div class="single-footer-widget tp_widgets">
<h4 class="footer_title large_title">Notre mission</h4>
<p>
Notre mission c'est de vous satisfere et de rendre vos courses beaucoup plus facile grace à notre site, plus besoin d'allez jusqu'à une grande surface pour faire vos courses, vous pouvez le faire ici sur notre site d'une manière assez facile !.
</p>
</div>
</div>
<div class="offset-lg-1 col-lg-2 col-md-6 col-sm-6">
<div class="single-footer-widget tp_widgets">
<h4 class="footer_title">Quick Links</h4>
<ul class="list">
<li>Home</li>
<li>Shop</li>
<li>Product</li>
<li>Brand</li>
<li>Contact</li>
</ul>
</div>
</div>
<div class="col-lg-2 col-md-6 col-sm-6">
<div class="single-footer-widget instafeed">
<h4 class="footer_title">Gallery</h4>
<ul class="list instafeed d-flex flex-wrap">
<li><img src="img/gallery/r1.jpg" alt=""></li>
<li><img src="img/gallery/r2.jpg" alt=""></li>
<li><img src="img/gallery/r3.jpg" alt=""></li>
<li><img src="img/gallery/r5.jpg" alt=""></li>
<li><img src="img/gallery/r7.jpg" alt=""></li>
<li><img src="img/gallery/r8.jpg" alt=""></li>
</ul>
</div>
</div>
<div class="offset-lg-1 col-lg-3 col-md-6 col-sm-6">
<div class="single-footer-widget tp_widgets">
<h4 class="footer_title">Contact Us</h4>
<div class="ml-40">
<p class="sm-head">
<span class="fa fa-location-arrow"></span>
Notre position
</p>
<p>Temara, hay el wifaq</p>
<p class="sm-head">
<span class="fa fa-phone"></span>
Numéro de téléphone
</p>
<p>
(+212) 06 33 26 39 43 <br>
</p>
<p class="sm-head">
<span class="fa fa-envelope"></span>
Notre email
</p>
<p>
nawfalbougrine#outlook.fr <br>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="footer-bottom">
<div class="container">
<div class="row d-flex">
<p class="col-lg-12 footer-text text-center">
<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
Copyright ©<script>document.write(new Date().getFullYear());</script> Droit d'auteur appartient à Mr.Nawfel Bougrine <i class="fa fa-heart" aria-hidden="true"></i>
<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. --></p>
</div>
</div>
</div>
</footer>
<!--================ End footer Area =================-->
<script src="vendors/jquery/jquery-3.2.1.min.js"></script>
<script src="vendors/bootstrap/bootstrap.bundle.min.js"></script>
<script src="vendors/skrollr.min.js"></script>
<script src="vendors/owl-carousel/owl.carousel.min.js"></script>
<script src="vendors/nice-select/jquery.nice-select.min.js"></script>
<script src="vendors/jquery.ajaxchimp.min.js"></script>
<script src="vendors/mail-script.js"></script>
<script src="js/main.js"></script>
</body>
</html>
and here is my css code:
#h1_all_product {
text-align: center;
font-size: 250%;
text-transform: uppercase;
color: #2a2b75;
}
.prix{
color: red;
font-size: 150%;
display:inline-block;
margin-right: 65px;
}
.btn-achat{
margin-bottom: 30px;
margin-top: 15px;
}
#card2{
display: inline-block;
}
.cardcss{
display: inline-block;
}
Thank you in advance for your help !

Give your images a fixed height and percentage width, and use object-fit: cover and object-position:center. Something like this:
img.card-img-top {
object-fit: cover;
width: 90%;
height: 300px;
object-position: center;
}
#h1_all_product {
text-align: center;
font-size: 2em;
text-transform: uppercase;
color: #2a2b75;
}
.prix {
color: red;
font-size: 150%;
display: inline-block;
margin-right: 65px;
}
.btn-achat {
margin-bottom: 30px;
margin-top: 15px;
}
#card2 {
display: inline-block;
}
.cardcss {
display: inline-block;
}
img.card-img-top {
object-fit: cover;
width: 90%;
height: 300px;
object-position: center;
}
<section id="section_all_produit">
<h1 id="h1_all_product">Voici tout les produits dans dispose notre magasin "Marjane"</h1>
<div class="card cardcss">
<img src="https://placekitten.com/300/600" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Perly</h5>
<p class="card-text">Quantité : 90g</p>
<p class="card-text">Marques : Jaouda</p>
<p class="card-text">Lieux de fabrication: Taroudant</p>
<h3 class="prix">Prix : 2.5 Dhs</h3>
<button href="#" class="btn btn-primary btn-lg btn-achat"><i class="fas fa-shopping-cart"></i></button>
</div>
</div>
<div class="card" id="card2">
<img src="https://placekitten.com/300/550" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Yopro</h5>
<p class="card-text">Quantité : 90g</p>
<p class="card-text">Marques : Jaouda</p>
<p class="card-text">Lieux de fabrication: Taroudant</p>
<h3 class="prix">Prix : 2.5 Dhs</h3>
<button href="#" class="btn btn-primary btn-lg btn-achat"><i class="fas fa-shopping-cart"></i></button>
</div>
</div>
</section>

Resize navbar in smaller screens and move it to the right

I Need help to move the navbar to the right side, since the row is not using all the width from the parent div (container).
Also I need to make the navbar resizable on smaller screens and when the button appears to show the hidden navbar, after click on it, displays the menu on right side (currently appearing on middle).
I have already tried to use the pl-5 ml-5 classes that bootstrap 4 provides to move the navbar, but it seems these classes don't solve the problem.
I have already checked that adding more content (text, links, li, etc.) inside those rows get bigger.
Current state of the website:
https://demos.posicionart.com/silleri/
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand-lg navbar-light bg-light pb-0">
<div class="container">
<div class="row">
<div class="col-4 col-lg-4 ml-0">
<a class="navbar-brand" href="#">
<img src="images/landing/silieri-logo-head.png" class="d-inline-block align-top" alt="Imagen Logo Header Silieri">
</a>
</div>
<div class="col-8 col-lg-8">
<div class="row">
<p class="text-right navbar-header-footer">
<b class="welcome-title-header">Qro.</b> (442) 223 6825 | (442) 183 055 | (442) 183 1940 | <b class="welcome-title-header">León</b> (447) 432 0949 <i class="fab fa-facebook fa-lg"></i> <i class="fab fa-whatsapp fa-lg"></i> CONTÁCTANOS
</p>
</div>
<div class="row">
<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 ml-auto mr-auto">
<li class="nav-item pb-1 pt-1 pl-2 pr-2">
<a class="nav-link" href="#">Proyectos</a>
</li>
<li class="nav-item pb-1 pt-1 pl-2 pr-2">
<a class="nav-link" href="#">Especiales</a>
</li>
<li class="nav-item pb-1 pt-1 pl-2 pr-2">
<a class="nav-link" href="#">Catálogo</a>
</li>
<li class="nav-item pb-1 pt-1 pl-2 pr-2">
<a class="nav-link" href="#">Guía</a>
</li>
<li class="nav-item pb-1 pt-1 pl-2 pr-2">
<a class="nav-link" href="#">Cotizador</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</nav>
I Just want to move the navbar to the right and make it responsive, since this is the first time that I'm using a navbar like this and not the default one that bootstrap 4 provides.

we can not use same structure everywhere so just replace your above code with the following code
HTML
<div class="container">
<div class="row">
<div class="col-sm-3">
<img src="images/landing/silieri-logo-head.png" class="d-inline-block align-top" alt="Imagen Logo Header Silieri">
</div>
<div class="col-sm-9">
<div class="row">
<div class="col-sm-12">
<ul class="top-navbar">
<li class=""><b class="welcome-title-header">Qro.</b> (442) 223 6825 | (442) 183 055 | (442) 183 1940</li>
<li class=""><b class="welcome-title-header">León</b> (447) 432 0949 <i class="fab fa-facebook fa-lg"></i></li>
<li class=""><i class="fab fa-whatsapp fa-lg"></i> CONTÁCTANOS</li>
</ul>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<nav class="navbar navbar-expand-lg navbar-light pb-0">
<button class="navbar-toggler ml-auto" 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 ml-auto">
<li class="nav-item pb-1 pt-1 pl-2 pr-2">
<a class="nav-link" href="#">Proyectos</a>
</li>
<li class="nav-item pb-1 pt-1 pl-2 pr-2">
<a class="nav-link" href="#">Especiales</a>
</li>
<li class="nav-item pb-1 pt-1 pl-2 pr-2">
<a class="nav-link" href="#">Catálogo</a>
</li>
<li class="nav-item pb-1 pt-1 pl-2 pr-2">
<a class="nav-link" href="#">Guía</a>
</li>
<li class="nav-item pb-1 pt-1 pl-2 pr-2">
<a class="nav-link" href="#">Cotizador</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
</div>
</div>
and CSS
.top-navbar {
list-style: none;
float: right;
}
.top-navbar li {
float: left;
}

There are many ways you can actually achieve this, I have added a class to the row and add css class as
.mobile-right {
justify-content: flex-end;
}
Here is the codepen link
https://codepen.io/sohebm/pen/MdxYQx
But I would suggest you, understand how Bootstrap grid layout works and responsive utilities

You could use the flex helpers provided by bootstrap especially justify-content-end to align the menu to the right and align-items-end to align the menu to the right in small screens as well as the ml-auto class to align the navbar toggler to the right.
See below :
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Silieri</title>
<meta name="description" content="Prueba Desc">
<meta name="keywords" content="Prueba, Prueba2">
<meta name="author" content="Posicionart">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/png" href="https://demos.posicionart.com/silleri/images/logosilieri.png">
<script src="https://demos.posicionart.com/silleri/js/landing/jquery-3.4.1.min.js"></script>
<script src="https://demos.posicionart.com/silleri/js/landing/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://demos.posicionart.com/silleri/css/landing/webfonts/all.min.css">
<link rel="stylesheet" type="text/css" href="https://demos.posicionart.com/silleri/css/landing/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://demos.posicionart.com/silleri/css/landing/styles.css">
</head>
<body><nav class="navbar navbar-expand-lg navbar-light bg-light pb-0">
<div class="container">
<div class="row">
<div class="col-4 col-lg-4 ml-0">
<a class="navbar-brand" href="#">
<img src="images/landing/silieri-logo-head.png" class="d-inline-block align-top" alt="Imagen Logo Header Silieri">
</a>
</div>
<div class="col-8 col-lg-8">
<div class="row">
<p class="text-right navbar-header-footer">
<b class="welcome-title-header">Qro.</b> (442) 223 6825 | (442) 183 055 | (442) 183 1940 | <b class="welcome-title-header">León</b> (447) 432 0949 <i class="fab fa-facebook fa-lg"></i> <i class="fab fa-whatsapp fa-lg"></i> CONTÁCTANOS
</p>
</div>
<div class="row">
<button class="ml-auto 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 justify-content-end" id="navbarSupportedContent">
<ul class="navbar-nav align-items-end">
<li class="nav-item pb-1 pt-1 pl-2 pr-2">
<a class="nav-link" href="#">Proyectos</a>
</li>
<li class="nav-item pb-1 pt-1 pl-2 pr-2">
<a class="nav-link" href="#">Especiales</a>
</li>
<li class="nav-item pb-1 pt-1 pl-2 pr-2">
<a class="nav-link" href="#">Catálogo</a>
</li>
<li class="nav-item pb-1 pt-1 pl-2 pr-2">
<a class="nav-link" href="#">Guía</a>
</li>
<li class="nav-item pb-1 pt-1 pl-2 pr-2">
<a class="nav-link" href="#">Cotizador</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</nav><section id="welcome">
<div class="jumbotron rounded-0 home-banner"></div>
</section>
<section id="main" class="container">
<div class="container">
<p class="main-title text-center">Podemos amueblar desde una oficina hasta <b class="welcome-title-header">UN CORPORATIVO</b></p>
<hr class="my-5 welcome-hr">
<p class="text-justify mb-5 welcome-message center-justified">
En Sileri nos especializamos en crear ambientes fucionales, cómodos y durables cuyo desarrollo va desde la planeación del proyecto hasta la entrega e instalación del mobiliario.
</p>
<div class="row">
<div class="col-md-4">
<img src="images/landing/banner-home-ambientes.jpg" class="main-image mb-3 img-fluid" alt="Imagen de Ambientes">
<div class="row">
<div class="col-md-2 pad-mar-0">
<div class="vr"> </div>
</div>
<div class="col-md-10 pr-5">
<h3 class="upper-letters welcome-title-card"><b class="primary-color">Ver</b> Ambientes</h3>
<p class="text-justify welcome-text-card">¿Tienes un proyecto grande en mente? Visita nuestra selección de ambientes para inspirarte. VER MÁS</p>
</div>
</div>
</div>
<div class="col-md-4">
<img src="images/landing/banner-home-catalogo.jpg" class="main-image mb-3 img-fluid" alt="Imagen de Cátalogo">
<div class="row">
<div class="col-md-2 pad-mar-0">
<div class="vr"> </div>
</div>
<div class="col-md-10 pr-5">
<h3 class="upper-letters welcome-title-card"><b class="primary-color">Ver</b> Catálogo</h3>
<p class="text-justify welcome-text-card">Encuentra piezas que funcionen, combinen y se adapten a tu proyecto y presupuesto. VER MÁS</p>
</div>
</div>
</div>
<div class="col-md-4">
<img src="images/landing/banner-home-asesoria.jpg" class="main-image mb-3 img-fluid" alt="Imagen de Asesorías">
<div class="row">
<div class="col-md-2 pad-mar-0">
<div class="vr"> </div>
</div>
<div class="col-md-10 pr-5">
<h3 class="upper-letters welcome-title-card"><b class="primary-color">Solicita</b> Asesoría</h3>
<p class="text-justify welcome-text-card">Si no sabes cuándo es el momento ideal para renovar un área de trabajo, toma el test y contáctanos. VER MÁS</p>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="muebles" class="container">
<div class="container">
<div id="muebles-row" class="row pt-5 mt-5">
<div class="col-md-8 pr-0">
<h1 id="title-muebles" class="upper-letters main-title">Muebles Especiales</h1>
<hr class="muebles-hr">
<div class="container pl-0">
<p class="text-justify">Existen dentro de las empresas áreas que demandan soluciones específicas en cuestión de funcionalidad, diseño y estética; si necesitas una solución integral para tu proyecto, podemos ayudarte.</p>
</div>
<a id="btn-conoce-mas-1" class="mt-4 rounded-0 pl-5 pr-5 btn btn-dark upper-letters" href="#">Conoce <span class="primary-color">más</span></a>
</div>
<div class="col-md-4 pl-0">
<img src="images/landing/banner-home-muebles-especiales.jpg" class="muebles-image img-fluid" alt="Imagen Sección de Muebles">
<a id="btn-conoce-mas-2" class="mt-4 rounded-0 pl-5 pr-5 btn btn-dark upper-letters" href="#">Conoce <span class="primary-color">más</span></a>
</div>
</div>
</div>
</section>
<section id="testimonios" class="container">
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="row">
<div class="col-lg-10">
<img id="imagen-testimonios-1" class="mt-5 pt-5 testimonials-image img-fluid" src="images/landing/home-testimonio-am.png" alt="Imagen Sección Testimonios">
</div>
<div class="col-lg-2">
<div class="vr-testimonios"> </div>
</div>
</div>
</div>
<div class="col-md-8">
<br>
<div class="container">
<h1 id="title-testimonios" class="upper-letters main-title">Testimonios</h1>
<img id="imagen-testimonios-2" class="mt-5 pt-5 testimonials-image img-fluid" src="images/landing/home-testimonio-am.png" alt="Imagen Sección Testimonios">
<blockquote class="blockquote">
<p class="text-justify text-testimonials">Después de trabajar con ellos en el equipamento de nuestro comedor ejecutivo y de las salas de juntas del corporativo, recomiendo apliamente a Silieri Koncept por su experiencia, profesionalismo y entusiasmo en el proyecto.</p>
<b>
<footer class="blockquote-footer">
Director de compras, <cite title="Source Title">AM Consultores</cite>
</footer>
</b>
</blockquote>
</div>
</div>
</div>
</div>
</section><br>
<footer class="footer">
<div class="container">
<div class="row">
<div class="col-3 col-md-3">
<br>
<div class="vr-footer-1"> </div>
<ul>
<li class="left">Proyectos</li>
<li class="left">Muebles Especiales</li>
<li class="left">Guía</li>
</ul>
</div>
<div class="col-3 col-md-3">
<br>
<div class="vr-footer-1"> </div>
<ul>
<li class="center">Catálogo</li>
<li class="center">Mesas y escritorios</li>
<li class="center">Sillas y sofás</li>
<li class="center">Recepciones</li>
<li class="center">Áreas de Guardado</li>
<li class="center">Escolares y Capacitación</li>
<li class="center">Muros Móviles</li>
</ul>
</div>
<div class="col-3 col-md-3">
<br>
<div class="vr-footer-1"> </div>
<ul>
<li>Contacto</li>
<li>
<p>
Oficina Matriz <br>
B. Quitana 208 <br>
Col. Carretas <br>
C.P 76050 <br>
Querétaro, Qro. MX.
</p>
</li>
<li>(442) 223 6825</li>
<li>(442) 183 0555</li>
<li>(442) 183 1940</li>
<br>
<li>
<p>
Oficina León <br>
(442) 432 0949
</p>
</li>
</ul>
</div>
<div class="col-3 col-md-3">
<br>
<ul class="footer-icons pb-5">
<li id="li-icons" class="mr-3 ml-3"><i class="fab fa-facebook fa-3x"></i></li>
<li id="li-icons" class="mr-3 ml-3 pb-4"><i class="fab fa-whatsapp fa-3x"></i></li>
</ul>
<ul id="ul-brand" class="mt-4 pt-4">
<li class="upper-letters">Silieri Koncept</li>
<li>
<p>
Muebles de oficina <br>
& proyectos integrales
</p>
</li>
</ul>
</div>
</div>
</div>
<br><br><br><br>
<div class="second-footer">
<div class="container">
<div class="row">
<div class="col-3 col-md-3">
<img src="images/landing/silieri-logo-footer.png" class="d-inline-block align-top pt-2 pb-2" alt="Imagen Logo Footer Silieri">
</div>
<div class="col-9 col-md-9">
<p class="text-right mt-4 upper-letters">
2019 &copy Silieri Koncept. Todos los derechos reservados. Consulte nuestro aviso de privacidad
</p>
</div>
</div>
</div>
</div>
</footer>
</body>
</html>

How to create timeline carousel with bootstrap with Lines and circles

I am creating timeline carousel as below.
So when we click on next or prev button it should move to next archive year and next archive panel.
For example if I click 2018, the 2018 circle should be highlighted and 2018 panel should be shown below.
Here's what I have tried but I couldn't create as expected.
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active">2019</li>
<li data-target="#carousel-example-generic" data-slide-to="1">2018</li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<!--<div class="box"></div>-->
<!--<div class="carousel-caption">
<h3>First Text</h3>
</div>-->
<div class="panel-group" id="accordion">
<!-- First Panel -->
<div class="panel panel-default">
<div class="panel-heading heading-background">
<h4 class="panel-title" style="cursor:pointer;" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true">
2019
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
<p>
Archive 1
</p>
</div>
</div>
</div>
</div>
</div>
<div class="item">
<!--<div class="box"></div>
<div class="carousel-caption">
<h3>Second Text</h3>
</div>-->
<div class="panel-group" id="accordion">
<!-- First Panel -->
<div class="panel panel-default">
<div class="panel-heading heading-background">
<h4 class="panel-title" style="cursor:pointer;" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="true">
2018
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse in">
<div class="panel-body">
<p>
Archive 2
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" data-target="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" data-target="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div> <!-- Carousel -->
CSS
.heading-background {
background-color: rgba(45,175,220,0.8) !important; /* Sample Blue 2*/
}
/*Carousel Start*/
.carousel-indicators .active {
background-color: orange;
}
.carousel-indicators li {
border: 1px solid black;
}
.carousel-control {
width:5%;
}
/*Carousel End*/

Here is below example which you want.. Please have a look... :)
also check this link :
https://www.codeply.com/go/tBbcVXe1xZ
#myCarousel .list-inline {
white-space:nowrap;
overflow-x:auto;
}
#myCarousel .carousel-indicators {
position: static;
left: initial;
width: initial;
margin-left: initial;
}
#myCarousel .carousel-indicators > li {
width: initial;
height: initial;
text-indent: initial;
}
#myCarousel .carousel-indicators > li.active img {
opacity: 0.7;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<div class="container">
<!-- main slider carousel -->
<div class="row">
<div class="col-lg-8 offset-lg-2" id="slider">
<div id="myCarousel" class="carousel slide">
<!-- main slider carousel nav controls -->
<ul class="carousel-indicators list-inline">
<li class="list-inline-item active">
<a id="carousel-selector-0" class="selected" data-slide-to="0" data-target="#myCarousel">
<img src="http://placehold.it/80x60&text=one" class="img-fluid">
</a>
</li>
<li class="list-inline-item">
<a id="carousel-selector-1" data-slide-to="1" data-target="#myCarousel">
<img src="http://placehold.it/80x60&text=two" class="img-fluid">
</a>
</li>
<li class="list-inline-item">
<a id="carousel-selector-2" data-slide-to="2" data-target="#myCarousel">
<img src="http://placehold.it/80x60&text=three" class="img-fluid">
</a>
</li>
<li class="list-inline-item">
<a id="carousel-selector-3" data-slide-to="3" data-target="#myCarousel">
<img src="http://placehold.it/80x60&text=four" class="img-fluid">
</a>
</li>
<li class="list-inline-item">
<a id="carousel-selector-4" data-slide-to="4" data-target="#myCarousel">
<img src="http://placehold.it/80x60&text=five" class="img-fluid">
</a>
</li>
<li class="list-inline-item">
<a id="carousel-selector-5" data-slide-to="5" data-target="#myCarousel">
<img src="http://placehold.it/80x60&text=six" class="img-fluid">
</a>
</li>
<li class="list-inline-item">
<a id="carousel-selector-6" data-slide-to="6" data-target="#myCarousel">
<img src="http://placehold.it/80x60&text=seven" class="img-fluid">
</a>
</li>
<li class="list-inline-item">
<a id="carousel-selector-7" data-slide-to="7" data-target="#myCarousel">
<img src="http://placehold.it/80x60&text=eight" class="img-fluid">
</a>
</li>
</ul>
<!-- main slider carousel items -->
<div class="carousel-inner">
<div class="active item carousel-item" data-slide-number="0">
<img src="http://placehold.it/1200x480&text=one" class="img-fluid">
</div>
<div class="item carousel-item" data-slide-number="1">
<img src="http://placehold.it/1200x480/888/FFF" class="img-fluid">
</div>
<div class="item carousel-item" data-slide-number="2">
<img src="http://placehold.it/1200x480&text=three" class="img-fluid">
</div>
<div class="item carousel-item" data-slide-number="3">
<img src="http://placehold.it/1200x480&text=four" class="img-fluid">
</div>
<div class="item carousel-item" data-slide-number="4">
<img src="http://placehold.it/1200x480&text=five" class="img-fluid">
</div>
<div class="item carousel-item" data-slide-number="5">
<img src="http://placehold.it/1200x480&text=six" class="img-fluid">
</div>
<div class="item carousel-item" data-slide-number="6">
<img src="http://placehold.it/1200x480&text=seven" class="img-fluid">
</div>
<div class="item carousel-item" data-slide-number="7">
<img src="http://placehold.it/1200x480&text=eight" class="img-fluid">
</div>
<a class="carousel-control left pt-3" href="#myCarousel" data-slide="prev"><i class="fa fa-chevron-left"></i></a>
<a class="carousel-control right pt-3" href="#myCarousel" data-slide="next"><i class="fa fa-chevron-right"></i></a>
</div>
</div>
</div>
</div>
<!--/main slider carousel-->
<!-- Optional JavaScript -->
<!-- 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.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>