Im using Twitter Bootstrap 3 for my HTML site, but the navigation is always collapsed. It looks very bad when i open it in my normal browser, on my mobile-phone it looks good. How can not make the navigation bar collapsing by default?
<div class="navbar navbar-inverse navbar-fixtop" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- Hierin wordt het logo van de site weergeven, de tekst is te vervangen door een plaatje als dat gewenst is.-->
<a class="navbar-brand" href="#"></a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<!-- Hierin worden de menu items opgehaald die je hierboven benoemt hebt, ook wordt er active toegevoegt aan het geselecteerde linkje.-->
<li class="">
Hoofdmenu
Mijn Beschikbaarheid
Openstaande Zorgvragen
Mijn inschrijvingen
Mijn Care Assists
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
In the following link is my code;
http://pastebin.com/hApriu50
You have put all of your links under single li which is wrong. Try following code.
Demo Fiddle
<div class="navbar navbar-inverse navbar-fixtop" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- Hierin wordt het logo van de site weergeven, de tekst is te vervangen door een plaatje als dat gewenst is.--> <a class="navbar-brand" href="#">Standby Thuiszorg</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<!-- Hierin worden de menu items opgehaald die je hierboven benoemt hebt, ook wordt er active toegevoegt aan het geselecteerde linkje.-->
<li class="">Hoofdmenu
</li>
<li>Mijn Beschikbaarheid
</li>
<li>Openstaande Zorgvragen
</li>
<li>Mijn inschrijvingen
</li>
<li>Mijn Care Assists
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
The navbar-nav markup is incorrect. It should look like..
<ul class="nav navbar-nav">
<li class="">Hoofdmenu</li>
<li>Mijn Beschikbaarheid</li>
<li>Openstaande Zorgvragen</li>
<li>Mijn inschrijvingen</li>
<li>Mijn Care Assists</li>
</ul>
Bootply
Related
I'm now on the point i want to open my window and dump my pc. I used the footer template from the tutorial of bootstrap.
It looks fine, but when my text is longer than one page, my footer stays on that location and goed not under the text like it shoud be.
I just want that when my page is longer, my footer stays on the end of the page. Not all my pages are gonne be this small. So please send some help :)
how it seems to work
how its not working
.dropdown-toggle::after {
display: none;
}
.text-decoration-none {
text-decoration: none!important;
}
/* Font Awesome Icons have variable width. Added fixed width to fix that.*/
.icon-width {
width: 2rem;
}
nav .active a {
color: black;
font-weight: 600;
}
nav {
font-weight: bree, sans-serif;
}
.bg-world {
background-image: url('../img/bg-1.png');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
height: 90vh;
}
.padding {
padding: 10rem;
}
.box-land {
background: rgb(245, 245, 245);
background: linear-gradient(143deg, rgba(245, 245, 245, 0.8547794117647058) 49%, rgba(203, 186, 186, 1) 100%);
border-radius: 20px;
border: 3px solid black;
padding: 1rem;
}
.box-land h2 {
margin-bottom: 2rem;
}
.box-land img {
width: 100%;
margin-bottom: 1rem
}
.footer {
height: 3rem;
}
#media screen and (max-width: 1000px) {
.footer {
display: none !important;
}
}
.footer img {
height: 2rem;
width: auto;
margin-left: 100%;
margin-right: 0;
}
.footer .copyright {
margin-top: 0.25rem;
margin-left: 1rem;
}
.bg-strech {
height: 90vh;
}
.bd-placeholder-img {
background-image: url("../img/bg-1.png");
}
.card-img-info {
width: 100%;
height: 100%;
object-fit: cover;
}
<!doctype htms>
<htms lang="en">
<head>
<meta charset="UTF-8">
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://kit.fontawesome.com/f47aba7ed6.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="assets/css-js/style-main.css">
<title>Document</title>
</head>
<body class="d-flex flex-column min-vh-100">
<header class="d-flex justify-content-center py-3">
<nav class="navbar navbar-expand-lg navbar-light shadow-sm bg-light fixed-top">
<div class="container">
<a class="navbar-brand d-flex align-items-center" href="#">
<img src="assets/img/Logo_COW_Balk.png" alt="logo" width="100">
</a>
<button class="navbar-toggler navbar-toggler-right border-0" type="button" data-toggle="collapse" data-target="#navbar4">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar4">
<ul class="navbar-nav me-auto pl-lg-4">
<li class="nav-item px-lg-2">
<a class="nav-link" href="index.html"> <span class="d-inline-block d-lg-none icon-width"><i class="fas fa-home"></i></span>Home</a>
</li>
<li class="nav-item px-lg-2 active"><a class="nav-link" href="info.html"><span
class="d-inline-block d-lg-none icon-width"><i class="fas fa-spa"></i></span>Info</a>
</li>
<li class="nav-item px-lg-2"><a class="nav-link" href="#"><span
class="d-inline-block d-lg-none icon-width"><i class="far fa-user"></i></i></span>Legende</a>
</li>
<li class="nav-item px-lg-2 dropdown d-menu">
<a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span
class="d-inline-block d-lg-none icon-width"><i class="far fa-caret-square-down"></i></span>Dropdown
<svg id="arrow" xmsns="http://www.w3.org/2000/svg" width="14" height="14"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round">
<polyline points="6 9 12 15 18 9"></polyline>
</svg>
</a>
<div class="dropdown-menu shadow-sm sm-menu" aria-labelledby="dropdown01">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item px-lg-2"><a class="nav-link" href="#"><span
class="d-inline-block d-lg-none icon-width"><i class="far fa-envelope"></i></span>Contact</a>
</li>
</ul>
<ul class="navbar-nav ms-auto mt-3 mt-lg-0">
<li class="nav-item">
<a class="nav-link" href="#">
<i class="fab fa-twitter"></i><span class="d-lg-none ms-3">Twitter</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<i class="fab fa-facebook"></i><span class="d-lg-none ms-3">Facebook</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<i class="fab fa-instagram"></i><span class="d-lg-none ms-3">Instagram</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<i class="fab fa-linkedin"></i><span class="d-lg-none ms-3">Linkedin</span>
</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<main class="flex-fill">
<div class="text-center text-blue bg-strech">
<div class="container py-5 align-items-center">
<div class="row justify-content-center h-90 flex-grow-1">
<div class="card p-3 mb-4">
<figure class="p-3 mb-0">
<blockquote class="blockquote">
<p>Dit idee is ontstaan omdat ik interesse begon te krijgen in staatkunde en de administratieve onderverdeling van België. Ik zocht een kaart waar alle gemeenten opstonden met hun subdivisies, maar ik vond geen makkelijk toegankelijke kaart,
daarom ben ik op pad gegaan om zo'n kaart te maken met mijn kennis van grafisch ontwerpen en coderen. Het nut van de website is dat alle geïnteresseerden op één plaats terecht komen waar alles te vinden is. Dit is zowel voor oud als
jong. Zo kunnen mensen ook meer bewust worden van hun omgeving en land.</p>
<p>Ik kan dit natuurlijk niet alleen daarom zoek ik contact op met elke gemeente in België om info te vragen over hun gemeenten zoals: wat is de onderverdeling, waar liggen de grenzen, etc... Van veel gemeenten heb ik feedback gekregen
en dit helpt het proces te versnellen om het project af te werken. Ik doe dit alleen en op eigen initiatief daarom ben ik dankbaar voor alle mensen de mij willen sponseren en steunen in dit avontuur. Dank aan jullie allemaal.</p>
</blockquote>
<figcaption class="blockquote-footer mb-0 text-muted">
Achilles Gossaert (16) uit Roeselare
</figcaption>
</figure>
</div>
</div>
</div>
</div>
</main>
<footer class="footer mt-auto py-3 bg-light">
<div class="container">
<div class="row justify-content-center">
<div class="col-md-1 justify-content-right">
<img src="./assets/img/footer-img.png" alt="Achilles Gossaert" title="Argentum">
</div>
<div class="col-md-4 copyright">
<p class="mb-0">©
<script>
document.write(/\d{4}/.exec(Date())[0])
</script>
COW. · Privacy · Terms</p>
</div>
<div class="col-md-4 copyright text-end">
<p>Design by Online Development</p>
</div>
</div>
</div>
</footer>
<script src="assets/css-js/nav.js"></script>
</body>
</htms>
You need to give bg-strech a min-hieght: 90vh instead of height: 90vh so it grows if the content is so big.
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;
}
I was working on a landing page when I try to shrink my page everything works fine beside the header file the text goes off the screen. I wonder if somebody can inlight on this problem.
I haven't use any js code yet.
.stage {
background: url(img/Header/living-room-1517166_1920.jpg) center center no-repeat;
background-size: cover;
color: white;
height: 100%;
width: 100%;
display: flex;
align-items: center;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<!--Nav bar-->
<nav class="navbar navbar-expand-md navbar-light bg-light sticky-top navbar-fixed-top">
<a class="navbar-brand" href="#">Wijkveiligheid</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Thuis <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Promo video</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Vergelijk</a>
</li>
<li class="nav-item">
<a class="btn btn_primary" href="#">Login</a>
</li>
</ul>
</div>
</nav>
<div class="stage" id="stage">
<div id="stage-caption">
<h1 class="display-3">Uw veiligheid is onze prioriteit</h1>
<p class="HeaderP">Wij van wijkveiligheid kijken altijd hoe we het woongenot van onze medemens kunnen verbeteren en optimaliseren. Onze professionele adviseurs staan klaar om samen met u te kijken hoe uw huis ook optimaal beveiligd kan worden en klaar is voor de toekomst.</p>
</div>
</div>
I fix the problem by adding max width of 500px and then change font-size to 0.9rem.
#media screen and (max-width : 500px) {
.HeaderP{
display: flex;
align-items: center;
font-size: 0.9rem;
}
}
So in this navbar i've 2 dropdowns. One is when you are looking at the site on mobile the other is a dropdown. but these don't work. I've looked 2 hours for a solution but nothing yet...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0">
<title>Index</title>
<script src="scripts/jquery.js"></script>
<script src="scripts\bootstrap.js"></script>
<link href="css\bootstrap.css" rel="stylesheet">
<link href="Styles\main.css rel="stylesheet">
</head>
<body>
<!--Aanmaken van een navigatiebar -->
<div class="navbar navbar-default navbar-static-top">
<div class="container">
Van Beeck Telecom
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>Webshop</li>
<li class="dropdown">
Contact
<ul class="dropdown-menu">
<li>Openingsuren</li>
<li>Route</li>
<li>Contactforumlier</li>
<li>Facebook</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div>
Lorem Ipsum is slechts een proeftekst uit het drukkerij- en zetterijwezen. Lorem Ipsum is de standaard proeftekst in deze bedrijfstak sinds de 16e eeuw, toen een onbekende drukker een zethaak met letters nam en ze door elkaar husselde om een font-catalogus te maken. Het heeft niet alleen vijf eeuwen overleefd maar is ook, vrijwel onveranderd, overgenomen in elektronische letterzetting. Het is in de jaren '60 populair geworden met de introductie van Letraset vellen met Lorem Ipsum passage
</div>
</body>
</html>
make sure that you load the bootstrap.min.js...
add a line of code like this in the templates footer
<script src="js/bootstrap.min.js"></script>
make sure that the bootstrap.min.js file is in the js folder.
UPDATE
your code should look like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0">
<title>Index</title>
<script src="scripts/jquery.js"></script>
<script src="scripts/bootstrap.js"></script>
<link href="css/bootstrap.css" rel="stylesheet">
<link href="Styles/main.css rel="stylesheet">
</head>
<body>
<!--Aanmaken van een navigatiebar -->
<div class="navbar navbar-default navbar-static-top">
<div class="container">
Van Beeck Telecom
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>Webshop</li>
<li class="dropdown">
Contact
<ul class="dropdown-menu">
<li>Openingsuren</li>
<li>Route</li>
<li>Contactforumlier</li>
<li>Facebook</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div>
Lorem Ipsum is slechts een proeftekst uit het drukkerij- en zetterijwezen. Lorem Ipsum is de standaard proeftekst in deze bedrijfstak sinds de 16e eeuw, toen een onbekende drukker een zethaak met letters nam en ze door elkaar husselde om een font-catalogus te maken. Het heeft niet alleen vijf eeuwen overleefd maar is ook, vrijwel onveranderd, overgenomen in elektronische letterzetting. Het is in de jaren '60 populair geworden met de introductie van Letraset vellen met Lorem Ipsum passage
</div>
</body>
</html>
<script src="scripts\bootstrap.js"></script>
in your code you have wrong sign, type it like bottom here:
<script src="scripts/bootstrap.js"></script>
Your code is correct (and it works in my computer) so I assume the problem is within the javascript files. To test if this is the case, replace the script and link tags with the following:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
rel="stylesheet">
Then, one by one, change the external CDN to your local file, discovering when the problem occurs.
Alternatively, in Google Chrome, you can right-click anywhere in the page and select Inspect. Then in the Developer Tools, select the tab Console. Check if it shows something like this:
Failed to load resource: net::ERR_FILE_NOT_FOUND
This indicates the script file is not being loaded.
Lastly, you might have the javascript execution disabled in your browser. You can find this in the settings.
I have a problem with navbar in mobile version of site. I'm using bootstrap.
In mobile version, I'm using a collapsed navbar, not in the foreground but in the background (on the screen). When I have slider before, the collapsed menu was behind this slider.
<body>
<div class="container">
<!-- facebook & phone number -->
<div class="row face-phone">
<div class="pull-left">
<a href="index.html">
<img src="images/logo_new.png" alt="logotype" class="logotype" />
</a>
</div>
<div class="pull-right face-text">
<span class="small">
TEL: +48 605 26 33 99 <span class="mar-left-20"></span>ul. Podgórna 43a / 2 Zielona Góra
</span>
<a href="https://www.facebook.com/Newbello-Salon-Depilacji-i-Kosmetologii-Laserowej-288363824707329/" target="_blank">
<span class="glyphicon glyphicon-thumbs-up mar-left-20" area-hidden="true"></span>
</a>
</div>
</div>
</div>
<!-- ./row logotype, facebook, phone number -->
<!-- navigation -->
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2">
<ul class="nav navbar-nav">
<li class="active">Link <span class="sr-only">(current)</span></li>
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
</ul>
</div>
</div>
</nav>
<!-- Page Content -->
<hr>
<div class="row">
<div class="newbello">
<p class="pull-left">
Witamy na stronie naszego salonu kosmetycznego
</p>
</div>
</div><!-- ./row hello-text -->
<hr>
<div class="row mar-top-20">
<div class="col-md-12 col-sm-6 col-xs-12 text-center">
<p>
<strong>
Naszym priorytetem jest profesjonalna obsługa i najwyższej jakości zabiegi
</strong>
Wszystkie kosmetyki i urządzenia, które wprowadzamy do naszej
oferty przechodzą liczne testy i są poddawane gruntownej analizie
efektywności i bezpieczeństwa stosowania.
<strong>
Stawiamy przede wszystkim na skuteczność!
</strong>.
Do każdego klienta podchodzimy indywidualnie, służymy radą i
pomocą w dobraniu odpowiednich zabiegów gabinetowych oraz
profesjonalnej i kompleksowej pielęgnacji domowej.
</p>
<h3 class="mar-top-40">
W czym jesteśmy najlepsi?
</h3>
<h4 class="mar-top-40">
Deppilacja laserowa, depilacja SHR i nie tylko
</h4>
<p class="mar-top-40">
Depilacją zajmujemy się nieprzerwanie od ponad 5 lat.
Dzięki setkom osób, którym w tym czasie mieliśmy przyjemność
pomóc, zgromadziliśmy szeroką wiedzę dotyczącą diagnostyki
skóry i wyboru odpowiedniej metody depilacji. Nasze ogromne
doświadczenie pozwala nam znacznie zredukować ryzyko
podrażnień, bólu i innych nieprzyjemnych odczuć związanych z
usuwaniem zbędnego owłosienia.
</p>
<h4 class="mar-top-40">
Odmładzanie i zabiegi pielęgnacyjne
</h4>
<p class="mar-top-40">
Dzisiejszy trend piękna to dbałość o wygląd zewnętrzny.
Dlatego skutecznie odmładzany koszystając z najnowszych odkryć
medycyny, kosmetologii, chemii i techniki oraz wykorzystując
zabiegi oparte na najlepszej jakości kosmetykach. Takie
działanie gwarantuje zarówno wysoką skuteczność zabiegu, ale
także komfort i co najważniejsze bezpieczeństwo naszych klientów.
</p>
</div><!-- ./col -->
</div>
<!-- ./row mar-top-20 -->
<!-- Core Javascript -->
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="js/bootstrap.js"></script>
</body>
And this is screenshot what is it look like:
screenshot
Now fix it, please update following External Resources / Bootstrap CDN
jsfiddle
http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css
https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js
http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<body>
<div class="container">
<!-- facebook & phone number -->
<div class="row face-phone">
<div class="pull-left">
<a href="index.html">
<img src="images/logo_new.png" alt="logotype" class="logotype" />
</a>
</div>
<div class="pull-right face-text">
<span class="small">
TEL: +48 605 26 33 99 <span class="mar-left-20"></span>ul. Podgórna 43a / 2 Zielona Góra
</span>
<a href="https://www.facebook.com/Newbello-Salon-Depilacji-i-Kosmetologii-Laserowej-288363824707329/" target="_blank">
<span class="glyphicon glyphicon-thumbs-up mar-left-20" area-hidden="true"></span>
</a>
</div>
</div>
</div>
<!-- ./row logotype, facebook, phone number -->
<!-- navigation -->
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2">
<ul class="nav navbar-nav">
<li class="active">Link <span class="sr-only">(current)</span></li>
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
</ul>
</div>
</div>
</nav>
<!-- Page Content -->
<hr>
<div class="row">
<div class="newbello">
<p class="pull-left">
Witamy na stronie naszego salonu kosmetycznego
</p>
</div>
</div><!-- ./row hello-text -->
<hr>
<div class="row mar-top-20">
<div class="col-md-12 col-sm-6 col-xs-12 text-center">
<p>
<strong>
Naszym priorytetem jest profesjonalna obsługa i najwyższej jakości zabiegi
</strong>
Wszystkie kosmetyki i urządzenia, które wprowadzamy do naszej
oferty przechodzą liczne testy i są poddawane gruntownej analizie
efektywności i bezpieczeństwa stosowania.
<strong>
Stawiamy przede wszystkim na skuteczność!
</strong>.
Do każdego klienta podchodzimy indywidualnie, służymy radą i
pomocą w dobraniu odpowiednich zabiegów gabinetowych oraz
profesjonalnej i kompleksowej pielęgnacji domowej.
</p>
<h3 class="mar-top-40">
W czym jesteśmy najlepsi?
</h3>
<h4 class="mar-top-40">
Deppilacja laserowa, depilacja SHR i nie tylko
</h4>
<p class="mar-top-40">
Depilacją zajmujemy się nieprzerwanie od ponad 5 lat.
Dzięki setkom osób, którym w tym czasie mieliśmy przyjemność
pomóc, zgromadziliśmy szeroką wiedzę dotyczącą diagnostyki
skóry i wyboru odpowiedniej metody depilacji. Nasze ogromne
doświadczenie pozwala nam znacznie zredukować ryzyko
podrażnień, bólu i innych nieprzyjemnych odczuć związanych z
usuwaniem zbędnego owłosienia.
</p>
<h4 class="mar-top-40">
Odmładzanie i zabiegi pielęgnacyjne
</h4>
<p class="mar-top-40">
Dzisiejszy trend piękna to dbałość o wygląd zewnętrzny.
Dlatego skutecznie odmładzany koszystając z najnowszych odkryć
medycyny, kosmetologii, chemii i techniki oraz wykorzystując
zabiegi oparte na najlepszej jakości kosmetykach. Takie
działanie gwarantuje zarówno wysoką skuteczność zabiegu, ale
także komfort i co najważniejsze bezpieczeństwo naszych klientów.
</p>
</div><!-- ./col -->
</div>
<!-- ./row mar-top-20 -->
<!-- Core Javascript -->
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="js/bootstrap.js"></script>
</body>