The navbar works properly in full screen, but when i make the window small the toggle options doesn´t show correctly.
Was wondering if anyone knew how to fix it.
here is the css of the navbar
.navbar {
border-radius: 0;
}
.navbar-new {
background-color: white;
height: 120px;
padding-left: 20px;
}
.navbar-new .navbar-brand,
.navbar-new .navbar-brand:hover,
.navbar-new .navbar-brand:focus {
color: #FFF;
}
.navbar-new .navbar-nav > li > a {
color: #FFF;
}
.navbar-new .navbar-nav > li > a:hover,
.navbar-new .navbar-nav > li > a:focus {
background-color: #fcf8e3;
}
.navbar-new .navbar-nav > .active > a,
.navbar-new .navbar-nav > .active > a:hover,
.navbar-new .navbar-nav > .active > a:focus {
color: #FFF;
background-color: #fcf8e3;
}
.navbar-new .navbar-text {
color: black;
}
.navbar-new .navbar-toggle {
border-color: #0FA6A1;
}
.navbar-new .navbar-toggle:hover,
.navbar-new .navbar-toggle:focus {
background-color: #fcf8e3;
}
.navbar-new .navbar-toggle .icon-bar {
background-color: #FFF;
}`enter code here`
.navbar-new .navbar-toggle .icon-bar {
background-color: #FFF;
}
And Here is the html file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="footer, address, phone, icons" />
<title>IMC chile</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/index.css" rel="stylesheet">
<link href="css/navbar.css" rel="stylesheet">
<link href="css/footer.css" rel="stylesheet">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<link href="http://fonts.googleapis.com/css?family=Cookie" rel="stylesheet" type="text/css">
<!-- bxSlider CSS file -->
<link href="css/jquery.bxslider.css" rel="stylesheet" />
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-new navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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" style="color:black;" href="index.html"><img class="img-responsive" width="100%;" max-height="100px;" src="img/logo/logosmall.jpg" alt=""></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<div id="nav">
<ul class="nav navbar-nav">
<li>
<b>Sobre Nosotros</b>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" style="color:black;" aria-haspopup="true" aria-expanded="false"><b>Productos</b> <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>IMCtext</li>
<li>IMCplastic</li>
<li>IMCcontención</li>
<li role="separator" class="divider"></li>
<li>Absorventes</li>
</ul>
</li>
<li>
<b>Contacto</b>
</li>
</ul>
</div>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<!-- Page Content -->
<!-- carousel -->
<header>
</header>
<div id="myCarousel" class="carousel slide">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for Slides -->
<div class="carousel-inner">
<div class="item active">
<!-- Set the first background image using inline CSS below. -->
<div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide One');"></div>
<div class="carousel-caption">
<h2>Caption 1</h2>
</div>
</div>
<div class="item">
<!-- Set the second background image using inline CSS below. -->
<div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide Two');"></div>
<div class="carousel-caption">
<h2>Caption 2</h2>
</div>
</div>
<div class="item">
<!-- Set the third background image using inline CSS below. -->
<div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide Three');"></div>
<div class="carousel-caption">
<h2>Caption 3</h2>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="icon-next"></span>
</a>
</div>
<!-- IMC secciones -->
<div class="container" id="nuestrosclientes">
<a data-toggle="modal" data-target="#myModal"><img class="img-responsive" width="100%;" src="http://placehold.it/1000x200" alt=""> </a>
<a data-toggle="modal" data-target="#myModal"><img class="img-responsive" width="100%;" src="http://placehold.it/1000x200" alt=""> </a>
<a data-toggle="modal" data-target="#myModal"><img class="img-responsive" width="100%;" src="http://placehold.it/1000x200" alt=""> </a>
<hr>
<h1><b>Nuestros clientes</b></h1>
<hr>
<!-- Title -->
<div class="container">
<ul class="bxslider">
<li><img src="img/clientes/14.jpg" /></li>
<li><img src="img/clientes/15.jpg" /></li>
<li><img src="img/clientes/16.jpg" /></li>
<li><img src="img/clientes/17.jpg" /></li>
<li><img src="img/clientes/18.jpg" /></li>
</ul>
</div>
<!-- /.row -->
</div>
<!-- FOOTER -->
<footer class="footer-distributed">
<div class="footer-left">
<div class="container">
<img class="img-responsive" src="img/logo/logosmall.jpg" alt="">
<br>
<p class="footer-company-name"> IMC chile © 2016</p>
</div>
</div>
<div class="footer-center">
<div>
<i class="fa fa-map-marker"></i>
<p style="color:black;"><span>La Senda de Don Juan Francisco 5300,</span> Peñalolén, Santiago.</p>
</div>
<div>
<i class="fa fa-phone"></i>
<p style="color:black;">+56 9 5688 6169</p>
</div>
<div>
<i class="fa fa-envelope"></i>
<p style="color:black;">ventas#imcchile.cl</p>
</div>
</div>
<div class="footer-right">
<p style="color:black;" class="footer-company-about">
<span style="color:black;">Sobre la compañia</span>
Comercializadora Importadora y Exportadora IMC Chile Limitada. <br>Rut: 76.296.444-9.
</p>
<div class="footer-icons">
<i class="fa fa-facebook"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-linkedin"></i>
<i class="fa fa-github"></i>
</div>
</div>
</footer>
<!-- /.container -->
<!-- jQuery -->
<script src="js/jquery.js"></script>
<script src="js/jquery.bxslider.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- carousel script -->
<script type="text/javascript">
$(document).ready(function(){
$('.bxslider').bxSlider({
slideWidth: 600,
minSlides: 2,
maxSlides: 3,
slideMargin: 10,
speed: 1000
});
});
</script>
</body>
</html>
Hello try the below Html for navbar I just edited some classes for bootstrap and it seems working .Hope It helps you.
"Just ignore the code see the fiddle below" .
<div class="collapse navbar-collapse" id="myNav">
<ul class="nav navbar-nav">
<li>
<b>Sobre Nosotros</b>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data- toggle="dropdown" href="#"
role="button" style="color:black;" aria-haspopup="true" aria-
expanded="false"><b>Productos</b> <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>IMCtext
</li>
<li>IMCplastic</li>
<li>IMCcontención</li>
<li role="separator" class="divider"></li>
<li>Absorventes</li>
</ul>
</li>
<li>
<a href="#" style="color:black;">
<b>Contacto</b></a>
</li>
</ul>
</div>
See the below Fiddle
Side Bar Fiddle
Well, if you add, for example, background-color: #fff to nav with the class "navbar ", you will have the desired result - a text with a color behind. But I think the problem is that you've overridden some bootstrap classes or missed adding one to your html code. Moreover your next problem (after background-color) will be fixing the position of the navbar, so it would be nicely viewable on mobile devices. Try to read this part of bootstrap documentation for more information.
Related
I tried to include carousel into my website but no success so far. I googled it and any answer is not helping. Mainly people had problem with not including jQuery.js or bootstrap.js. Both included.
Do I have to call carousel in separate js file? Bootstrap docs says that I do not have to.
Where is the mistake? Thanks for help!
HTML/CSS:
#import "adress-row.css";
#import "offer-head.css";
#import "navbar.css";
.carouselTop {
position: absolute;
width: 100%;
top: 0;
}
.navbar {
background-color: white;
opacity: 65%;
font-weight: 600;
color: black;
}
.toptop {
position: relative;
}
<!DOCTYPE html>
<html lang="pl">
<head>
<!-- META -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<meta name="keywords" content="klimatyzacja, pompa ciepła, pompy ciepła, smart home, cctv, alarm, security">
<meta name="author" content="Dawid Tandos">
<!-- CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="assets/css/styles.css">
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght#0,400;1,200&display=swap" rel="stylesheet">
<!-- Font awsome -->
<!-- <script src="https://kit.fontawesome.com/50e5d27fce.js" crossorigin="anonymous"></script> -->
<title>Technologia dla domu</title>
</head>
<body>
<header>
<!-- Offer header -->
<div class="off-head">
<div class="row">
<div class="col-4" id="left">
<p>
Oferta klimatyzacji od ręki!
</p>
</div>
<div class="col-4">
</div>
<div class="col-4" id="right">
<p>
Umów się na bezpłatną konsultację!
</p>
</div>
</div>
</div>
<!-- Adress row -->
<div class="container-fluid">
<div class="row row-cols-auto top-row">
<div class="col-sm adress-row">
<div class="row row-cols-1">
<div class="col-sm adress-row hours1">
<img class="icons-top" src="assets/ico/clock.png">
</div>
<div class="col-sm adress-row hours">
<p>
Pn - Pt: <br>
Sobota:
</p>
</div>
<div class="col-sm adress-row hours2">
<p>
<span id="bold">7:00 - 17:00</span><br>
<span id="bold">7:00 - 14:00</span>
</p>
</div>
</div>
</div>
<div class="col-sm adress-row">
<div class="row">
<div class="col-sm adress-row hours1">
<img class="icons-top" id="env" src="assets/ico/envelope.png">
</div>
<div class="col-sm adress-row">
E-mail: <br>
tdd#gmail.com
</div>
</div>
</div>
<div class="col-sm adress-row">
<div class="row">
<div class="col-sm adress-row hours1">
<img class="icons-top" id="env" src="assets/ico/headphones.png">
</div>
<div class="col-sm adress-row">
Telefon:<br>
123 456 789
</div>
</div>
</div>
</div>
</div>
<div class="toptop">
<!-- NAVBAR -->
<nav class="navbar sticky-top navbar-expand-lg navbar-light navbar-no-bg" id="top-navbar">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img class="logo" src="assets/images/logo.png">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggler" aria-controls="navbarToggler" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarToggler">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">
<img class="icons-navbar" src="assets/ico/house.png">
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">O nas</a>
</li>
<li class="nav-item dropdown px-3">
<a class="nav-link dropdown-toggle" href="#" id="navOfertyMenu" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Oferta
</a>
<ul class="dropdown-menu" aria-labelledby="navOfertyMenu">
<li><a class="dropdown-item" href="#">Klimatyzacja</a></li>
<li><a class="dropdown-item" href="#">Pompy ciepła</a></li>
<li><a class="dropdown-item" href="#">Systemy alarmowe</a></li>
<li><a class="dropdown-item" href="#">Smart home</a></li>
</ul>
</li>
<li class="nav-item px-3">
<a class="nav-link" href="#">Katalogi i cenniki</a>
</li>
<li class="nav-item px-3">
<a class="nav-link" href="#">Poradnik</a>
</li>
<li class="nav-item px-3">
<a class="nav-link" href="#">Kontakt</a>
</li>
<button type="button" class="btn btn-danger px-3 customButton" href="#">Szybka wycena</button>
</ul>
</div>
</div>
</nav>
<!-- Carousel -->
<div id="carouselTop" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselTop" data-slide-to="0" class="active"></li>
<li data-target="#carouselTop" data-slide-to="1"></li>
<li data-target="#carouselTop" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="assets/images/backgrounds/1.jpg" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="assets/images/backgrounds/2.jpg" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="assets/images/backgrounds/3.jpg" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselTop" 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="#carouselTop" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</header>
<!-- JavaScrpit file -->
<script src="assets/js/scripts.js"></script>
<!-- jQuery and Bootstrap.js-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
</body>
</html>
Try putting your JavaScript file after/below the jQuery and Bootstrap files and ensure you have it in the order
<!--jquery, popper.js, bootstrap.js-->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
crossorigin="anonymous"></script>
<!--jquery, popper.js, bootstrap.js-->```
You are using the bootstrap 4 make sure that your code for your carousel is in bootstrap 4 because there is new bootstrap which is bootstrap 5. If your carousel is not working try to add this:
This is for bootstrap 5
var myCarousel = document.getElementById('myCarousel')
myCarousel.addEventListener('slide.bs.carousel', function () {
// do something...
})
This is for bootstrap 4
$('#myCarousel').on('slide.bs.carousel', function () {
// do something...
})
try to put this on above the tags
</body>
in order for it to work
You have to use those script. Hope your problem will be solved
<!-- jQuery and Bootstrap.js-->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
crossorigin="anonymous"></script>
You forget to add js libs and code of carsoul in js file
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Technologia dla domu</title>
<!-- CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght#0,400;1,200&display=swap" rel="stylesheet">
<!-- Font awsome -->
<!-- <script src="https://kit.fontawesome.com/50e5d27fce.js" crossorigin="anonymous"></script> -->
</head>
<body>
<header>
<!-- Offer header -->
<!-- Carousel -->
<div id="carouselTop" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselTop" data-slide-to="0" class="active"></li>
<li data-target="#carouselTop" data-slide-to="1"></li>
<li data-target="#carouselTop" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="https://images.pexels.com/photos/6335/man-coffee-cup-pen.jpg?auto=compress&cs=tinysrgb&dpr=2&w=500" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://images.pexels.com/photos/257897/pexels-photo-257897.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://images.pexels.com/photos/6335/man-coffee-cup-pen.jpg?auto=compress&cs=tinysrgb&dpr=2&w=500" alt="Second slide">
</div>
</div>
</div>
</header>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
crossorigin="anonymous"></script>
</body>
</html>
.carouselTop {
position: absolute;
width: 100%;
top: 0;
}
.navbar {
background-color: white;
opacity: 65%;
font-weight: 600;
color: black;
}
.toptop {
position: relative;
}
$('.carousel').carousel();
This is my code below. When I resize the size of my window and navbar collapse. On dropdown of the menu, the contents appeared to be below carousel. How do I bring it to forward? here is my code:
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>APT - Aviation | Travel | Hospitality</title>
<!-- Bootstrap -->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="bootstrap/css/style.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-brand-centered">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-brand navbar-brand-centered">
<img src="images/apt-logo.gif">
</div>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbar-brand-centered">
<ul class="nav navbar-nav">
<li class="dropdown">
Academy<span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Training programs</li>
<li>APT - 360 training</li>
</ul>
</li>
<li class="dropdown">
Admission<span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Admission guide</li>
<li>Apply now</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
Placement<span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Companies</li>
<li>Highlights</li>
</ul>
</li>
<li class="dropdown">
About<span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Our story</li>
<li>Training Methadology</li>
<li>Contact</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://www.skoda-auto.co.in/models/new-skoda-rapid/PublishingImages/Overview/Top/overview-top_New2.jpg" alt="Chania" width="100%" height="100%">
<div class="carousel-caption">
<h3>Chania</h3>
<p>The atmosphere in Chania has a touch of Florence and Venice.</p>
</div>
</div>
<div class="item">
<img src="http://www.skoda-auto.co.in/models/new-skoda-rapid/PublishingImages/Overview/Top/overview-top_New2.jpg" alt="Chania" width="100%" height="100%">
<div class="carousel-caption">
<h3>Chania</h3>
<p>The atmosphere in Chania has a touch of Florence and Venice.</p>
</div>
</div>
<div class="item">
<img src="http://www.skoda-auto.co.in/models/new-skoda-rapid/PublishingImages/Overview/Top/overview-top_New2.jpg" alt="Chania" width="100%" height="100%">
<div class="carousel-caption">
<h3>Chania</h3>
<p>The atmosphere in Chania has a touch of Florence and Venice.</p>
</div>
</div>
<div class="item">
<img src="http://www.skoda-auto.co.in/models/new-skoda-rapid/PublishingImages/Overview/Top/overview-top_New2.jpg" alt="Chania" width="100%" height="100%">
<div class="carousel-caption">
<h3>Chania</h3>
<p>The atmosphere in Chania has a touch of Florence and Venice.</p>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
and css:
body{
background: #f8f8f8;
}
.navbar-brand-centered {
position: absolute;
left: 50%;
display: block;
width: 160px;
text-align: center;
background-color: transparent;
}
.navbar>.container .navbar-brand-centered,
.navbar>.container-fluid .navbar-brand-centered {
margin-left: -80px;
}
nav{
height: 100px;
}
.navbar{
border-bottom: none;
}
#media only screen and (max-width: 500px){
.navbar-brand-centered {
left: 30%;
}
}
.navbar-header button{
margin-top: 50px;
}
.nav{
margin-top: 25px;
}
#apply{
padding-left: 19px;
font-weight: 600;
color:#419044;
}
#apply:hover{
text-decoration: none;
}
I didn't look to long at your code but I did not see a z-index attribute anywhere. Did you try that? Place z-index: 1 in the css class you want to be on top.
I am trying to center a sentance in my Nav Bar (which uses bootstrap). The navbar so far looks like this:
Centered Navbar title
What I would like to do is have the "|" centered, with the text around it next to it, instead of just having the sentence centered. This is quite hard to explain, but I hope you understand what I mean - the "|" is centered, with text to the left and right, instead of the whole sentance being centered, where the middle letter is in the middle. I want the "|" to be in the middle.
I have tried centering the "|" and floating the text on the left to the right and the text to the right to the left, but that just made the text go completely to the right instead of stopping before the "|".
Use the snippet to view the code, but please use "Full Page" so it works properly...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<link href="https://www.fontify.me/wf/da96db5dc1f0db255a8e71edaa0ace2d" rel="stylesheet" type="text/css">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>
<?php echo $album_nm; ?>
</title>
<!-- Bootstrap Core CSS -->
<link href="https://blackrockdigital.github.io/startbootstrap-scrolling-nav/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="https://blackrockdigital.github.io/startbootstrap-scrolling-nav/css/scrolling-nav.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesnt work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">
<!-- -------------------------------------------------------------NAV BAR------------------------------------------------------ -->
<nav class="navbar navbar-default navbar-fixed-top" role="navigation" style="background-color: #1a1a1a;">
<div class="container" style="text-align: center;">
<div class="container" class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div style="font-family: font71888;" class="navbar-brand page-scroll" href="#page-top">
<div style="display:inline-block; text-align: right;">
CHLOE
</div>
<div style="display:inline-block; float: none; margin: 0 auto;">
|
</div>
<div style="display:inline-block; text-align: left;">
<?php echo $album_nm; ?>
</div>
</div>
<!-- <a style="font-family: font71888;" class="navbar-brand page-scroll navbar-middle" href="#page-top"><br>CHLOE | <?php echo $album_nm; ?></a> -->
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav" style="align: center; float: center; text-align: center;">
<!-- Hidden li included to remove active class from about link when scrolled up past about section -->
<li class="hidden">
<a class="page-scroll" href="#page-top"></a>
</li>
<li>
<a class="page-scroll" href="#buy">Buy</a>
</li>
<li>
<a class="page-scroll" href="#story">My Story</a>
</li>
<li>
<a class="page-scroll" href="#about">About Me</a>
</li>
<li>
<a class="page-scroll" href="#warchild">War Child</a>
</li>
<li>
<a class="page-scroll" href="#listen">Listen</a>
</li>
<li>
<a class="page-scroll" href="#thanks">Thanks</a>
</li>
<li>
<a class="page-scroll" href="#contact">Contact</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
</body>
</html>
Edit:
Thanks to Andrei Gheorghiu for his answer, this worked for me and looked really nice! I have marked his answer as correct and it is the one with the most upvotes at the moment...
Here's how I'd do it:
.navbar-brand {
display: flex;
}
.navbar-brand > div{
flex: 1 1 0;
padding: 0 4px;
}
.navbar-brand > div:first-child,
.navbar-brand > div:last-child{
flex-basis: 50%;
}
.navbar-brand > div:first-child {
text-align: right;
}
<div class="navbar-brand page-scroll" href="#page-top">
<div>CHLOE</div>
<div>|</div>
<div>This is a long album name</div>
</div>
P.S.: Don't forget to autoprefix your CSS before deploying.
And stop using inline style! How are you going to wrap your declarations in a #media query if they're inlined?
Here.
Note: If you don't want to count mobile menu button when centering text, just remove overflow: hidden property from div that wraps the text
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<link href="https://www.fontify.me/wf/da96db5dc1f0db255a8e71edaa0ace2d" rel="stylesheet" type="text/css">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>
<?php echo $album_nm; ?>
</title>
<!-- Bootstrap Core CSS -->
<link href="https://blackrockdigital.github.io/startbootstrap-scrolling-nav/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="https://blackrockdigital.github.io/startbootstrap-scrolling-nav/css/scrolling-nav.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesnt work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">
<!-- -------------------------------------------------------------NAV BAR------------------------------------------------------ -->
<nav class="navbar navbar-default navbar-fixed-top" role="navigation" style="background-color: #1a1a1a;">
<div class="container" style="text-align: center;">
<div class="container" class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div style="font-family: font71888; float: none; overflow: hidden" class="navbar-brand page-scroll" href="#page-top">
<div style="display:block; text-align: right; width: 50%">
CHLOE |
</div>
<div style="display:block; text-align: left; width: 50%" >
<?php echo $album_nm; ?>
</div>
</div>
<!-- <a style="font-family: font71888;" class="navbar-brand page-scroll navbar-middle" href="#page-top"><br>CHLOE | <?php echo $album_nm; ?></a> -->
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav" style="align: center; float: center; text-align: center;">
<!-- Hidden li included to remove active class from about link when scrolled up past about section -->
<li class="hidden">
<a class="page-scroll" href="#page-top"></a>
</li>
<li>
<a class="page-scroll" href="#buy">Buy</a>
</li>
<li>
<a class="page-scroll" href="#story">My Story</a>
</li>
<li>
<a class="page-scroll" href="#about">About Me</a>
</li>
<li>
<a class="page-scroll" href="#warchild">War Child</a>
</li>
<li>
<a class="page-scroll" href="#listen">Listen</a>
</li>
<li>
<a class="page-scroll" href="#thanks">Thanks</a>
</li>
<li>
<a class="page-scroll" href="#contact">Contact</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
</body>
</html>
Just started working with bootstrap today and I ran into a few issues. I want to edit the size of certain parts of the site but can't get them to change/am worried about the responsivity. For example in the code below I wanted to change the size of the icons so I added an additional class "size" and set the width to 300px, but the change isn't made on the site. I even tried using !important without success. Additionally, I would like to change the height of the jumbotron in the same way but have been unsuccessful. How would I go about changing these? Do I need to go into the bootstrap script? Also when designing a responsive website should I use percentages instead of pixels? Thanks, code is here:
*{
margin: 0;
padding: 0;
}
.navbar-default{
background-color: rgb(66, 134, 244);
}
.under {
border-bottom: 15px solid rgb(66, 134, 244);
}
.size {
width: 300px!important;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Case</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<!-- Button nav for small screens -->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- Brand name -->
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<!-- Makes nav not expand on resize -->
<div class="collapse navbar-collapse" id="myNavbar">
<!-- Menu -->
<ul class="nav navbar-nav">
<li class="active">Home</li>
<!-- Dropdown menu -->
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Page 1-1</li>
<li>Page 1-2</li>
<li>Page 1-3</li>
</ul>
</li>
<!-- Non dropdown -->
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
</div>
</nav>
<div class="jumbotron text-center under">
<h1>Website Heading</h1>
<p>Information about the website!</p>
</div>
<div class="container">
<div class="row">
<div class="col-sm-4 text-center">
<h2>Text</h2>
<p>More text describing the heading!</p>
<span id="size" class="glyphicon glyphicon-leaf size"></span>
</div>
<div class="col-sm-4 text-center">
<h2>Text</h2>
<p>More text describing the heading!</p>
<span class="glyphicon glyphicon-hourglass btn-lg"></span>
</div>
<div class="col-sm-4 text-center">
<h2>Text</h2>
<p>More text describing the heading!</p>
<span class="glyphicon glyphicon-plus btn-lg"></span>
</div>
</div>
</div>
</body>
</html>
Change styles.css to custom.css and put it in folder called css
<!-- Custom CSS: You can use this stylesheet to override any Bootstrap styles and/or apply your own styles -->
<link href="css/custom.css" rel="stylesheet">
You can just wrap the icon span with a h1 tag.
<h1> <span id="size" class="glyphicon glyphicon-leaf size large"> </span></h1>
I have made some changes on your code:
/*
Put this content into style.css
*/
* {
margin: 0;
padding: 0;
}
.navbar-default {
background-color: rgb(66, 134, 244);
}
.jumbotron {
/* jumbotron height */
height: 400px;
}
.under {
border-bottom: 15px solid rgb(66, 134, 244);
}
.size {
/*use font-size instead of width*/
font-size: 100px !important;
/* this is the last one:
width: 300px!important;
(missing space before !important )
*/
}
<!--
http://stackoverflow.com/questions/42940712/bootstrap-css-customization-issues
-->
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Case</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<!-- Button nav for small screens -->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- Brand name -->
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<!-- Makes nav not expand on resize -->
<div class="collapse navbar-collapse" id="myNavbar">
<!-- Menu -->
<ul class="nav navbar-nav">
<li class="active">Home</li>
<!-- Dropdown menu -->
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Page 1-1</li>
<li>Page 1-2</li>
<li>Page 1-3</li>
</ul>
</li>
<!-- Non dropdown -->
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
</div>
</nav>
<div class="jumbotron text-center under">
<h1>Website Heading</h1>
<p>Information about the website!</p>
</div>
<div class="container">
<div class="row">
<div class="col-sm-4 text-center">
<h2>Text</h2>
<p>More text describing the heading!</p>
<span id="size" class="glyphicon glyphicon-leaf size"></span>
</div>
<div class="col-sm-4 text-center">
<h2>Text</h2>
<p>More text describing the heading!</p>
<span class="glyphicon glyphicon-hourglass btn-lg"></span>
</div>
<div class="col-sm-4 text-center">
<h2>Text</h2>
<p>More text describing the heading!</p>
<span class="glyphicon glyphicon-plus btn-lg"></span>
</div>
</div>
</div>
</body>
</html>
I'm trying to use a Bootsnipp snippet in my page.
Namely, collapsible-tree-menu-with-accordion.
However the entire thing is being rendered in a 'flat' way. The collapse/expand mechanism is working fine, but the list items are not indented, nor are they surrounded with a box.
I imagine this is a CSS issue, but I can't figure it out.
Here is the HTML (generated from django templates), with the snippet pasted as-is:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link href="/static/bootstrap/css/bootstrap.css" rel="stylesheet">
<link href="/static/css/style.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top" 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">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Hasadna: Community</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li>admin</li>
</ul>
</div>
</div>
<div class="container">
<ol class="breadcrumb">
<li>Users</li>
<li class="active">Lucid</li>
</ol>
<div class="well">
<center>
<img src="http://www.gravatar.com/avatar/8b1d41ccb353509f6c864b1faddf3202?d=blank?s=140" name="aboutme" width="140" height="140" border="0" class="img-circle"></a>
<h3 class="media-heading">Lucid</h3>
<h3 class="media-heading"><small>עמרי דור | Omri Dor</small></h3>
<span><strong>Skills: </strong></span>
<span class="label label-warning">Baking Cookies</span>
</center>
<hr>
<p class="text-left"><strong>Email: </strong><br>
a#b.c</p>
<hr>
<center>
<p class="text-left"><strong>Bio: </strong><br>
Hi guys.
</p>
</center>
<hr>
<p class="text-left"><strong>Code Contributions: </strong></p>
<ul class="list-group">
<li class="list-group-item"><strong>Total Commits:</strong> 7</li>
</ul>
<div class="container">
<div class="row">
<div class="span12">
<div class="menu">
<div class="accordion">
<!-- Áreas -->
<div class="accordion-group">
<!-- Área -->
<div class="accordion-heading area">
<a class="accordion-toggle" data-toggle="collapse" href=
"#area1">Área #1</a>
<div class="dropdown edit">
<a class="dropdown-toggle icon-pencil" data-toggle=
"dropdown" href="#" style="font-style: italic"></a>
<ul class="dropdown-menu">
<!-- Adicionar equipamento -->
<li>
<a href="../equipamento/add.php"><i class=
"icon-plus"></i> Adicionar equipamento</a>
</li>
<li class="divider"></li><!-- Editar área -->
<li>
<a href="../area/edit.php"><i class=
"icon-pencil"></i> Editar área</a>
</li>
<li class="divider"></li><!-- Remover área -->
<li>
<a class="danger" href="#remove"><i class=
"icon-remove"></i> Remover área</a>
</li>
</ul>
</div>
</div><!-- /Área -->
<div class="accordion-body collapse" id="area1">
<div class="accordion-inner">
<div class="accordion" id="equipamento1">
<!-- Equipamentos -->
<div class="accordion-group">
<div class="accordion-heading equipamento">
<a class="accordion-toggle" data-parent=
"#equipamento1-1" data-toggle="collapse" href=
"#ponto1-1">Equipamento #1-1</a>
<div class="dropdown edit">
<a class="dropdown-toggle icon-pencil"
data-toggle="dropdown" href="#" style=
"font-style: italic"></a>
<ul class="dropdown-menu">
<!-- Adicionar ponto -->
<li>
<a href=
"../ponto/add.php"><i class="icon-plus">
</i> Adicionar ponto</a>
</li>
<li class="divider"></li>
<!-- Editar equipamento -->
<li>
<a href=
"../equipamento/edit.php"><i class=
"icon-pencil"></i> Editar
equipamento</a>
</li>
<li class="divider"></li>
<!-- Remover equipamento -->
<li>
<a class="danger" href=
"#remove"><i class=
"icon-remove"></i> Remover
equipamento</a>
</li>
</ul>
</div>
</div><!-- Pontos -->
<div class="accordion-body collapse" id="ponto1-1">
<div class="accordion-inner">
<div class="accordion" id="servico1">
<div class="accordion-group">
<div class=
"accordion-heading ponto">
<a class="accordion-toggle"
data-parent="#servico1-1-1"
data-toggle="collapse" href=
"#servico1-1-1">Ponto
#1-1-1</a>
<div class="dropdown edit">
<a class=
"dropdown-toggle icon-pencil"
data-toggle="dropdown"
href="#" style=
"font-style: italic"></a>
<ul class="dropdown-menu">
<!-- Adicionar servico -->
<li>
<a href=
"../servico/add.php">
<i class=
"icon-plus"></i>
Adicionar
servico</a>
</li>
<li class="divider">
</li><!-- Editar ponto -->
<li>
<a href=
"../ponto/edit.php">
<i class=
"icon-pencil"></i>
Editar ponto</a>
</li>
<li class="divider">
</li><!-- Remover ponto -->
<li>
<a class="danger"
href=
"#remove"><i class=
"icon-remove"></i>
Remover ponto</a>
</li>
</ul>
</div>
</div><!-- Serviços -->
<div class=
"accordion-body collapse" id=
"servico1-1-1">
<div class="accordion-inner">
<ul class="nav nav-list">
<li>
<a href=
"#"><i class=
"icon-chevron-right">
</i> Serviço
#1-1-1-1</a>
</li>
<li>
<a href=
"#"><i class=
"icon-chevron-right">
</i> Serviço
#1-1-1-2</a>
</li>
<li>
<a href=
"#"><i class=
"icon-chevron-right">
</i> Serviço
#1-1-1-3</a>
</li>
</ul>
</div>
</div><!-- /Serviços -->
</div>
</div>
</div>
</div><!-- /Pontos -->
</div><!-- /Equipamentos -->
</div>
</div>
</div>
</div>
</div><!-- /accordion -->
</div>
</div>
</div>
</div>
</div>
<hr>
<footer>
<p></p>
</footer>
</div>
<script src="/static/js/jquery-1.11.0.min.js"></script>
<script src="/static/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
And this is the additional CSS file, '/static/css/style.css', containing the CSS snippet that's supposed to go along with the HTML snippet:
body {
padding-top: 80px;
padding-bottom: 20px;
}
.menu .accordion-heading { position: relative; }
.menu .accordion-heading .edit {
position: absolute;
top: 8px;
right: 30px;
}
.menu .area { border-left: 4px solid #f38787; }
.menu .equipamento { border-left: 4px solid #65c465; }
.menu .ponto { border-left: 4px solid #98b3fa; }
.menu .collapse.in { overflow: visible; }
Any ideas?
So it turns out I had two problems:
I was using Bootstrap v3.1.0, which was incompatible with this snippet.
Even after switching to v2.3.2, the files sat in the same exact (django served /static/) path, and my browser kept using the cached version (3.1.0).
About (1):
Unfortunately if I go back to 2.3.2 then my navbar is no longer rendered correctly. I would really like to migrate the snippet to Bootstrap 3.1.0, but my CSS is far too poor for me to be able to do it.
About (2):
A quick workaround was to indicate the version number somewhere in the path (i.e. boostrap/2.3.2/css/...).
A cleaner solution is django-cachebuster, which adds a meaningless get parameter for your static resources (i.e. /static/my.css?v=9393939). This parameter can be set to be the file's last modification date, so that ought to do it.
Thanks for your help guys!