navbar link color

  1. MDB Home Page
  2. Support Main Page
  3. MDB jQuery
Topic: navbar link color

Falkangen pro asked 7 years ago

Is it possible in style.css to change navbar link color when scrolling down to .top-nav-collapse?

Jakub Strebeyko staff answered 7 years ago

Hi there Falkangen,

Sure, why not? The scrolling navbar script checks the top offset distance, and once it is longer than particular OFFSET_TOP value (50 by default), it simply applies a .top-nav-collapse class (which consists of a smaller vertical padding CSS rule) to a .scrolling-navbar element.

It means that you can define your own rules for whenever the .top-nav-collapse class is applied. Because the elements in navbar are heavily nested, though, it is necessary to make sure you indeed overwrite all the other text color rules in this cascading nesting, so the selectors should look something like this:

.navbar.navbar-dark.top-nav-collapse .navbar-nav .nav-item .nav-link {
    color: red;
}

Best,
Kuba

Falkangen pro commented 7 years ago

Thank you!

Jakub Strebeyko staff commented 7 years ago

My pleasure. :)

kashan.mehmood13 commented 6 years ago

Thanks.

Jakub Strebeyko staff commented 6 years ago

Thanks to you! You guys make the effort worthwhile! <3 Cheers, Kuba

LAGIER pro premium priority answered 7 years ago

