I use film of the (Step Wizard with Bootstrap 4) and my version of bootstrap is 4.5.1.
Link: https://www.youtube.com/watch?v=5czWkFFLdQc
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/smart_wizard.min.css">
<title>Hello, world!</title>
</head>
<body>
<div class="container mt-5 mb-5">
<div id="stepWizard">
<ul>
<li>Step Title 1<br><small>Step Description 1</small></li>
<li>Step Title 2<br><small>Step Description 2</small></li>
<li>Step Title 3<br><small>Step Description 3</small></li>
<li>Step Title 4<br><small>Step Description 4</small></li>
<li>Step Title 5<br><small>Step Description 5</small></li>
</ul>
<div>
<div id="step1">Step Content 1</div>
<div id="step2">Step Content 2</div>
<div id="step3">Step Content 3</div>
<div id="step4">Step Content 4</div>
<div id="step5">Step Content 5</div>
</div>
</div>
</div>
<script src="js/jquery-3.5.1.slim.min.js"></script>
<script src="js/jquery-3.5.1.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.smartWizard.min.js"></script>
<script>
$('#stepWizard').smartWizard();
</script>
</body>
</html>
I see this demo.
My code is not working but in youtube work.
I had the same issue and found a way to solve it: look at this page, it helped me a lot!
Note that you have to use jquery.min.js or jquery.js and not a "slim" version.
It works with this code for me:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Step Wizard</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/npm/smartwizard#5/dist/css/smart_wizard_all.min.css" rel="stylesheet"
type="text/css" />
</head>
<body>
<div class="container mt-5 mb-5">
<div id="stepwizard">
<ul class="nav">
<li class="nav-item"><a href="#step1" class="nav-link">Step Title 1 <br> <small>Step Description
1</small></a></li>
<li class="nav-item"><a href="#step2" class="nav-link">Step Title 2 <br> <small>Step Description
2</small></a></li>
<li class="nav-item"><a href="#step3" class="nav-link">Step Title 3 <br> <small>Step Description
3</small></a></li>
<li class="nav-item"><a href="#step4" class="nav-link">Step Title 4 <br> <small>Step Description
4</small></a></li>
<li class="nav-item"><a href="#step5" class="nav-link">Step Title 5 <br> <small>Step Description
5</small></a></li>
</ul>
<div class="tab-content">
<div id="step1" class="tab-pane" role="tabpanel" aria-labelledby="step-1">Step Content 1</div>
<div id="step2" class="tab-pane" role="tabpanel" aria-labelledby="step-2">Step Content 2</div>
<div id="step3" class="tab-pane" role="tabpanel" aria-labelledby="step-3">Step Content 3</div>
<div id="step4" class="tab-pane" role="tabpanel" aria-labelledby="step-4">Step Content 4</div>
<div id="step5" class="tab-pane" role="tabpanel" aria-labelledby="step-5">Step Content 5</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.js"
integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/smartwizard#5.1.1/dist/js/jquery.smartWizard.min.js"
integrity="sha256-ZDS9YBVOz85XYQvtiZg1ZMZOk+4dLz/MpYxxzsg5GdQ=" crossorigin="anonymous"></script>
<script>
$(document).ready(function () {
$('#stepwizard').smartWizard();
});
</script>
</body>
</html>
Wish you all the best!
for me the solution was that I was missing the "nav" class in the ul element so you might wanna look into that.
<ul class="nav">
<li>
<a class="nav-link" href="#step-1">
Step 1
</a>
</li>
<li>
<a class="nav-link" href="#step-2">
Step 2
</a>
</li>
<li>
<a class="nav-link" href="#step-3">
Step 3
</a>
</li>
<li>
<a class="nav-link" href="#step-4">
Step 4
</a>
</li>
</ul>
Related
Please i need help with image carousel on bootstrap 5!!!
Its not working and im very lost.
Also added the data-bs-target for bootstrap 5, that still didnt work
code below
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<div id="carimages" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carimage" data-slide-to="0" class="active"></li>
<li data-target="#carimage" data-slide-to="1"></li>
<li data-target="#carimage" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active"><img src="slide 1.jpg" alt=""></div>
<div class="carousel-item active"><img src="slide 2.jpg" alt=""></div>
<div class="carousel-item active"><img src="slide 3.jpg" alt=""></div>
</div>
<a class="left carousel-control" href="#carimages" data-slide="prev"><span class="icon-prev"></span></a>
<a class="right carousel-control" href="#carimages" data-slide="next"><span class="icon-next"></span></a>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.11.6/dist/umd/popper.min.js"
integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.min.js"
integrity="sha384-cuYeSxntonz0PPNlHhBs68uyIAVpIIOZZ5JqeqvYYIcEL727kskC66kF92t6Xl2V"
crossorigin="anonymous"></script>
</body>
</html>
Three things to consider:
follow Bootstrap carousel HTML structure as shown in the docs,
use data-bs-target, data-bs-slide-to, data-bs-slide if you use Bootstrap 5 and
include Bootstrap JS only once (Bootstrap JS bundle or Popper & Bootstrap JS separately, not both).
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div id="carimages" class="carousel slide" data-bs-ride="carousel">
<ol class="carousel-indicators">
<li data-bs-target="#carimages" data-bs-slide-to="0" class="active"></li>
<li data-bs-target="#carimages" data-bs-slide-to="1"></li>
<li data-bs-target="#carimages" data-bs-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active"><img src="slide 1.jpg" alt=""></div>
<div class="carousel-item"><img src="slide 2.jpg" alt=""></div>
<div class="carousel-item"><img src="slide 3.jpg" alt=""></div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carimages" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carimages" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
</body>
</html>
Try this code
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<div id="carimages" class="carousel slide" data-ride="carousel">
<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://images.unsplash.com/photo-1427830574887-32e5702033b0" class="d-block w-100" alt="https://images.unsplash.com/photo-1427830574887-32e5702033b0">
</div>
<div class="carousel-item">
<img src="https://images.unsplash.com/photo-1427830574887-32e5702033b0" class="d-block w-100" alt="https://images.unsplash.com/photo-1427830574887-32e5702033b0">
</div>
<div class="carousel-item">
<img src="https://images.unsplash.com/photo-1427830574887-32e5702033b0" class="d-block w-100" alt="https://images.unsplash.com/photo-1427830574887-32e5702033b0">
</div>
</div>
<a class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</a>
<a class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</a>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.11.6/dist/umd/popper.min.js"
integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.min.js"
integrity="sha384-cuYeSxntonz0PPNlHhBs68uyIAVpIIOZZ5JqeqvYYIcEL727kskC66kF92t6Xl2V"
crossorigin="anonymous"></script>
</body>
</html>
I have literally looked up everything and tried everything i found. First off all, there is a white space showing between the pictures, second, I can't click on the buttons to go to the next image, what do I do wrong?
I think I am doing something wrong with the head. I have tried copying multiple tutorials, and everything from the bootstrap website, still the results are different then. Also when working on my Navbar the results are different, so I feel like it might be more of a underlying problem?
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="bootstrap.css">
<link rel="stylesheet" href="style.css">
<title>A</title>
<link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</head>
<body>
<!--image caroussle-->
<div id="carousel" class="carousel slide" data-ride="carousel"
data-interval="2000">
<!--Carousel content-->
<div class="carousel-inner" >
<div class="carousel-item active">
<img src="/Kant en klaar/Carousel/Sfeer 1.jpg" class="d-block w-100" alt="Responsive image" alt="first slide">
</div>
<div class="carousel-item">
<img src="/Kant en klaar/Carousel/_MG_9087.jpg" class="d-block w-100" alt="Responsive image" alt="second slide">
</div>
<div class="carousel-item">
<img src="/Kant en klaar/Carousel/_MG_9352.jpg" class="d-block w-100" alt="Responsive image" alt="Third slide">
</div>
</div>
<!--End Carousel content-->
<!-- Previous & Next Buttons-->
<a href="#Carousel" class="carousel-control-prev" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
</a>
<a href="#Carousel" class="carousel-control-next" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
</a>
</div>
<!--end image catousel-->
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="js/bootstrap.js"></script>
</body>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
I have a personal website where I recently added a carousel on the left and text on the right.
Because I added the carousel (previously it was just a static photo), the text is pushed to the next line.
Here's my code:
#profile{
background-color:white;
margin-top:30px;
margin-bottom:10px;
}
#introduction{
background-color:white;
margin-top:50px;
}
.carousel-inner > .item > img {
width:40%;
height: auto;
margin-top:70px;
margin-right:30px;
float:left;
}
<!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">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.12/d3.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/queue-async/1.0.7/queue.min.js" type="text/javascript"></script>
</head>
<body data-spy="scroll" data-target=".navbar-collapse">
<div class="container" id="profile">
<div class="device-md hidden-xs"> </div>
<div class="col-md-12">
<div class="container">
<div class="col-md-6">
<div id="carouselSlidesOnly" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active">
<img class="d-block w-100" src="http://i.imgur.com/YsLpnLZ.png" alt="First slide">
</div>
</div>
<div class="item">
<img class="d-block w-100" src="http://i.imgur.com/YsLpnLZ.png" alt="Second slide">
</div>
<div class="item">
<img class="d-block w-100" src="http://i.imgur.com/YsLpnLZ.png" alt="Third slide">
</div>
</div>
</div>
</div>
<div class="col-md-6" id="introduction">
<p class="lead">Some lame text here </p>
</div>
</div>
</div>
</body>
</html>
I know Bootstrap has a 12-column layout, so I set my carousel to 6 and my text to 6. What did I do wrong?
1.do not use more than one container class.
2.use row class to reserve a row and then use column class [2 of 6]. - optional
3.main thing is you placed <div class="carousel-inner"> for only one item class.use it outside all item class
<!DOCTYPE html>
<head>
<style>
#profile{
background-color:white;
margin-top:30px;
margin-bottom:10px;
}
#introduction{
background-color:white;
margin-top:50px;
}
.carousel-inner > .item > img {
/*width:55%;*/
height: auto;
text-align: center;
}
</style>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>
<body data-spy="scroll" data-target=".navbar-collapse">
<div class="container" id="profile">
<div class="row">
<div class="col-md-6">
<div class="col-md-6">
<div id="carouselSlidesOnly" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active">
<img class="d-block w-100" src="http://i.imgur.com/YsLpnLZ.png" alt="First slide">
</div>
<div class="item">
<img class="d-block w-100" src="http://i.imgur.com/YsLpnLZ.png" alt="Second slide">
</div>
<div class="item">
<img class="d-block w-100" src="http://i.imgur.com/YsLpnLZ.png" alt="Third slide">
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6" id="introduction">
<p class="lead">Some lame text here </p>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.12/d3.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/queue-async/1.0.7/queue.min.js" type="text/javascript"></script>
</body>
I have a layout with three rows. I would like the first row to have one column that spans all 12 columns at the xs size. At larger sizes I would like two columns, one 9 columns wide and one 3 columns wide. I have attempted this by adding the second column and making it hidden at xs and visible and 3 wide at sm.
However, doing so breaks the layout of my second row at larger screen sizes for some reason. I'm not sure why.
Code working before adding hidden column:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="../styles/StyleSheet1.css" rel="stylesheet" />
<title></title>
</head>
<body>
<div class="container-fluid">
<div class="row-fluid">
<div class="col-xs-12">
<div id="header">
<h1>This will be the page header</h1>
<ul class="nav nav-tabs">
<li class="active">Home</li>
<li>Page w/o Sidebar</li>
<li>Menu Item 3</li>
</ul>
</div>
</div>
</div>
<div class="row-fluid">
<div class="col-xs-6 col-sm-3 col-sm-push-9">
<div id="side-bar">
This is the side bar
<ul class="list-group">
<li class="list-group-item active">item a</li>
<li class="list-group-item">item b</li>
<li class="list-group-item">item c</li>
</ul>
</div>
</div>
<div class="col-xs-12 col-sm-9 col-sm-pull-3">
<div id="content">
<h2>This is the main content</h2>
</div>
</div>
</div>
<div class="row-fluid">
<div class="col-xs-12">
<div id="footer">
This is the footer
</div>
</div>
</div>
</div>
</body>
</html>
Code broken after adding hidden column:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="../styles/StyleSheet1.css" rel="stylesheet" />
<title></title>
</head>
<body>
<div class="container-fluid">
<div class="row-fluid">
<div class="col-xs-12 col-sm-9">
<div id="header">
<h1>This will be the page header</h1>
<ul class="nav nav-tabs">
<li class="active">Home
</li>
<li>Page w/o Sidebar
</li>
<li>Menu Item 3
</li>
</ul>
</div>
</div>
<div class="hidden-xs col-sm-3 visible-sm ">
</div>
</div>
<div class="row-fluid">
<div class="col-xs-6 col-sm-3 col-sm-push-9">
<div id="side-bar">
This is the side bar
<ul class="list-group">
<li class="list-group-item active">item a</li>
<li class="list-group-item">item b</li>
<li class="list-group-item">item c</li>
</ul>
</div>
</div>
<div class="col-xs-12 col-sm-9 col-sm-pull-3">
<div id="content">
<h2>This is the main content</h2>
</div>
</div>
</div>
<div class="row-fluid">
<div class="col-xs-12">
<div id="footer">
This is the footer
</div>
</div>
</div>
</div>
</body>
</html>
I seem to have figured out the solution. I'm setting the column that I want hidden as visible on small, medium, and large, and setting it to 3 columns on small screens or larger.
I also added a div between the rows with the clearfix class.
<body>
<div class="container-fluid">
<div class="row-fluid">
<div class="col-xs-12 col-sm-9">
<div id="header">
<h1>This will be the page header</h1>
<ul class="nav nav-tabs">
<li class="active">Home
</li>
<li>Page w/o Sidebar
</li>
<li>Menu Item 3
</li>
</ul>
</div>
</div>
<div class="visible-sm visible-md visible-lg col-sm-3">
<div id="logo">
<p>This is the hidden area</p>
</div>
</div>
</div>
<div class="clearfix"></div>
<div class="row-fluid">
<!-- rest of the code from before -->
I'm using a Bootstrap 3 navbar static top with nav pills. And that it works.
I cannot make data toggles working when the navbar is fixed to top.
This is the snippet with the navbar static top:
<!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="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse navbar-static-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Page 1</li>
<li><a href="#page_2" data-toggle="pill" >Page 2</a></li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="tab-content">
<div class="tab-pane fade in active" id="page_1">
Page 1
</div>
<div class="tab-pane fade" id="page_2">
Page 2
</div>
</div>
</div>
</body>
</html>
And here it does not work:
<!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="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Page 1</li>
<li><a href="#page_2" data-toggle="pill" >Page 2</a></li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="tab-content">
<div class="tab-pane fade in active" id="page_1">
Page 1
</div>
<div class="tab-pane fade" id="page_2">
Page 2
</div>
</div>
</div>
</body>
</html>
The data toggle is working, it's just that your content is overlaid by the navbar. Take a look at the docs:
Body padding required
The fixed navbar will overlay your other
content, unless you add padding to the top of the <body>. Try out your
own values or use our snippet below. Tip: By default, the navbar is
50px high.
body { padding-top: 70px; }
Make sure to include this after the core Bootstrap CSS.
Example here: http://www.bootply.com/pGzO62Dp9L
When the navbar is fixed, the next div starts at the same spot. So the pills are working, but the navbar is covering the content. You need to add padding to the top of your container.