So there is my problem. I'm working to a project and intitally was made with bootstrap 2. Now i want to change the codesto bootstrap 3, but i've encountered some issues. Can someone help me to change the following part?
<body>
<div class="hero-unit">
<div class="container">
<div class="navbar">
<div class="navbar-inner">
Brand
<nav class="pull-right">
<ul class="nav">
<li>Home</li>
<li>About Us</li>
<li>Services</li>
<li>Blog</li>
<li>Contact Us</li>
</ul>
</nav>
</div><!-- end navbar inner -->
</div><!-- end navbar -->
<div class="hero-unit-inner text-center">
<h1>Text</h1>
<h4>Text </h4>
Get Started
<a href="#" >Learn More</a>
<img src="img/browser.png">
</div>
</div><!-- end of container -->
</div><!-- end jumbotron -->
</body>
Here is the Bootstrap 3 code:
<div class="container-fluid">
<div class="jumbotron">
<div class="container">
<div class="navbar">
Brand
<nav class="pull-xs-right">
<ul class="nav">
<li class="nav-item">Home
</li>
<li class="nav-item">About Us
</li>
<li class="nav-item">Services
</li>
<li class="nav-item">Blog
</li>
<li class="nav-item">Contact Us
</li>
</ul>
</nav>
</div>
<!-- end navbar inner -->
</div>
<!-- end navbar -->
<div class="hero-unit-inner text-xs-center">
<h1>Text</h1>
<h4>Text </h4>
Get Started
Learn More
<img src="img/browser.png" />
</div>
</div><!-- end jumbotron -->
</div><!-- end of container -->
http://getbootstrap.com/migration/ for a list of class changes, depredations etc.
Sorry I must have missed that one... It becomes "jumbrotron". See the link I shared so you can match up the classes. http://getbootstrap.com/migration/
Yes it's CSS. Keep in mind that some classes have changed while other have been deprecated.
If you used a theme to build your site with, then I advise having a look at the site where you downloaded the template as in most cases they update the templates...
Related
I have checked my code up and down and cannot find the problem. I do not see any typos or other errors. Can someone please let me know where I went wrong? I just want the tabs at the bottom to be visible and interactive as they should. Any help would be greatly appreciated.
<!-- Main -->
<section id="section">
<div class="container">
<div class="row">
<div class="col-6">
<img src="/mainpic.PNG" alt="Volcano"
class="img-fluid" >
</div>
<div class="div col-6">
<div id="myCarousel" class="carousel slide"
data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#myCarousel"
data-slide-to="0" class="active"></li>
<li data-target="#myCarousel"
data-slide-to="1"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<div class="div container">
<h1>Activity</h1>
<p>Fun DIY activites that will entertain and educate your little ones</p>
</a>
</div>
</div>
<div class="carousel-item">
<div class="div container">
<h1>Activity</h1>
<p>Fun DIY activites that will entertain and educate your little ones</p>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
I'm assum your are using Bootstrap v5.2+. As Bootstrap v5+, data-bs-ride instead of data-ride, On the carouse indicator, data-bs-target instead of data-target. you just change data-target to data-bs-target and data-ride to data-bs-ride to fix it.
you can visit this demo: https://fastbootstrap.com/components/carousel/#with-indicators
I tried to setup bootstrap tabs without javascript (like written here: http://getbootstrap.com/javascript/#markup).
Code copied from bootstrap page:
<div>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">Home</li>
<li role="presentation">Profile</li>
<li role="presentation">Messages</li>
<li role="presentation">Settings</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">Tab 1</div>
<div role="tabpanel" class="tab-pane" id="profile">Tab 2</div>
<div role="tabpanel" class="tab-pane" id="messages">Tab 3</div>
<div role="tabpanel" class="tab-pane" id="settings">Tab 4</div>
</div>
</div>
https://jsfiddle.net/Zoker/w6xeyznk/
As you can see, it does not work and I don't know why. Anybody got an idea?
Have you included the jquery.js and the bootstrap.js it's important for work because you don't have to code the js part but bootstap already have it.
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.js"></script>
When I get to the xs (Phone version) and press the Toggle Menu button it breaks the whole layout and the carousel rides on top of everything.
This is the Simple Sidebar
Simple Sidebar - Start Bootstrap Template
<body>
<div id="wrapper">
<!-- Sidebar -->
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li class="sidebar-brand">
RFA
</li>
<li>
BIO
</li>
<li>
Contact
</li>
<li>
Cadre
</li>
<li>
Store
</li>
<li>
Conferences
</li>
</ul>
</div>
<!-- /#sidebar-wrapper -->
<!-- Page Content -->
<div id="page-content-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-lg-12">
<h1 class="col-xs-12">Robin Fogarty and Associates</h1>
<img src="images/RFA_circles.png" alt="RFA" class="img-responsive rfa" title="Robin Fogarty and Associates">
<p>For the past 15 years Robin Fogarty and Associates has been a publisher and leading experts on staff development design for Skylight Publishing .</p>
Toggle Menu
</div>
</div>
</div>
</div>
<div id="carousel1" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel1" data-slide-to="0" class="active"> </li>
<li data-target="#carousel1" data-slide-to="1"></li>
<li data-target="#carousel1" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active"><img src="images/Rote&Spatial_color.png" alt="First slide image" class="center-block">
<div class="carousel-caption">
<h3>First slide Heading</h3>
<p>First slide Caption</p>
</div>
</div>
<div class="item"><img src="images/WalikingwithDaisy_color.png" alt="Second slide image" class="center-block">
<div class="carousel-caption">
<h3>Second slide Heading</h3>
<p>Second slide Caption</p>
</div>
</div>
<div class="item"><img src="images/Poster.png" alt="Third slide image" class="center-block">
<div class="carousel-caption">
<h3>Third slide Heading</h3>
<p>Third slide Caption</p>
</div>
</div>
</div>
<a class="left carousel-control" href="#carousel1" 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="#carousel1" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span><span class="sr-only">Next</span></a></div>
<!-- /#page-content-wrapper -->
<!-- /#wrapper -->
<!-- jQuery -->
<!-- <script src="js/jquery.js"></script> -->
<script src="js/jquery-1.11.2.min.js" type="text/javascript"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script> <!-- Menu Toggle Script -->
<script>
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
</script>
Wrap your carousel in a row, apply this CSS
.carousel-wrap{
margin-top: 50px;
}
CODEPEN DEMO
I am building a CMS editor and one of the things that can be customized is the text appearing in the Navbar. I am having a problem with showing two Navbars. Most examples i have seen are multiple Navbars one below the other and is not what i need.
I need the first Navbar to be the editor's own Navbar, while the second Navbar is somewhere below the first Navbar but not directly below it.
You have to remove navbar-fixed-top from the second nav
html would be like this
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="#">Project name</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<div class="container">
<h1>Conent</h1>
<p>Use this document as a way to quick start any new project.<br> All you get is this message and a barebones HTML document.</p>
</div> <!-- /container -->
<div class="navbar ">
<div class="navbar-inner">
<div class="container">
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
in bootply
So I wish to target slides with the indicators in Twitter-Bootstrap-3 but having some difficulty in doing so.
Here is my code:
<!-- Carousel
================================================== -->
<div id="myCarousel" class="carousel slide">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="1" class="active"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<div class="carousel-inner">
<div class="item active" data-id="1">
<img src="/assets/example/bg_suburb.jpg">
<div class="container">
<div class="carousel-caption">
<h1>Bootstrap 3 Carousel Layout</h1>
<p><small>This is an example layout with carousel that uses the Bootstrap 3 styles.</small></p>
</p></div>
</div>
</div>
<div class="item" data-id="2">
<img src="http://lorempixel.com/1500/600/abstract/1">
<div class="container">
<div class="carousel-caption">
<h1>Changes to the Grid</h1>
<p>Bootstrap 3 still features a 12-column grid, but many of the CSS class names have completely changed.</p>
</div>
</div>
</div>
<div class="item" data-id="3">
<img src="http://placehold.it/1500X500">
<div class="container">
<div class="carousel-caption">
<h1>Percentage-based sizing</h1>
<p>With "mobile-first" there is now only one percentage-based grid.</p>
</div>
</div>
</div>
</div>
<!-- Controls -->
<a class="carousel-control left" href="javascript:;" data-target="#myCarousel" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="carousel-control right" href="javascript:;" data-target="#myCarousel" data-slide="next">
<span class="icon-next"></span>
</a>
</div>
<!-- /.carousel -->
<script>
$('.carousel-indicators li').click(function(e){
e.stopPropagation();
$('#myCarousel').carousel($(this).data('slide-to')-1);
});
</script>
I need to change the indicators to words of my choosing and also add captions to each slide not siting on top of the slide so the indicators to be underneath the carousel with the caption underneath the indicators too. I have tried all manners of things but getting nowhere.