1153/5000
Hello, I also have a problem with the color of the nav-bar links that I want to replace. The template is the one: "half-page-carousel index". I tried the solution you gave by including in a CSS style sheet the following code: .navbar.navbar-dark.top-nav-collapse .navbar-nav .nav-item .nav-link { color: red; } The problem is that the color of the links remain white while I want them of another color. The (.nav-link {color: red;}, does not work? I see that: "<li class =" nav-item "> <a class="nav-link" href="#"> Features </a> </ li>, the color of the nav-link remains white, despite the style of the .nav-link css sheet {color: red; }. which is defined in MDB PRO 4.5.2 .navbar .navbar-dark.breadcrumb.nav-item. nav-link rgba (255,255,255, .75) it's the same for the navlink: hover color: #fff How to change to have a different color in transparent background, and after the scrolling-navbar a white background with ex links: red Thank you for your support, it's been 3 days that I test without reaching the final solution. 
Start your code here: 
Watch for please: 
<li class="nav-item">
 <a class="nav-link" href="#">Features</a>
 </li>
---------------------------------------------------------------------
<!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 http-equiv="x-ua-compatible" content="ie=edge"> <title>Material Design Bootstrap</title> <!-- Font Awesome --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <!-- Bootstrap core CSS --> <!-- Material Design Bootstrap --> <!-- Template styles --> <style rel="stylesheet"> /* TEMPLATE STYLES */ /* Necessary for full page carousel*/ html, body { height: 100%; } /* Navigation*/ .navbar { background-color: transparent; } .top-nav-collapse { background-color: #929FBA; }

.navbar.navbar-dark.top-nav-collapse .navbar-nav .nav-item .nav-link { color: red; }

footer.page-footer { background-color: #929FBA; } @media only screen and (max-width: 768px) { .navbar { background-color: #929FBA; } } .scrolling-navbar { -webkit-transition: background .5s ease-in-out, padding .5s ease-in-out; -moz-transition: background .5s ease-in-out, padding .5s ease-in-out; transition: background .5s ease-in-out, padding .5s ease-in-out; } /* Carousel*/ .carousel { height: 50%; } @media (max-width: 776px) { .carousel { height: 100%; } } .carousel-item, .active { height: 100%; } .carousel-inner { height: 100%; } /*Caption*/ .flex-center { color: #fff; } .navbar .btn-group .dropdown-menu a:hover { color: #000 !important; } .navbar .btn-group .dropdown-menu a:active { color: #fff !important; } </style> <link href="../css/bootstrap.min.css" rel="stylesheet" type="text/css"> <link href="../css/mdb.min.css" rel="stylesheet" type="text/css"> </head> <body> <!--Navbar--> <nav class="navbar navbar-expand-lg navbar-dark fixed-top scrolling-navbar"> <div class="container"> <a class="navbar-brand" href="#">Navbar</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="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav mr-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="#">Features</a> </li>

<li class="nav-item">

<a class="nav-link" href="#">Pricing</a> </li>

<li class="nav-item btn-group"> <a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown </a> <div class="dropdown-menu dropdown-primary" aria-labelledby="navbarDropdownMenuLink"> <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> </ul> <form class="form-inline"> <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search"> </form> </div> </div> </nav> <!--/.Navbar--> <!--Carousel Wrapper--> <div id="carousel-example-3" class="carousel slide carousel-fade white-text" data-ride="carousel" data-interval="5000"> <!--Indicators--> <ol class="carousel-indicators"> <li data-target="#carousel-example-3" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-3" data-slide-to="1"></li> <li data-target="#carousel-example-3" data-slide-to="2"></li> </ol> <!--/.Indicators--> <!--Slides--> <div class="carousel-inner" role="listbox"> <!-- First slide --> <div class="carousel-item active view hm-black-light" style="background-image: url('https://mdbootstrap.com/img/Photos/Others/images/47.jpg'); background-repeat: no-repeat; background-size: cover;"> <!-- Caption --> <div class="full-bg-img flex-center white-text"> <ul class="animated fadeIn col-md-12"> <li> <h1 class="h1-responsive font-bold">20 Photos to inspire you to visit Tatra Mountains</h1> </li> <li> <p>Best places you should see, traditional dishes that you have to try</p> </li> <li> <a target="_blank" href="https://mdbootstrap.com/getting-started/" class="btn btn-outline-white" rel="nofollow">See more!</a> </li> </ul> </div> <!-- /.Caption --> </div> <!--/.First slide--> <!-- Second slide --> <div class="carousel-item view hm-black-light" style="background-image: url('https://mdbootstrap.com/img/Photos/Others/images/77.jpg'); background-repeat: no-repeat; background-size: cover;"> <!-- Caption --> <div class="full-bg-img flex-center white-text"> <ul class="animated fadeIn col-md-12"> <li> <h1 class="h1-responsive font-bold">10 Reasons you should spend winter holiday in mountains </h1> </li> <li> <p>Best atractions and winter sports!</p> </li> <li> <a target="_blank" href="https://mdbootstrap.com/bootstrap-tutorial/" class="btn btn-outline-white" rel="nofollow">Read more</a> </li> </ul> </div> <!-- /.Caption --> </div> <!--/.Second slide --> <!-- Third slide --> <div class="carousel-item view hm-black-slight" style="background-image: url('https://mdbootstrap.com/img/Photos/Others/nature7.jpg'); background-repeat: no-repeat; background-size: cover;"> <!-- Caption --> <div class="full-bg-img flex-center white-text"> <ul class="animated fadeIn col-md-12"> <li> <h1 class="h1-responsive font-bold">Weekend in the nature - the best way to relax</h1> </li> <li> <p>8 Reasons why you need to spend more time in nature</p> </li> <li> <a target="_blank" href="https://mdbootstrap.com/forums/forum/support/" class="btn btn-outline-white" rel="nofollow">Read more</a> </li> </ul> </div> <!-- /.Caption --> </div> <!--/.Third slide--> </div> <!--/.Slides--> <!--Controls--> <a class="carousel-control-prev" href="#carousel-example-3" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#carousel-example-3" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> <!--/.Controls--> </div> <!--/.Carousel Wrapper--> <br> <!--Content--> <div class="container"> <!-- Section: About --> <section class="section about mb-5" id="about"> <!-- Secion heading --> <h1 class="text-center font-bold mt-5 pt-2 mb-3 dark-grey-text wow fadeIn" data-wow-delay="0.2s"> <em>About us</em> </h1> <!-- Section description --> <p class="text-center font-up font-bold grey-text mb-5 pb-4 wow fadeIn" data-wow-delay="0.2s">Tourism students with love to travel</p> <!-- Grid row --> <div class="row"> <!-- Column column --> <div class="col-xl-5 mr-auto mb-r col-lg-6 wow fadeIn" data-wow-delay="0.4s"> <!-- Image --> <img src="https://mdbootstrap.com/img/Photos/Others/images/53.jpg" class="img-fluid rounded z-depth-1-half" alt="My photo"> </div> <!-- Column column --> <!-- Grid column column --> <div class="col-xl-6 col-lg-6 wow fadeIn" data-wow-delay="0.4s"> <!-- Description --> <p align="justify">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo animi soluta ratione quisquam, dicta ab cupiditate iure eaque? Repellendus voluptatum, magni impedit eaque animi maxime.</p> <p align="justify">Nemo animi soluta ratione quisquam, dicta ab cupiditate iure eaque? Repellendus voluptatum, magni impedit eaque delectus, beatae maxime temporibus maiores quibusdam quasi rem magnam.</p> <ul> <li>Nemo animi soluta ratione</li> <li>Beatae maxime temporibus</li> <li>Consectetur adipisicing elit</li> </ul> </div> <!-- Grid column --> </div> <!-- Grid row --> </section> <!-- Section: About --> <hr> <div class="row my-5 py-4"> <!--First columnn--> <div class="col-lg-4"> <!--Card--> <div class="card wow fadeIn" data-wow-delay="0.2s"> <!--Card image--> <img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Others/images/49.jpg" alt="Card image cap"> <!--Card content--> <div class="card-body"> <!--Title--> <h4 class="card-title">Mesmerizing Landscapes</h4> <!--Text--> <p class="card-text mb-4">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a href="#" class="font-bold">Read more</a> </div> </div> <!--/.Card--> </div> <!--First columnn--> <!--Second columnn--> <div class="col-lg-4"> <!--Card--> <div class="card wow fadeIn" data-wow-delay="0.4s"> <!--Card image--> <img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Others/images/48.jpg" alt="Card image cap"> <!--Card content--> <div class="card-body"> <!--Title--> <h4 class="card-title">Top 5 holiday's places</h4> <!--Text--> <p class="card-text mb-4">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a href="#" class="font-bold">Read more</a> </div> </div> <!--/.Card--> </div> <!--Second columnn--> <!--Third columnn--> <div class="col-lg-4 mb-4"> <!--Card--> <div class="card wow fadeIn" data-wow-delay="0.6s"> <!--Card image--> <img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Others/images/29.jpg" alt="Card image cap"> <!--Card content--> <div class="card-body"> <!--Title--> <h4 class="card-title">Mountain Rivers</h4> <!--Text--> <p class="card-text mb-4">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a href="#" class="font-bold">Read more</a> </div> </div> <!--/.Card--> </div> <!--Third columnn--> </div> </div> <!--/.Content--> <!--Footer--> <footer class="page-footer center-on-small-only mdb-color lighten-3"> <!--Footer Links--> <div class="container"> <div class="row"> <!--First column--> <div class="col-lg-3 col-md-6"> <h5 class="title font-bold mt-3 mb-4">ABOUT MATERIAL DESIGN</h5> <p>Material Design for Bootstrap (MDB) is a powerful Material Design UI KIT for most popular HTML, CSS, and JS framework - Bootstrap.</p> </div> <!--/.First column--> <hr class="w-100 clearfix d-sm-none"> <!--Second column--> <div class="col-lg-2 col-md-6 ml-auto"> <h5 class="title font-bold mt-3 mb-4">Recent Trips</h5> <ul> <li> <a href="#!">Balkans</a> </li> <li> <a href="#!">Tatra Mountains</a> </li> <li> <a href="#!">Norway Fjords</a> </li> <li> <a href="#!">Baikal Lake</a> </li> </ul> </div> <!--/.Second column--> <hr class="w-100 clearfix d-sm-none"> <!--Third column--> <div class="col-lg-2 col-md-6 ml-auto"> <h5 class="title font-bold mt-3 mb-4">My guest articles</h5> <ul> <li> <a href="#!">"Things I learn on the road"</a> </li> <li> <a href="#!">"Low-budget traveling made simple"</a> </li> <li> <a href="#!">"Talking with locals"</a> </li> <li> <a href="#!">"Leaving things behind"</a> </li> </ul> </div> <!--/.Third column--> <hr class="w-100 clearfix d-sm-none"> <!--Fourth column--> <div class="col-lg-2 col-md-6 ml-auto"> <h5 class="title font-bold mt-3 mb-4">Follow me on</h5> <ul> <li> <a href="#!">Facebook</a> </li> <li> <a href="#!">Instagram</a> </li> <li> <a href="#!">Twitter</a> </li> <li> <a href="#!">Pinterest</a> </li> </ul> </div> <!--/.Fourth column--> </div> </div> <!--/.Footer Links--> <!--Copyright--> <div class="footer-copyright"> <div class="container-fluid"> © 2015 Copyright: <a href="https://www.MDBootstrap.com"> MDBootstrap.com </a> </div> </div> <!--/.Copyright--> </footer> <!--/.Footer--> <!-- SCRIPTS --> <!-- JQuery --> <script type="text/javascript" src="js/jquery-3.1.1.min.js"></script> <!-- Bootstrap dropdown --> <script type="text/javascript" src="js/popper.min.js"></script> <!-- Bootstrap core JavaScript --> <script type="text/javascript" src="js/bootstrap.min.js"></script> <!-- MDB core JavaScript --> <script type="text/javascript" src="js/mdb.min.js"></script> <script> new WOW().init(); </script> </body> </html>

Josip Tomašev pro premium priority commented 7 years ago

Hi LAGIER, As Jakub wrote, css is correct, but spaces between classes are important in this snippet, so you must copy and paste this css without changes. .navbar.navbar-dark.top-nav-collapse .navbar-nav .nav-item .nav-link { color: red; } For mouseover css, you can write: .navbar.navbar-dark.top-nav-collapse .navbar-nav .nav-item .nav-link:hover { color: green; } Greetings Josip

LAGIER pro premium priority answered 7 years ago

Hello Josip, Super it works !!!!!!

A big thank you for your help that makes me a great service.

My hair will stop falling by triturating my brain in every way. Thanks again and have a nice day Alain

LAGIER pro premium priority answered 7 years ago

Hi Josip, I went too fast ... For navbar links it's OK. When the page is for 800X600 mobiles, the Navbar Toggle is white and blends in with the background color which is also white. I tried with CSS and JS to change the color of the Toggle, but I'm stuck. I tried several modes from this css, but it does not work: .navbar .navbar-toggler .icon-bar { background-color: indigo! important; } Do you still have a solution to offer me. Thanks again. Alain

LAGIER pro premium priority answered 7 years ago

Dear Josip, The problem with the Toogle of the previous message is less important. I'm having another problem with the navbar for MEGAMENU For my site I use the MEGAMENU and the problem is with the "COLLAPSE and FIXED-TOP". Trouble only with mobiles and tablets: Responsive The "FIXED-TOP" function of the navbar prevents you from seeing the collapse information entirely, whereas if you can scroll the scroll of the page, but it is hidden behind the MEGAMENU div. <nav class = "navbar navbar-expand-lg navbar-dark fixed-top scrolling-navbar"> To see the example here is the link of the Index-MDB page. https://www.ialpes.com/index-MDB.html A link at the bottom of the home page of the site, under Info, click on MDB to access the "index-MDB.html " page, to see the problem live. I removed "fixed-top" and "scrolling-navbar" on the normal page for visitors. With thanks Alain

Josip Tomašev pro premium priority commented 7 years ago

Hi I see what is your problem, and only what I can suggest you is to use something like this css: @media (max-width: 992px) { .fixed-top { position: absolute; background-color: #7283A7 !important; } } or second posibility (add after .top-nav-collapse{} in your css: @media (max-width: 992px) { .top-nav-collapse { position: absolute; top: 50; } } Navbar will stay on top of page, over image, and then scroll your entire navbar with page   Greetings Josip  

LAGIER pro premium priority answered 7 years ago

Hello Josip Sorry to have been a bit long to answer, but I tested the solution on different page templates, and the first solution you gave me is perfect. I made several page templates from MDB templates: half-carousel, landing-page, corporate, etc ... everything is fine. I have only one problem, it is with the breadcrumb on the model MDB Jumbotron
On my pages I place a breadcrumb, and only on the model MDB Jumbotron, the breadcrumb passes under the Header.
I tried putting the Breadcrumb in a container, a section, div, put marging at a css "space", I can not place this breadcrumb under the nav-bar. Voci the link of the test page:
https://www.ialpes.com/MDB-Jumbotron.html,  and in the footer, under info, there is an MDB Jumbotron link to the page.
I thank you for your invaluable help.

LAGIER pro premium priority commented 7 years ago

Sorry, I forgot to put the code of the page.. He is in the page after,

LAGIER pro premium priority answered 7 years ago

    <!DOCTYPE html><html lang="fr"><!-- InstanceBegin template="/Templates/MDB-Jumbotron.dwt" codeOutsideHTMLIsLocked="false" --><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><meta http-equiv="x-ua-compatible" content="ie=edge"><!-- InstanceBeginEditable name="doctitle" --> <title>Evénements incontournables des Alpes, iAlpes</title> <meta name="description" content="agenda guide des evenements touristiques de France Italie et Suisse"><meta name="keywords" content="evenements agenda manifestations, tourisme, france, spectacles, festivals, concerts, guide voyages, suisse, geneve, italie, turin, aoste, haute-savoie, vaud, lausanne, zermatt"><!-- InstanceEndEditable --> <link rel="canonical" href="https://www.ialpes.com/"> <meta name="author" content="iAlpes"> <link href="css/bootstrap.min.css" rel="stylesheet"> <link href="css/mdb.min.css" rel="stylesheet"> <link href="css/mega-menu.css" rel="stylesheet" type="text/css">
<style> /* CSS DIRECT CUSTOM-JUMBOTRON: link href="../css/custom-jumbotron.css */
.espace{margin-bottom: 10px;margin-top: 20px;}
#TopUp{display:none;position:fixed;bottom:20px;right:30px;z-index:99;font-size:18px;border:0;outline:0;background-color:red;color:white;cursor:pointer;padding:15px;border-radius:4px} #TopUp:hover{background-color:#555}
html, body { height: 100%; }
/* Navigation*/
.navbar { background-color: transparent; }
.top-nav-collapse { background-color: #929FBA; } @media (max-width: 992px) { .fixed-top { position: absolute; background-color: #7283A7 !important; } } footer.page-footer { background-color: #929FBA; }
@media only screen and (max-width: 768px) { .navbar { background-color: #929FBA; } }
</style>
<!--   <link href="../css/custom-jumbotron.css" rel="stylesheet" type="text/css">   --> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous"> <link rel="canonical" href="https://www.ialpes.com/"> <link type="image/x-icon" href="favicon.ico" rel="icon" /> <link rel="shortcut icon" href="favicon.png"> <link href="css/compact-gallery.css" rel="stylesheet" type="text/css"> <link href="css/baguetteBox.min.css" rel="stylesheet" type="text/css"><meta name="verification" content="07f6b8bde20c92386dbb703e5125c3e4" /> <meta name="google-translate-customization" content="b13f29d11dfc1d4f-a6dc6c2b51557f39-g060889771d97c34f-e"> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <script> (adsbygoogle = window.adsbygoogle || []).push({ google_ad_client: "ca-pub-4451249417804546", enable_page_level_ads: true }); </script><script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script></head> <body> <!--HEADER --> <!-- InstanceBeginEditable name="EditHeader" -->

<header>

<!--NAVBAR -->

<nav class="navbar navbar-expand-lg fixed-top navbar-dark mdb-color lighten-2"> <a class="navbar-brand" href="https://www.ialpes.com"> iALPES <img src="img/icon/logo_navbar.png" height="30" class="d-inline-block align-top" alt="logo iAlpes.com"></a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent1" aria-controls="navbarSupportedContent1" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button> <div class="collapse navbar-collapse" id="navbarSupportedContent1"> <ul class="navbar-nav mr-auto"> <li class="nav-item dropdown mega-dropdown active"><a class="nav-link dropdown-toggle text-uppercase no-caret" id="navbarDropdownMenuLink1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Découvrir</a> <div class="dropdown-menu mega-menu v-2 row z-depth-1 special-color" aria-labelledby="navbarDropdownMenuLink1"> <div class="row mx-md-4 mx-1"> <div class="col-md-6 col-lg-3 sub-menu my-lg-5 my-4"> <h6 class="sub-title text-uppercase font-weight-bold white-text">France</h6> <ul class="caret-style pl-0"> <li class=""><a href="visite/visite-ain-rhone-alpes.html" title="Découverte du département de l'Ain, Rhône-Alpes" class="menu-item">Ain</a></li> <li class=""><a href="visite/visite-isere-rhone-alpes.html" title="Découverte de l'Isère, Rhône-Alpes" class="menu-item">Isère</a></li> <li class=""><a href="visite/visite-jura-bourgogne-franche-comte.html" title="Découverte du Jura, Bourgnogne-Franche Comté" class="menu-item">Jura</a></li> <li class=""><a href="visite/visite-haute-savoie-rhone-alpes.html" title="Découverte de la Haute-Savoie, Rhône-Alpes" class="menu-item">Haute-Savoie</a></li> <li class=""><a href="visite/visite-haute-savoie-rhone-alpes.html" title="Découvrir la Savoie, Rhône-Alpes" class="menu-item">Savoie</a></li> </ul> </div> <div class="col-md-6 col-lg-3 sub-menu my-lg-5 my-4"> <h6 class="sub-title text-uppercase font-weight-bold white-text">Italie</h6> <ul class="caret-style pl-0"> <li class=""><a href="visite/visite-region-piemont-italie.html" title="Tourisme en Région Piémont, Italie" class="menu-item">Piémont</a></li> <li class=""><a href="visite/visite-vallee-d-aoste-italie.html" title="Tourisme en Vallée d'Aoste, Italie" class="menu-item">Val d'Aoste</a></li> </ul> </div> <div class="col-md-6 col-lg-3 sub-menu my-lg-5 my-4"> <h6 class="sub-title text-uppercase font-weight-bold white-text">Suisse</h6> <ul class="caret-style pl-0"> <li class=""><a href="visite/visite-geneve-suisse-alpes.html" title="Découverte du canton de genève, Suisse" class="menu-item">Genève</a></li> <li class=""><a href="visite/visite-canton-du-valais-alpes-suisse.html" title="Découverte canton du Valais, Suisse" class="menu-item">Valais</a></li> <li class=""><a href="visite/visite-canton-de-vaud-suisse.html" title="Découverte du Canton de Vaud, Suisse" class="menu-item">Vaud</a></li> </ul> </div> <div class="col-md-6 col-lg-3 sub-menu my-lg-5 my-4"> <h6 class="sub-title text-uppercase font-weight-bold white-text">Tourisme</h6> <ul class="caret-style pl-0"> <li class=""><a href="visite/sites-incontournables.html" title="Visites incontournables des Alpes" class="menu-item">Visites incontournables</a></li> <li class=""><a href="visite/city-tours-alpes.html" title="Visite des Villes incontournables des Alpes" class="menu-item">City Tours</a></li> <li class=""><a href="events/evenements-incontournables.html" title="Evénements incontournables dans les Alpes" class="menu-item">Evénements</a></li> <li class=""><a href="activite/activites-et-loisirs-alpes.html" title="Activités et loisirs dans les Alpes" class="menu-item">Activités & Loisirs</a></li> <li class=""><a href="events/spectacles.html" title="Spectacles en France, Suisse et Italie" class="menu-item">Spectacles</a></li> <li class=""><a href="travels/sejours-et-voyages.html" title="Voyages et séjours en France, Suisse et Italie" class="menu-item">Envie d'Ailleurs</a></li> </ul> </div> </div> </div> </li> <li class="nav-item dropdown mega-dropdown"> <a class="nav-link dropdown-toggle text-uppercase no-caret" id="navbarDropdownMenuLink1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Organiser</a> <div class="dropdown-menu mega-menu v-2 row z-depth-1 special-color" aria-labelledby="navbarDropdownMenuLink1"> <div class="row mx-md-4 mx-1"> <div class="col-md-12 col-lg d-none d-lg-block sub-menu mt-5 mb-4"> <h6 class="sub-title text-uppercase font-weight-bold white-text">En Montagne</h6> <div class="view overlay hm-white-slight mb-3 z-depth-0"><img src="img/photos/ski_valais.jpg" class="img-fluid" alt="Eggishorn, Suisse"><a class="news-title-2 pl-0" href="">Prenez de l'altitude</a> <p class="font-small text-uppercase white-text">Et Respirez !</p> <div class="mask flex-center"> <p></p> </div> </div> </div> <div class="col-md-4 col-lg-3 sub-menu my-lg-5 my-4"> <h6 class="sub-title text-uppercase font-weight-bold white-text">Hôtelerie</h6> <ul class="caret-style pl-0"> <li class=""><a href="sejour/hebergements-des-alpes.html" title="Hébergements dans les Alpes" class="menu-item">Hébergements</a></li> <li class=""><a href="sejour/hotels-alpes-france.html" title="Réserver un hôtels dans les Alpes" class="menu-item">Hôtels</a></li> <li class=""><a href="sejour/hotels-alpes-france.html" title="Hôtels en France" class="menu-item">Hôtels en France</a></li> <li class=""><a href="sejour/hotels-alpes-italie.html" title="Hôtels en Italie" class="menu-item">Hôtels en Italie</a></li> <li class=""><a href="sejour/hotels-alpes-suisse.html" title="Hôtels en Suisse" class="menu-item">Hôtels en Suisse</a></li> </ul> </div> <div class="col-md-4 col-lg-3 sub-menu my-lg-5 my-4"> <h6 class="sub-title text-uppercase font-weight-bold white-text">Autres</h6> <ul class="caret-style pl-0"> <li class=""><a href="sejour/complexes-hoteliers.html" title="Hôte-Club pour groupes et familles" class="menu-item">Complexes hôteliers</a></li> <li class=""><a href="sejour/chambres-d-hotes.html" title="Réserver une chambre d'hôte" class="menu-item">Chambres d'hôtes</a></li> <li class=""><a href="sejour/locations-vacances.html" title="Rechercher une location de vacances" class="menu-item">Locations</a></li> <li class=""><a href="sejour/villas-de-vacances.html" title="Louer une villa de vacances" class="menu-item">Villas ou Chalets</a></li> </ul> </div> <div class="col-md-4 col-lg-3 sub-menu my-lg-5 my-4"> <h6 class="sub-title text-uppercase font-weight-bold white-text">Activités</h6> <ul class="caret-style pl-0"> <li class=""><a href="activite/stations-de-ski.html" title="Stations de ski dans les Alpes" class="menu-item">Stations de ski</a></li> <li class=""><a href="activite/terrain-de-golf.html" title="Terrains de golf dans les Alpes" class="menu-item">Golf</a></li> <li class=""><a href="activite/chemin-de-randonnee.html" title="La randonnée dans les Alpes" class="menu-item">Circuits de randonnée</a></li> <li class=""><a href="activite/thermes-et-balneo.html" title="Thermes et Spa aqualudique des Alpes" class="menu-item">Thermes et Balnéo</a></li> <li class=""><a href="travels/parcs-de-loisirs.html" title="Parcs de loisirs France Suisse et Italie" class="menu-item">Parcs de Loisirs</a></li> <li class=""><a href="travels/parcs-animaliers-zoos.html" title="Parcs animaliers et zoos" class="menu-item">Parcs & Zoos</a></li> </ul> </div> </div> </div> </li> <li class="nav-item dropdown mega-dropdown"><a class="nav-link dropdown-toggle text-uppercase no-caret" id="navbarDropdownMenuLink1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Evénements</a> <div class="dropdown-menu mega-menu v-2 row z-depth-1 special-color" aria-labelledby="navbarDropdownMenuLink1"> <div class="row mx-md-4 mx-1"> <div class="col-md-4 col-lg-3 sub-menu my-lg-5 my-4"> <h6 class="sub-title text-uppercase font-weight-bold white-text">Programme</h6> <ul class="caret-style pl-0"> <li class=""><a href="travels/fete-lac-annecy.html" title="Fête du lac d'Annecy, Haute-Savoie" class="menu-item mb-0">Fête du lac d'Annecy</a></li> <li class=""><a class="menu-item" href="travels/festival-jazz-vienne.html">Vienne Jazz Festival</a></li> <li class=""><a href="travels/grand-bivouac-albertville.html" title="Le Grand Bivouac, Albertville, Savoie" class="menu-item">Le Grand Bivouac</a></li> <li class=""><a href="travels/festival-jazz-montreux.html" title="Festival Jazz de Montreux, Suisse" class="menu-item">Montreux Jazz Festival</a></li> <li class=""><a href="travels/village-des-flottins.html" title="Le Fabuleux village des flottins, Evian-les-Bains" class="menu-item">Le Fabuleux Village</a></li> </ul> </div> <div class="col-md-12 col-lg d-none d-lg-block sub-menu mt-5 mb-4"> <h6 class="sub-title text-uppercase font-weight-bold white-text">Technologie</h6> <div class="view overlay hm-white-slight mb-3 z-depth-0"><img src="img/portfolio-01.jpg" class="img-fluid" alt="First sample image"> <h3 class="mb-2"><a class="news-title-2 pl-0" href="">Salon Automobile de Genève</a></h3> <p class="font-small text-uppercase white-text"><i class="fa fa-clock-o pr-2" aria-hidden="true"></i>Mars 7 au 17, 2019 <i class="fa fa-comments-o px-1" aria-hidden="true"></i></p> <div class="mask flex-center"> <p></p> </div> </div> </div> <div class="col-md-4 col-lg-3 sub-menu my-lg-5 my-4"> <h6 class="sub-title text-uppercase font-weight-bold white-text">Tradition</h6> <div class="view overlay hm-white-slight mb-3 z-depth-0"><img src="img/portfolio-02.jpg" class="img-fluid" alt="First sample image"> <h3 class="mb-2"><a class="news-title-2 pl-0" href="">Foire de Saint Ours-Aoste</a></h3> <p class="font-small text-uppercase white-text"><i class="fa fa-clock-o pr-2" aria-hidden="true"></i>Janvier 30 & 31 2019 <i class="fa fa-comments-o px-1" aria-hidden="true"></i></p> <div class="mask flex-center"> <p></p> </div> </div> </div> <div class="col-md-4 col-lg-3 sub-menu my-lg-5 my-4"> <h6 class="sub-title text-uppercase font-weight-bold white-text">Loisirs</h6> <ul class="caret-style pl-0"> <li class=""><a href="travels/swiss-vapeur-parc.html" title="Swiss Vapeur Parc au Bouveret, Suisse" class="menu-item">Swiss Vapeur Parc</a></li> <li class=""><a href="travels/zoom-torino.html" title="Parc animalier et plage africaine à Turin, Italie" class="menu-item">Zoom Torino</a></li> <li class=""><a href="travels/parc-des-oiseaux.html" title="Parc des oiseaux, Viilars-les-Dombes, Ain" class="menu-item">Parc des Oiseaux</a></li> <li class=""><a href="travels/parc-walibi.html" title="Parc Walibi Rhône-Alpes" class="menu-item">Parc Walibi</a></li> <li class=""><a href="travels/juraparc-vallorbes.html" title="Juaraparc de Vallorbe, Suisse" class="menu-item">Juraparc</a></li> </ul> </div> </div> </div> </li> <li class="nav-item"><a class="nav-link" href="#Gallery">Galerie</a></li> <li class="nav-item"><a class="nav-link" href="#likePage"><span style="color:#f48260;">♥</span> Et Aussi</a></li> </ul> <form class="form-inline my-2 my-lg-0"> <div class="input-group input-group-sm"> <button type="button" class="btn btn-sm btn-primary" data-toggle="modal" data-target="#siteiAlpes">Nos Sites</button> </div> </form> </div> </nav>

<!-- /NAVBAR -->

</header> <!-- InstanceEndEditable --><!-- /HEADER --> <hr>

<!-- NAV BREADCRUMBS -->

<!-- InstanceBeginEditable name="EditBreadcrumb" --> <nav class="breadcrumb-item"> <ol class="breadcrumb"> <li class="breadcrumb-item"><a itemprop="url" href="index.html" title="i-Alpes tourisme et patrimoine">Home</a></li> <li class="breadcrumb-item"><a itemprop="url" href="sejour/hebergements-des-alpes.html" title="Les hébergements dans les Alpes France Italie et Suisse">Hébergements</a></li> <li class="breadcrumb-item active">Hébergements</li> </ol>

<!-- / BREADCRUMBS -->

<!-- GOOGLE SEARCH --> <div class="col-sm-4 espace"> <script> (function() { var cx = 'partner-pub-4451249417804546:5980782802'; var gcse = document.createElement('script'); gcse.type = 'text/javascript'; gcse.async = true; gcse.src = 'https://cse.google.com/cse.js?cx=' + cx; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(gcse, s); })(); </script> <gcse:searchbox-only></gcse:searchbox-only> </div> <!--/ GOOGLE SEARCH --> </nav> <!-- InstanceEndEditable --><!-- /NAV BREADCRUMBS --> <!-- MODAL --> <div id="siteiAlpes" class="modal fade" role="dialog"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal">&times;</button><h4 class="modal-title">Destinations les Alpes...</h4></div><div class="modal-body"><div class="container-fluid"><div class="row"><div class="col"><figure class="figure"><a href="http://ain.ialpes.com"><img src="img/icon/logo_ain.gif" class="img-fluid" width="73" height="80" alt="Logo Pays de l'Ain tourisme, Rhône-Alpes"></a><figcaption class="figure-caption text-center"><a href="http://ain.ialpes.com"></a><a href="http://ain.ialpes.com" title="Ain tourisme, Rhône-Alpes"><strong>Ain</strong></a></figcaption> </figure></div><div class="col"><figure class="figure"><a href="http://isere.ialpes.com"><img src="img/icon/logo_isere.jpg" class="img-fluid" width="73" height="80" alt="Logo Isère tourisme, Rhône-Alpes"></a><figcaption class="figure-caption text-center"><a href="http://isere.ialpes.com"></a><a href="http://isere.ialpes.com" title="Isère tourisme, Rhône-Alpes"><strong>Isère</strong></a></figcaption></figure></div><div class="col"><figure class="figure"><a href="http://jura.ialpes.com"><img src="img/icon/logo_jura.jpg" class="img-fluid" width="73" height="80" alt="Logo Jura tourisme, Rhône-Alpes" longdesc="http://jura.ialpes.com"></a><figcaption class="figure-caption text-center"><a href="http://jura.ialpes.com"></a><a href="http://jura.ialpes.com" title="Jura tourisme, France"><strong>Jura</strong></a></figcaption></figure></div><div class="col"><figure class="figure"><a href="http://savoie.ialpes.com"><img src="img/icon/logo_savoie.jpg" class="img-fluid" width="80" height="80" alt="Logo Savoie tourisme, Rhône-Alpes"></a><figcaption class="figure-caption text-center"><a href="http://savoie.ialpes.com"></a><a href="http://savoie.ialpes.com" title="Savoie tourisme, Rhône-Alpes"><strong>Savoie</strong></a></figcaption></figure></div></div><hr><div class="row"><div class="col"><figure class="figure"><a href="http://haute-savoie.ialpes.com"><img src="img/icon/logo_haute_savoie.jpg" class="img-fluid" width="80" height="80" alt="Logo Haute-Savoie tourisme, Rhône-Alpes"></a><figcaption class="figure-caption text-center"><a href="http://haute-savoie.ialpes.com"></a><a href="http://haute-savoie.ialpes.com" title="Haute-Savoie tourisme, Rhône-Alpes"><strong>Haute-Savoie</strong></a></figcaption></figure></div><div class="col"><figure class="figure"><a href="http://geneve.ialpes.com"><img src="img/icon/logo_geneve.jpg" class="img-fluid" width="80" height="80" alt="Logo Genève tourisme, Suisse"></a><figcaption class="figure-caption text-center"><a href="http://geneve.ialpes.com"></a><a href="http://geneve.ialpes.com" title="Genève tourisme, Suisse"><strong>Genève</strong></a></figcaption></figure></div><div class="col"><figure class="figure"><a href="http://valais.ialpes.com"><img src="img/icon/logo_valais.jpg" class="img-fluid" width="80" height="80" alt="Logo Valais tourisme, Suisse"></a><figcaption class="figure-caption text-center"><a href="http://valais.ialpes.com"></a><a href="http://valais.ialpes.com" title="Valais tourisme, Suisse"><strong>Valais</strong></a></figcaption></figure></div><div class="col"><figure class="figure"><a href="http://vaud.ialpes.com"><img src="img/icon/logo_vaud.jpg" class="img-fluid" width="80" height="80" alt="Logo canton de Vaud tourisme, Suisse"></a><figcaption class="figure-caption text-center"><a href="http://vaud.ialpes.com"></a><a href="http://vaud.ialpes.com" title="Vaud tourisme, Suisse"><strong>Vaud</strong></a></figcaption></figure></div></div><hr><div class="row"><div class="col"><figure class="figure"><a href="http://piemont.ialpes.com"><img src="img/icon/logo_piemont.jpg" class="img-fluid" width="80" height="80" alt="Logo Piémont tourisme, Italie"></a><figcaption class="figure-caption text-center"><a href="http://piemont.ialpes.com"></a><a href="http://piemont.ialpes.com" title="Piémont tourisme, Italie"><strong>Piémont</strong></a></figcaption></figure></div><div class="col"><figure class="figure"><a href="http://aoste.ialpes.com"><img src="img/icon/logo_aosta.gif" class="img-fluid" width="80" height="80" alt="Logo Vallée d'Aoste tourisme, Italie"></a><figcaption class="figure-caption text-center"><a href="http://aoste.ialpes.com"></a><a href="http://aoste.ialpes.com" title="Vallée d'Aoste tourisme, Italie"><strong>Val d'Aoste</strong></a></figcaption></figure></div><div class="col"><figure class="figure"><a href="http://photos.ialpes.com"><img src="img/icon/icone_photos.jpg" class="img-fluid" width="80" height="80" alt="Logo Album photos Alpes"></a><figcaption class="figure-caption text-center"><a href="http://photos.ialpes.com"></a><a href="http://photos.ialpes.com" title="Album photos des Alpes"><strong>Photos</strong></a></figcaption></figure></div><div class="col"><figure class="figure"><a href="https://www.ialpes.com"><img src="img/icon/logo-ialpes.png" class="img-fluid" width="69" height="80" alt="Logo iAlpes tourisme des Alpes"></a><figcaption class="figure-caption text-center"><a href="https://www.ialpes.com"></a><a href="https://www.ialpes.com" title="Alpes tourisme, France Suisse et Italie"><strong>iAlpes</strong></a></figcaption></figure></div></div></div></div><div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">Close</button></div></div></div> </div> <!-- /MODAL --> <!-- MAIN --><!-- InstanceBeginEditable name="EditMain" --> <main> <!-- CONTAINER --> <div class="container"> <section class="text-center section-blog-fw mt-5 pb-3 wow fadeIn"> <div class="row"> <div class="col-md-12"> <div class="card card-cascade wider reverse"> <div class="view overlay"> <img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Slides/img%20(134).jpg" alt="Wide sample post image"> <a> <div class=""></div> </a></div> <div class="card-body text-center"> <h2><a><strong>This is title of the news</strong></a></h2> <p>Written by <a>Abby Madison</a>, 26/08/2018</p> <div class="social-counters "> <a class="btn btn-fb "> <i class="fa fa-facebook left "></i> <span class=" ">Facebook</span></a> <span class="counter ">46</span> <a class="btn btn-tw "> <i class="fa fa-twitter left "></i> <span class=" ">Twitter</span></a> <span class="counter ">22</span> <a class="btn btn-dribbble "> <i class="fa fa-dribbble left "></i> <span class=" ">Dribbble</span></a> <span class="counter ">31</span> <a class="btn btn-blue-grey "> <i class="fa fa-comments-o left "></i> <span class=" ">Comments</span></a> <span class="counter ">18</span></div> </div> </div> <div class="excerpt mt-5 wow fadeIn" data-wow-delay="0.3s"> <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. </p> <p>Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus.</p> <blockquote class="blockquote mt-4 mb-4"> <p class="mb-0"><em>Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus.</em></p> <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer> </blockquote> <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem. </p> <p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur.</p> </div> </div> </div> </section> <hr class="mb-5 mt-4"> <section class="extra-margins pb-3 wow fadeIn" data-wow-delay="0.3s"> <h3 class="text-center font-weight-bold h3 pb-5 pt-3">Recent posts</h3> <div class="row"> <div class="col-lg-4 col-md-12 mb-4"> <div class="card"> <div class="view overlay"> <img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20%28147%29.jpg" alt=""> <a> <div class="mask rgba-white-slight"></div> </a></div> <div class="card-body"> <a class="activator p-3 mr-2"><i class="fa fa-share-alt"></i></a> <h4 class="card-title">Card title</h4> <hr> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a class="link-text"> <h5>Read more <i class="fa fa-chevron-right"></i></h5> </a></div> </div> </div> <div class="col-lg-4 col-md-6 mb-4"> <div class="card"> <div class="view overlay"> <img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20%2850%29.jpg" alt=""> <a> <div class="mask rgba-white-slight"></div> </a></div> <div class="card-body"> <a class="activator p-3 mr-2"><i class="fa fa-share-alt"></i></a> <h4 class="card-title">Card title</h4> <hr> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a class="link-text"> <h5>Read more <i class="fa fa-chevron-right"></i></h5> </a></div> </div> </div> <div class="col-lg-4 col-md-6 mb-4"> <div class="card"> <div class="view overlay"> <img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20%2897%29.jpg" alt=""> <a> <div class="mask rgba-white-slight"></div> </a></div> <div class="card-body"> <a class="activator p-3 mr-2"><i class="fa fa-share-alt"></i></a> <h4 class="card-title">Card title</h4> <hr> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a class="link-text"> <h5>Read more <i class="fa fa-chevron-right"></i></h5> </a></div> </div> </div> </div> </section> <section> <div class="jumbotron author-box px-5 py-4 text-center text-md-left wow fadeIn" data-wow-delay="0.3s"> <h4 class="font-weight-bold h4 text-center">About author</h4> <hr> <div class="row"> <div class="col-12 col-sm-2"> <img src="http://mdbootstrap.com/img/Photos/Avatars/img%20(32).jpg" class="img-fluid rounded-circle z-depth-2"></div> <div class=" col-12 col-sm-10 text-left"> <p><strong>John Doe</strong></p> <div class="personal-sm pb-3"> <a class="pr-2 fb-ic"><i class="fa fa-facebook"> </i></a> <a class="pr-2 tw-ic"><i class="fa fa-twitter"> </i></a> <a class="pr-2 gplus-ic"><i class="fa fa-google-plus"> </i></a> <a class="pr-2 li-ic"><i class="fa fa-linkedin"> </i></a></div> <p>Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.</p> <p class="">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint esse nulla quia quam veniam commodi dicta, iusto inventore. Voluptatum pariatur eveniet ea, officiis vitae praesentium beatae quas libero, esse facere. </p> </div> </div> </div> </section> <section class="mb-4 pt-5 wow fadeIn" data-wow-delay="0.3s"> <div class="comments-list text-center text-md-left mb-5"> <div class="text-center mb-4"> <h3 class="font-weight-bold">Comments <span class="badge pink">3</span></h3> </div> <div class="row mb-4"> <div class="col-sm-2 col-12 mb-md-0 mb-3"> <img src="https://mdbootstrap.com/img/Photos/Avatars/img (9).jpg" class="avatar rounded-circle z-depth-1-half"></div> <div class="col-sm-10 col-12"> <a> <h4 class="font-weight-bold">Tom Smith</h4> </a> <div class="mt-2"> <ul class="list-unstyled"> <li class="comment-date"> <i class="fa fa-clock-o"></i> 05/10/2015</li> </ul> </div> <p class="grey-text">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.</p> </div> </div> <div class="row mb-4"> <div class="col-sm-2 col-12 mb-md-0 mb-3"> <img src="https://mdbootstrap.com/img/Photos/Avatars/img (20).jpg" class="avatar rounded-circle z-depth-1-half"></div> <div class="col-sm-10 col-12"> <a> <h4 class="font-weight-bold">Marta Tev</h4> </a> <div class="mt-2"> <ul class="list-unstyled"> <li class="comment-date"> <i class="fa fa-clock-o"></i> 08/10/2015</li> </ul> </div> <p class="grey-text">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas.</p> </div> </div> <div class="row mb-4"> <div class="col-sm-3 col-md-2 col-12 mb-md-0 mb-3"> <img src="https://mdbootstrap.com/img/Photos/Avatars/img (31).jpg" class="avatar rounded-circle z-depth-1-half"></div> <div class="col-sm-9 col-md-10 col-12"> <a> <h4 class="font-weight-bold">Anna Maria</h4> </a> <div class="mt-2"> <ul class="list-unstyled"> <li class="comment-date"> <i class="fa fa-clock-o"></i> 17/10/2015</li> </ul> </div> <p class="grey-text">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia. </p> </div> </div> </div> </section> <section class="pb-5 mt-5 wow fadeIn" data-wow-delay="0.3s"> <div class="reply-form"> <h3 class="section-heading h3 pt-5">Leave a reply </h3> <p class="text-center">(Logged In User)</p> <div class="row"> <div class="col-sm-2 col-12 text-center"><img src="https://mdbootstrap.com/img/Photos/Avatars/img (33).jpg" alt="Sample avatar image" class="img-fluid avatar rounded-circle z-depth-2"></div> <div class="col-sm-10 col-12"> <div class="row"> <div class="col-12"> <div class="md-form mt-0"> <textarea name="exampleFormControlTextarea" rows="3" class="form-control md-textarea" id="exampleFormControlTextarea6" placeholder="Your message..." type="text"></textarea> </div> <div class="text-center mt-4"> <button class="btn btn-pink btn-rounded">Submit</button> </div> </div> </div> </div> </div> </div> </section> </div> <!-- /CONTAINER --> </main> <!-- InstanceEndEditable --><!-- /MAIN --> <section class="gallery-block compact-gallery"> <div id="Gallery" class="container"> <div class="heading"> <h2>Compact Gallery</h2> </div><div class="row no-gutters"> <div class="col-md-6 col-lg-4 item zoom-on-hover"> <a class="lightbox" href="img/versailles_1.jpg"> <img class="img-fluid image" src="img/versailles_1.jpg"> <span class="description"> <span class="description-heading">Lorem Ipsum</span> <span class="description-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc quam urna.Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span> </span> </a> </div><div class="col-md-6 col-lg-4 item zoom-on-hover"> <a class="lightbox" href="img/versailles_2.jpg"> <img class="img-fluid image" src="img/versailles_2.jpg"> <span class="description"> <span class="description-heading">Lorem Ipsum</span> <span class="description-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc quam urna.Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span> </span> </a> </div><div class="col-md-6 col-lg-4 item zoom-on-hover"> <a class="lightbox" href="img/photos/versailles_1.jpg"> <img class="img-fluid image" src="img/photos/versailles_1.jpg"> <span class="description"> <span class="description-heading">Lorem Ipsum</span> <span class="description-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc quam urna.Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span> </span> </a> </div><div class="col-md-6 col-lg-4 item zoom-on-hover"> <a class="lightbox" href="img/versailles_1.jpg"> <img class="img-fluid image" src="img/versailles_1.jpg"> <span class="description"> <span class="description-heading">Lorem Ipsum</span> <span class="description-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc quam urna.Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span> </span> </a> </div><div class="col-md-6 col-lg-4 item zoom-on-hover"> <a class="lightbox" href="img/versailles_2.jpg"> <img class="img-fluid image" src="img/versailles_2.jpg"> <span class="description"> <span class="description-heading">Lorem Ipsum</span> <span class="description-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc quam urna.Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span> </span> </a> </div><div class="col-md-6 col-lg-4 item zoom-on-hover"> <a class="lightbox" href="img/versailles_1.jpg"> <img class="img-fluid image" src="img/versailles_1.jpg"> <span class="description"> <span class="description-heading">Lorem Ipsum</span> <span class="description-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc quam urna.Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span> </span> </a> </div><div class="col-md-6 col-lg-4 item zoom-on-hover"> <a class="lightbox" href="img/versailles_2.jpg"> <img class="img-fluid image" src="img/versailles_2.jpg"> <span class="description"> <span class="description-heading">Lorem Ipsum</span> <span class="description-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc quam urna.Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span> </span> </a> </div><div class="col-md-6 col-lg-4 item zoom-on-hover"> <a class="lightbox" href="img/versailles_1.jpg"> <img class="img-fluid image" src="img/versailles_1.jpg"> <span class="description"> <span class="description-heading">Lorem Ipsum</span> <span class="description-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc quam urna.Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span> </span></a></div><hr> <div class="col-md-6 col-lg-4 item zoom-on-hover"> <a class="lightbox" href="img/versailles_2.jpg"> <img class="img-fluid image" src="img/versailles_2.jpg"> <span class="description"> <span class="description-heading">Lorem Ipsum</span> <span class="description-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc quam urna.Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span> </span></a> </div></div></div></section><div class="container"><div class="row mb-4"><div class="col-lg-4"><div class="card mb-r wow fadeIn" data-wow-delay="0.2s"> <ins class="bookingaff" data-aid="1510728" data-target_aid="316812" data-prod="dfl2" data-width="100%" data-height="auto" data-lang="fr-FR" data-dest_id="1569" data-dest_type="region" data-df_num_properties="3"><a href="//www.booking.com?aid=316812">Booking.com</a></ins> <script type="text/javascript"> (function(d, sc, u) { var s = d.createElement(sc), p = d.getElementsByTagName(sc)[0]; s.type = 'text/javascript'; s.async = true; s.src = u + '?v=' + (+new Date()); p.parentNode.insertBefore(s,p); })(document, 'script', '//aff.bstatic.com/static/affiliate_base/js/flexiproduct.js'); </script></div> </div> <div class="col-lg-4"> <div class="card mb-r wow fadeIn" data-wow-delay="0.4s"> <script type="text/javascript" src="https://tracking.publicidees.com/showbanner.php?partid=35989&progid=1515&promoid=181914"></script></div></div> <div class="col-lg-4"> <a href="http://www.tkqlhce.com/click-2466040-11401760?sid=iAlpes" target="_blank"><img src="http://www.lduhtrp.net/image-2466040-11401760" width="300" height="250" alt="" border="0"/></a></div> <a id="likePage"></a></div> <div class="container-fluid"> <div class="divider-new"><h4 class="h2-responsive mx-4 indigo-text font-bold fadeIn"><span style="color:#f48260;">♥</span> Vous pourriez aussi aimer </h4> </div><section><div class="row"><div class="col-md-4"> <ins class="bookingaff" data-aid="1245721" data-target_aid="316812" data-prod="nsb" data-width="100%" data-height="auto" data-lang="fr"><a href="//www.booking.com?aid=316812">Booking.com</a> </ins> <script type="text/javascript"> (function(d, sc, u) { var s = d.createElement(sc), p = d.getElementsByTagName(sc)[0]; s.type = 'text/javascript'; s.async = true; s.src = u + '?v=' + (+new Date()); p.parentNode.insertBefore(s,p); })(document, 'script', '//aff.bstatic.com/static/affiliate_base/js/flexiproduct.js'); </script></div><div class="col-md-4"><div id="gyg-widget-5ae8e0ba5365a6.49067936"><span class="gyg-static"><a class="gyg-static-link" href="https://www.getyourguide.fr/?psrc=widget&partner_id=ZOI55SM">Proposé par GetYourGuide.</a> <a class="gyg-static-link" href="https://partner.getyourguide.com/en/?psrc=widget&partner_id=ZOI55SM">Devenez partenaire.</a></span></div><script async defer src="//widget.getyourguide.com/v2/core.js" onload="GYG.Widget(document.getElementById('gyg-widget-5ae8e0ba5365a6.49067936'),{'currency':'EUR','localeCode':'fr-FR','numberOfItems':'3','partnerId':'ZOI55SM','q':'Paris'});"></script> </div><hr><div class="col-md-4"><script type="text/javascript"> var uri = 'https://impfr.tradedoubler.com/imp?type(js)pool(536485)a(921898)' + new String (Math.random()).substring (2, 11); document.write('<sc'+'ript type="text/javascript" src="'+uri+'" charset="ISO-8859-1"></sc'+'ript>'); </script></div> </div></section></div><div class="divider-new"><h2 class="h2-responsive indigo-text mx-4 font-bold wow fadeIn">Contact</h2> </div><section id="contact pb-5"> <div class="row"> <div class="col-md-8 mb-5"> <div id="map-container" class="z-depth-1 wow fadeIn" style="height: 300px"></div> </div><div class="col-md-4"> <ul class="text-center list-unstyled"> <li class="wow fadeIn" data-wow-delay="0.2s"><i class="fa fa-map-marker indigo-text fa-2x"></i>LES AVENIERES, Isère, 38630, FRANCE</li> <li class="wow fadeIn mt-5 pt-2" data-wow-delay="0.3s"><i class="fa fa-phone indigo-text fa-2x"></i> <p>+ 33 0820 426 436</p></li> <li class="wow fadeIn mt-5 pt-2" data-wow-delay="0.4s"><i class="fas fa-external-link-alt indigo-text fa-2x"></i> <p><a href="https://tracking.publicidees.com/clic.php?promoid=35505&progid=1515&partid=35989" target="_blank">Compagnie des Alpes (Parcs d'attraction)</a><img src="https://tracking.publicidees.com/link.php?promoid=35505&progid=1515&partid=35989" height="1" width="1"> - Retrouvez le parc Walibi Rhônes Alpes</p> </li> </ul> </div> </div> </section></div><div class="container"><div class="row"><div class="col-xs-12"><script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script><!-- iAlpesRDW --><ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-4451249417804546" data-ad-slot="8049488496" data-ad-format="auto"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script></div></div><div class="row"><div class="col-xs-12"><script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script><!-- 01-Bloc Contenu correspondant --><ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-4451249417804546" data-ad-slot="1453228896" data-ad-format="autorelaxed"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script></div></div></div><footer class="page-footer center-on-small-only footer-link" itemscope itemtype="http://schema.org/WPFooter"><div class="container text-left"><div class="row my-4"><div class="col-lg-3 col-md-5"><h6 class="h5-responsive title mb-3"><strong>iAlpes</strong></h6><p>Vous allez voyager dans les Alpes?<br>Avec notre guide de voyages organiser votre séjour dans les Alpes. Retrouvez toutes les d’informations pour préparer votre séjour, mais n’oubliez pas que voyager, c’est aussi laisser place à l’imprévu.</p><h4>Follow Us</h4><div class="g-page" data-href="//plus.google.com/u/0/104451348207702848256" data-rel="publisher"></div><a href="https://www.facebook.com/alpes.ialpes?lst=1112941778%3A1112941778%3A1487859398" title="Facebook iAlpes" target="_blank">Facebook</a><div class="fb-like" data-href="http://www.ialpes.com" data-width="30" data-layout="button" data-action="like" data-show-faces="false" data-share="true"></div></div><hr class="w-100 clearfix d-sm-none"><div class="col-lg-3 col ml-auto"><h6 class="h5-responsive title mb-3"><strong>Nos Sites</strong></h6><ul><li><a itemprop="url" href="http://ain.ialpes.com" title="Ain tourisme, France">Ain</a></li><li><a itemprop="url" href="http://isere.ialpes.com" title="Isère tourisme, France">Isère</a></li><li><a itemprop="url" href="http://jura.ialpes.com" title="Jura tourisme, France">Jura</a></li><li><a itemprop="url" href="http://savoie.ialpes.com" title="Savoie tourisme, France">Savoie</a></li><li><a itemprop="url" href="http://haute-savoie.ialpes.com" title="Haute-Savoie tourisme, France">Haute-Savoie</a></li><li><a itemprop="url" href="http://geneve.ialpes.com" title="Genève tourisme, Suisse">Genève</a></li><li><a itemprop="url" href="http://valais.ialpes.com" title="Valais tourisme, Suisse">Valais</a></li><li><a itemprop="url" href="http://vaud.ialpes.com" title="Vaus tourisme, Suisse">Vaud</a></li><li><a itemprop="url" href="http://piemont.ialpes.com" title="Piémont tourisme, Italie">Piémont</a></li><li><a itemprop="url" href="http://aoste.ialpes.com" title="Vallée d'Aoste tourisme, Italie">Vallée d'Aoste</a></li><li><a itemprop="url" href="http://photos.ialpes.com/" title="i-Alpes Photos">Album Photos</a></li></ul></div><hr class="w-100 clearfix d-sm-none"><div class="col-lg-3 col ml-auto"><h6 class="h5-responsive title mb-3"><strong>10 Incontournables</strong></h6><ul><li><a itemprop="url" href="visite/city-tours-alpes.html" title="Villes incontournables des Alpes">Villes incontournables</a></li><li><a itemprop="url" href="visite/sites-incontournables.html" title="Visites incontournables des Alpes">Visites incontournables</a></li><li><a itemprop="url" href="events/spectacles.html" title="événements incontournables des Alpes">Evénements incontournables</a></li><li><a itemprop="url" href="activite/stations-de-ski.html" title="Stations de ski des Alpes">Stations incontournables</a></li><li><a itemprop="url" href="activite/thermes-et-balneo.html" title="Stations thermale et grand Spa des Alpes">Thermes incontournables</a></li><li><a itemprop="url" href="visite/parc-et-reserve.html" title="Grands parcs et réserves des Alpes">Parcs incontournables</a></li></ul></div><hr class="w-100 clearfix d-sm-none"><div class="col-lg-3 col ml-auto"><h6 class="h5-responsive title mb-3"><strong>Infos</strong></h6><ul><li><a itemprop="url" href="legal/about-ialpes.html" title="A propos de infos Alpes">A Propos</a></li><li><a itemprop="url" href="legal/mentions-legales.html" title="Mentions légales">Confidentialités</a></li><li><a href="legal/copyright-ialpes.html" title="Copyright iAlpes">Copyright</a></li><li>CNIL: 866 565</li><li><a itemprop="url" href="legal/copyright-ialpes.html" title="Copyright Photos iAlpes">© Photos iAlpes</a> 2013-<script>document.write(new Date().getFullYear())</script></li></ul></div></div><div class="footer-copyright"><div class="container-fluid"> © 2017 Copyright:<a href="https://www.ialpes.com" title="Tourisme Alpes" itemprop="url"><strong> iAlpes.com</strong></a></div></div></div></footer> <!-- LINKS JS --> <!-- InstanceBeginEditable name="EditRegion-JS" -->EditRegion-JS <!-- JS BOOTSTRAP and MDB --> <script src="js/jquery-3.2.1.min.js"></script> <script src="js/popper.min.js"></script> <script src="js/bootstrap.min.js"></script> <script src="js/mdb.min.js"></script> <script> new WOW().init(); </script> <!-- /JS BOOTSTRAP and MDB --> <!-- GALLERY --> <script src="js/return-top.js"></script> <script src="js/baguetteBox.min.js"></script> <script> baguetteBox.run('.compact-gallery', { animation: 'slideIn'}); </script> <!-- /GALLERY --> <script type="application/ld+json"> { "@context": "http://schema.org", "@type": "Organization", "url": "http://www.ialpes.com", "logo": "http://www.ialpes.com/img/icones/logo_ialpes.png" } </script> <button onclick="topFunction()" id="TopUp" title="Go to top">Top</button> <script type="text/javascript" charset="UTF-8" src="//cookie-script.com/s/309279d3d317ec9fde2d00ff98230c02.js"></script> <!-- InstanceEndEditable --> </body><!-- InstanceEnd --></html>

Marta Szymanska staff pro premium answered 7 years ago

Hi, try this code and adjust it to your website: <!-- Main navigation --> <header> <!--Navbar--> <nav class="navbar navbar-expand-lg navbar-dark fixed-top primary-color"> <!-- Navbar brand --> <a class="navbar-brand" href="#">Navbar</a> <!-- Collapse button --> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#basicExampleNav" aria-controls="basicExampleNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <!-- Collapsible content --> <div class="collapse navbar-collapse" id="basicExampleNav"> <!-- Links --> <ul class="navbar-nav mr-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="#">Features</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Pricing</a> </li> <!-- Dropdown --> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a> <div class="dropdown-menu dropdown-primary" aria-labelledby="navbarDropdownMenuLink"> <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> </ul> <!-- Links --> <form class="form-inline"> <div class="md-form my-0"> <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search"> </div> </form> </div> <!-- Collapsible content --> </nav> <!--/.Navbar--> </header> <!-- Main navigation --> <!-- Main layout --> <main> <ol class="breadcrumb" style="margin-top: 56px;"> <li class="breadcrumb-item"><a href="#">Home</a></li> <li class="breadcrumb-item"><a href="#">Library</a></li> <li class="breadcrumb-item active">Data</li> </ol> </main> <!-- Main layout --> Best, Marta

LAGIER pro premium priority commented 7 years ago

Hello Marta, I send you a Big Thank You, your solution works perfectly. I would have to think better before, it was ridiculously easy. Can you tell me please, who does billing at MDB, because I have a problem with that. Best regards

Bartłomiej Malanowski staff pro premium commented 7 years ago

If you have any questions about billing, please contact me directly at b.malanowski@mdbootstrap.com. After you describe your problem I'll be able to forward your message to the right person
Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
About author
Falkangen
Pro User
32Support score
3Questions 2Answers
0Snippets likes 0Snippets