I tried to align text on the right side of image with
img {
float: left;
margin-right: 9px;
}
But it doesn't always work (on codepen it seems it works but not on my localhost)
full source code with Bootstrap and AngularJs
https://codepen.io/anon/pen/YZGjgq
<!DOCTYPE htwml PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta charset="utf-8">
<head>
<title>Details Layout</title>
<script src="https://code.angularjs.org/1.6.1/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap.min.js"></script>
<script
src="https://code.jquery.com/jquery-1.9.1.min.js"
integrity="sha256-wS9gmOZBqsqWxgIVgA8Y9WcQOa7PgSIX+rPA0VL2rbQ="
crossorigin="anonymous"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style media="screen">
/* make sidebar nav vertical */
#media (min-width: 768px) {
.sidebar-nav .navbar .navbar-collapse {
padding: 0;
max-height: none;
}
.sidebar-nav .navbar ul {
float: none;
}
.sidebar-nav .navbar ul:not {
display: block;
}
.sidebar-nav .navbar li {
float: none;
display: block;
}
.sidebar-nav .navbar li a {
padding-top: 12px;
padding-bottom: 12px;
}
}
</style>
<style media="screen">
.hidden {
display: none;
}
</style>
<style>
/* start left side menu */
ul.menu-navigation {
font-size: 1.2em;
float: left;
width: 250px;
margin: 0;
padding: 0;
list-style: none;
background: #e25454;
border-bottom: 1px solid #BF4E4E;
border-top: 1px solid #BF4E4E;
}
ul.menu-navigation li a {
display: block;
color: #fff;
text-decoration: none;
width: 205px;
padding: 10px 10px 10px 35px;
border-top: 1px solid #BF4E4E;
border-bottom: 1px solid #BF4E4E;
}
ul.menu-navigation li span {
display: none;
}
ul.menu-navigation li a:hover {
background-color: #BF4E4E;
border-top: 1px solid #BF4E4E;
}
ul.menu-navigation li a:hover span {
display: block;
font-size: 0.8em;
padding: 10px 0;
}
/* end left side menu */
</style>
<style>
img {
float: left;
margin-right: 9px;
}
</style>
<script>
var app = angular.module('app', []);
app.controller('MainCtrl', function($scope, $window, $sce) {
$scope.sections = [
{id:'section1',name:'Section 1'},
{id:'section2',name:'Section 2'},
{id:'section3',name:'Section 3'},
{id:'section4',name:'Section 4'},
];
});
</script>
</head>
<body ng-app="app" ng-controller="MainCtrl" >
<div class="container">
<div class="row">
<nav class="navbar">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Accueil</a>
</div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Page 1</li>
<li>Page 2</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</nav>
</div>
<div class="row">
<div class="col-sm-3">
<div class="panel-heading">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
<div class="media">
<div class="media-left">
<img src="http://www.freeiconspng.com/uploads/person-icon-5.png" class="media-object" style="width:60px">
</div>
<div class="media-body">
<h4 class="media-heading">Mr DOE John</h4>
<a href="#">CEO <span class="glyphicon glyphicon-pencil"></span>
</a>
</div>
</div>
</a>
</h4>
</div>
<ul class="menu-navigation nav-tabs">
<li ng-repeat="section in sections">
<a href="#{{section.id}}" id="mnu{{section.id}}" class="mnu" data-toggle="tab" data-target="#{{section.id}}">{{section.name}}
<span>
Lorem Ipsum es texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el.
</span>
</a>
</li>
</ul>
<!-- End Left_Side_NavBar_Component_Html -->
</div>
<div class="col-sm-9 tab-content" >
<form class="form-group" action="index.html" method="post" id="sections">
<div id="myTabContent" class="tab-content"> <!-- start class .tab-content to create tab -->
<!-- start tab 1 -->
<div class="tab-pane in active" id="{{sections[0].id}}"> <!-- tab 1-->
{{sections[0].name}} content
</div>
<!-- end tab 1 -->
<div class="tab-pane " id="{{sections[1].id}}"><!-- tab 2 -->
{{sections[1].name}} content
</div>
<div class="tab-pane " id="{{sections[2].id}}"><!-- tab 3 -->
<!-- start tab 3 content -->
{{sections[2].name}} content
<!-- end tab 3 content -->
</div>
<div class="tab-pane " id="{{sections[3].id}}"> <!-- tab 4 -->
{{sections[3].name}} content
</div>
</div> <!-- end class .tab-content to create tab -->
</form>
</div>
</div>
</div>
</body>
</html>
Override .media-left css class, add float:left in it.
.media-left{
float:left
}
Related
I'm making a playlist. I want the songs to appear in a striped list.
to do that I'm using this css
.track-list > ul > li{
list-style: none;
}
div ul li:nth-child(even) {
background-color: #ccc;
}
this is not working at all, but this code below works.
.track-list > ul > li{
list-style: none;
}
div ul li:nth-child(even) {
color: #ccc;
}
But if I remove the .track-list > ul > li{list-style: none;} the
div ul li:nth-child(even) {
background-color: #ccc;
}
is working properly.
here is a screenshot from my browser
this puzzles me allot and every advice would be welcome
Run the snippet full screen to see the issue, the background-color will disappear
#import url("//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css");
.wrapper{
height: 100vh;
}
.box-item{
position: relative;
width: 100%;
background-color: red;
color: blue;
height: 10vh;
margin-top: 40px;
}
footer > .listen{
position: absolute;
margin-right: 20px;
bottom: 0;
right: 0;
}
.playlist-dropdown{
border: solid 1px #dedede;
}
.interface{
border-bottom: solid 3px #dedede;
padding-bottom: 10px;
padding-top:10px;
}
.name-of-song{
margin-bottom: 10px;
}
.track-list{
padding-top: 10px;
}
.track-list > ul > li{
list-style: none;
}
div ul li:nth-child(even) {
background-color: #ccc !important;
}
#play, #pause, #mute, #unmute {
position: relative;
display: block;
}
#play {
position: absolute;
}
#pause:before {
position: absolute;
}
#pause:after {
position: absolute;
}
#mute{
position: absolute;
}
#unmute:before {
position: absolute;
}
#unmute:after {
position: absolute;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>playlist</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/custom.css">
</head>
<body>
<div class="wrapper">
<div class="container">
<div class="box-item ">
<footer>
<a class="listen" data-toggle="collapse" href="#playlist-collapse"><span class="glyphicon glyphicon-headphones" aria-hidden="true"></span></a>
</footer>
</div>
<div id="playlist-collapse" class="playlist-dropdown">
<div class="interface clearfix">
<div class="col-md-12 name-of-song">
Name of track being played
</div>
<div class="col-md-2">
<span class="glyphicon glyphicon-play"></span>
<span class="glyphicon glyphicon-pause"></span>
</div>
<div class="col-md-6">
progress bar
</div>
<div class="col-md-1">
<span class="glyphicon glyphicon-volume-off"></span>
<span class="glyphicon glyphicon-volume-up"></span>
</div>
<div class="col-md-3">
volume-bar
</div>
</div> <!--interface ends -->
<div class="track-list clearfix">
<ul>
<li class="track-row">
<div class="col-md-2 track-number">
01
</div>
<div class="col-md-7 track-name">
Track name/ song name
</div>
<div class="col-md-1 track-copyright">
©
</div>
<div class="col-md-2 track-duration">
00:25s
</div>
</li>
<li>
<div class="col-md-2 track-number">
02
</div>
<div class="col-md-7 track-name">
Track name/ song name 02
</div>
<div class="col-md-1 track-copyright">
©
</div>
<div class="col-md-2 track-duration">
00:25s
</div>
</li>
<li>
<div class="col-md-2 track-number">
03
</div>
<div class="col-md-7 track-name">
Track name/ song name03
</div>
<div class="col-md-1 track-copyright">
©
</div>
<div class="col-md-2 track-duration">
00:25s
</div>
</li>
</ul>
</div>
</div>
</div><!--container-->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
$('#play').on('click', function(event) {
console.log('play click clicked');
//currentPlayingTrack.play();
$('#pause').show();
$('#play').hide();
});
$('#pause').on('click', function(event) {
//currentPlayingTrack.pause();
$('#pause').hide();
$('#play').show();
});
$('#unmute').on('click', function(event) {
console.log('play click clicked');
//currentPlayingTrack.play();
$('#mute').show();
$('#unmute').hide();
});
$('#mute').on('click', function(event) {
//currentPlayingTrack.pause();
$('#mute').hide();
$('#unmute').show();
});
</script>
</div> <!--wrapper -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
The issue is with float. The li is getting collpased (height:0) because inside you are using col-* class without row. You need to consider row so that float elements (the col-*) are correctly cleared then row inside container to get the correct margin (https://getbootstrap.com/docs/3.3/css/#grid)
#import url("//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css");
.wrapper{
height: 100vh;
}
.box-item{
position: relative;
width: 100%;
background-color: red;
color: blue;
height: 10vh;
margin-top: 40px;
}
footer > .listen{
position: absolute;
margin-right: 20px;
bottom: 0;
right: 0;
}
.playlist-dropdown{
border: solid 1px #dedede;
}
.interface{
border-bottom: solid 3px #dedede;
padding-bottom: 10px;
padding-top:10px;
}
.name-of-song{
margin-bottom: 10px;
}
.track-list{
padding-top: 10px;
}
.track-list > ul > li{
list-style: none;
}
div ul li:nth-child(even) {
background-color: #ccc !important;
}
#play, #pause, #mute, #unmute {
position: relative;
display: block;
}
#play {
position: absolute;
}
#pause:before {
position: absolute;
}
#pause:after {
position: absolute;
}
#mute{
position: absolute;
}
#unmute:before {
position: absolute;
}
#unmute:after {
position: absolute;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>playlist</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/custom.css">
</head>
<body>
<div class="wrapper">
<div class="container">
<div class="box-item ">
<footer>
<a class="listen" data-toggle="collapse" href="#playlist-collapse"><span class="glyphicon glyphicon-headphones" aria-hidden="true"></span></a>
</footer>
</div>
<div id="playlist-collapse" class="playlist-dropdown">
<div class="interface clearfix">
<div class="col-md-12 name-of-song">
Name of track being played
</div>
<div class="col-md-2">
<span class="glyphicon glyphicon-play"></span>
<span class="glyphicon glyphicon-pause"></span>
</div>
<div class="col-md-6">
progress bar
</div>
<div class="col-md-1">
<span class="glyphicon glyphicon-volume-off"></span>
<span class="glyphicon glyphicon-volume-up"></span>
</div>
<div class="col-md-3">
volume-bar
</div>
</div> <!--interface ends -->
<div class="track-list clearfix">
<ul class="container-fluid">
<li class="track-row row">
<div class="col-md-2 track-number">
01
</div>
<div class="col-md-7 track-name">
Track name/ song name
</div>
<div class="col-md-1 track-copyright">
©
</div>
<div class="col-md-2 track-duration">
00:25s
</div>
</li>
<li class="row">
<div class="col-md-2 track-number">
02
</div>
<div class="col-md-7 track-name">
Track name/ song name 02
</div>
<div class="col-md-1 track-copyright">
©
</div>
<div class="col-md-2 track-duration">
00:25s
</div>
</li>
<li class="row">
<div class="col-md-2 track-number">
03
</div>
<div class="col-md-7 track-name">
Track name/ song name03
</div>
<div class="col-md-1 track-copyright">
©
</div>
<div class="col-md-2 track-duration">
00:25s
</div>
</li>
</ul>
</div>
</div>
</div><!--container-->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
$('#play').on('click', function(event) {
console.log('play click clicked');
//currentPlayingTrack.play();
$('#pause').show();
$('#play').hide();
});
$('#pause').on('click', function(event) {
//currentPlayingTrack.pause();
$('#pause').hide();
$('#play').show();
});
$('#unmute').on('click', function(event) {
console.log('play click clicked');
//currentPlayingTrack.play();
$('#mute').show();
$('#unmute').hide();
});
$('#mute').on('click', function(event) {
//currentPlayingTrack.pause();
$('#mute').hide();
$('#unmute').show();
});
</script>
</div> <!--wrapper -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
Why list-style is affecting this?
When list-style is different from none, we have the bullets that add a default height to the li element even if the element is empty or contains float elements without clearfix. Using none will remove this height and we have issues:
ul {
border: 1px solid;
}
span {
float: left;
}
li:nth-child(even) {
background: red;
color: blue;
}
<ul>
<li>element 1</li>
<li></li>
<li>element 3</li>
</ul>
<ul style="list-style:none">
<li>element 1</li>
<li></li>
<li>element 3</li>
</ul>
<ul>
<li><span>float element 1</span></li>
<li><span>float element 1</span></li>
<li><span>float element 1</span></li>
</ul>
<ul style="list-style:none">
<li><span>float element 1</span></li>
<li><span>float element 1</span></li>
<li><span>float element 1</span></li>
</ul>
That issue had caused by the li had the height 0 when the size is bigger than 991px because of floated div has col-* class.
You use the bootstrap and col-md-x has the float property when the screen size is bigger than 991px.
So you have to set the property overflow:hidden to li to wrap the floated child's content.
Try using like this.
.track-list > ul > li{
list-style: none;
overflow:hidden;
}
The below code is the fixed one.
#import url("//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css");
.wrapper{
height: 100vh;
}
.box-item{
position: relative;
width: 100%;
background-color: red;
color: blue;
height: 10vh;
margin-top: 40px;
}
footer > .listen{
position: absolute;
margin-right: 20px;
bottom: 0;
right: 0;
}
.playlist-dropdown{
border: solid 1px #dedede;
}
.interface{
border-bottom: solid 3px #dedede;
padding-bottom: 10px;
padding-top:10px;
}
.name-of-song{
margin-bottom: 10px;
}
.track-list{
padding-top: 10px;
}
.track-list > ul > li{
list-style: none;
overflow:hidden;
}
div ul li:nth-child(even) {
background-color: #ccc !important;
}
#play, #pause, #mute, #unmute {
position: relative;
display: block;
}
#play {
position: absolute;
}
#pause:before {
position: absolute;
}
#pause:after {
position: absolute;
}
#mute{
position: absolute;
}
#unmute:before {
position: absolute;
}
#unmute:after {
position: absolute;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>playlist</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/custom.css">
</head>
<body>
<div class="wrapper">
<div class="container">
<div class="box-item ">
<footer>
<a class="listen" data-toggle="collapse" href="#playlist-collapse"><span class="glyphicon glyphicon-headphones" aria-hidden="true"></span></a>
</footer>
</div>
<div id="playlist-collapse" class="playlist-dropdown">
<div class="interface clearfix">
<div class="col-md-12 name-of-song">
Name of track being played
</div>
<div class="col-md-2">
<span class="glyphicon glyphicon-play"></span>
<span class="glyphicon glyphicon-pause"></span>
</div>
<div class="col-md-6">
progress bar
</div>
<div class="col-md-1">
<span class="glyphicon glyphicon-volume-off"></span>
<span class="glyphicon glyphicon-volume-up"></span>
</div>
<div class="col-md-3">
volume-bar
</div>
</div> <!--interface ends -->
<div class="track-list clearfix">
<ul>
<li class="track-row">
<div class="col-md-2 track-number">
01
</div>
<div class="col-md-7 track-name">
Track name/ song name
</div>
<div class="col-md-1 track-copyright">
©
</div>
<div class="col-md-2 track-duration">
00:25s
</div>
</li>
<li>
<div class="col-md-2 track-number">
02
</div>
<div class="col-md-7 track-name">
Track name/ song name 02
</div>
<div class="col-md-1 track-copyright">
©
</div>
<div class="col-md-2 track-duration">
00:25s
</div>
</li>
<li>
<div class="col-md-2 track-number">
03
</div>
<div class="col-md-7 track-name">
Track name/ song name03
</div>
<div class="col-md-1 track-copyright">
©
</div>
<div class="col-md-2 track-duration">
00:25s
</div>
</li>
</ul>
</div>
</div>
</div><!--container-->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
$('#play').on('click', function(event) {
console.log('play click clicked');
//currentPlayingTrack.play();
$('#pause').show();
$('#play').hide();
});
$('#pause').on('click', function(event) {
//currentPlayingTrack.pause();
$('#pause').hide();
$('#play').show();
});
$('#unmute').on('click', function(event) {
console.log('play click clicked');
//currentPlayingTrack.play();
$('#mute').show();
$('#unmute').hide();
});
$('#mute').on('click', function(event) {
//currentPlayingTrack.pause();
$('#mute').hide();
$('#unmute').show();
});
</script>
</div> <!--wrapper -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
Please excuse me for butchering all of the terms here, but I am going to try to get across what I hope to accomplish. Right now I have managed to create a background image that scales to the window size and a navigation bar. I would like to start adding some bootstrap grid items on top of all this, but also under the navigation bar. Here is my 3-year-old depiction of what I am trying to make:
As of right now, I have called the background image class and then the navigation class. I am now trying to add a container so that I can use a bootstrap grid of some sort to add the four buttons and a panel.
The issues I am running into are that it seems blank rows will 0 in height and not create the buffer from the top. Another issue i have is the layering. My bootstrap grid items appear behind my background.
Can someone please point me in the right direction for layout? Am I doing this all wrong and should be using something else entirely? I am really trying to keep all of this to a single index.html file and avoid importing unneeded assets or running a bunch of scripts.
Here is the code I am working with right now:
<?php
session_start();
?>
<!DOCTYPE html>
<html>
<head>
<title>title</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/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
body, html {
height: 100%;
margin: 0;
font: 400 15px/1.8 "Lato", sans-serif;
color: #777;
}
.bgimg-1, .bgimg-2, .bgimg-3 {
position: relative;
opacity: .80;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.bgimg-1 {
background-image: url("img/home_bg.jpg");
height: 100%;
}
.caption {
position: absolute;
left: 0;
top: 50%;
width: 100%;
text-align: center;
color: #fff;
}
.caption span.border {
background-color: #111;
color: #fff;
padding: 18px;
font-size: 25px;
letter-spacing: 10px;
}
h3 {
letter-spacing: 5px;
text-transform: uppercase;
font: 20px "Lato", sans-serif;
color: #111;
}
/* Add a dark background color with a little bit see-through */
.navbar {
margin-bottom: 0;
background-color: #2d2d30;
border: 0;
font-size: 11px !important;
letter-spacing: 4px;
opacity:0.8;
}
/* Add a gray color to all navbar links */
.navbar li a, .navbar .navbar-brand {
color: #d5d5d5 !important;
}
/* On hover, the links will turn white */
.navbar-nav li a:hover {
color: #fff !important;
}
/* The active link */
.navbar-nav li.active a {
color: #fff !important;
background-color:#29292c !important;
}
/* Remove border color from the collapsible button */
.navbar-default .navbar-toggle {
border-color: transparent;
}
/* Dropdown */
.open .dropdown-toggle {
color: #fff ;
background-color: #555 !important;
}
/* Dropdown links */
.dropdown-menu li a {
color: #000 !important;
}
.dropdown-menu form div {
padding: 0px 20px;
}
/* On hover, the dropdown links will turn red */
.dropdown-menu li a:hover {
background-color: red !important;
}
</style>
</head>
<body>
<div class="bgimg-1"></div>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="myhomepage">title</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<?php if (isset($_SESSION['username']) && !empty($_SESSION['username'])): ?>
<li class="dropdown">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">WELCOME, <?php echo $_SESSION['username'] ?><span class="caret"></span></a>
<ul class="dropdown-menu">
<li>LOGOUT</li>
</ul>
</li>
</li>
<?php else: ?>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">REGISTER<span class="caret"></span></a>
<ul class="dropdown-menu">
<form action="registration/register.php" method="post">
<div class="form-group">
<input type="text" name="reg_username" id="reg_username" class="form-control" placeholder=" Username" value="">
</div>
<div class="form-group">
<input type="email" name="reg_email" id="reg_email" class="form-control" placeholder=" Email Address" value="">
</div>
<div class="form-group">
<input type="password" name="reg_password_1" id="reg_password_1" class="form-control" placeholder=" Password">
</div>
<div class="form-group">
<input type="password" name="reg_password_2" id="reg_password_2" class="form-control" placeholder=" Confirm Password">
</div>
<div class="form-group">
<div class="row">
<div>
<input type="submit" name="register-submit" id="register-submit" class="form-control btn btn-info" value=" Register Now">
</div>
</div>
</div>
</form>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">LOGIN<span class="caret"></span></a>
<ul class="dropdown-menu">
<form action="registration/register.php" method="post">
<div class="form-group">
<input type="text" name="log_username" id="log_username" class="form-control" placeholder=" Username" value="">
</div>
<div class="form-group">
<input type="password" name="log_password" id="log_password" class="form-control" placeholder=" Password">
</div>
<!--
<div class="form-group">
<label>
<input type="checkbox" checked="checked" name="remember"> Remember me
</label>
</div>
-->
<div class="form-group">
<div class="row">
<div>
<input type="submit" name="login-submit" id="login-submit" class="form-control btn btn-info" value=" Login Now">
</div>
</div>
</div>
</form>
</ul>
</li>
<?php endif; ?>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-sm-12"></div>
</div>
<div class="row">
<div class="col-sm-12"></div>
</div>
<div class="row">
<div class="col-sm-12"></div>
</div>
<div class="row">
<div class="col-sm-12"></div>
</div>
<div class="row">
<div class="col-sm-12"></div>
</div>
<div class="row">
<div class="col-sm-2"></div>
<div class="col-sm-2" style="background-color:yellow;">test1</div>
<div class="col-sm-2" style="background-color:yellow;">test2</div>
<div class="col-sm-2" style="background-color:yellow;">test3</div>
<div class="col-sm-2" style="background-color:yellow;">test4</div>
<div class="col-sm-2"></div>
</div>
</div>
</body>
</html>
I appreciate any and all help. Thank you.
Okay, after messing around with this a bit I figured out that you can just stack containers and then make the highest level container have an image in the style section. I am not sure if this is the proper approach, but it seems to be putting the bootstrap containers on top of the background. The only issues I see are the lack of padding at the moment and now my navigation bar dropdowns now display behind the container buttons. That being said, I wanted to at least get this up here in case anyone can fill in the blanks.
<?php
session_start();
?>
<!DOCTYPE html>
<html>
<head>
<title>title</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/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
body, html {
height: 100%;
margin: 0;
font: 400 15px/1.8 "Lato", sans-serif;
color: #777;
}
.caption {
position: absolute;
left: 0;
top: 50%;
width: 100%;
text-align: center;
color: #fff;
}
.caption span.border {
background-color: #111;
color: #fff;
padding: 18px;
font-size: 25px;
letter-spacing: 10px;
}
h3 {
letter-spacing: 5px;
text-transform: uppercase;
font: 20px "Lato", sans-serif;
color: #111;
}
/* Add a dark background color with a little bit see-through */
.navbar {
margin-bottom: 0;
background-color: #2d2d30;
border: 0;
font-size: 11px !important;
letter-spacing: 4px;
opacity:0.8;
}
/* Add a gray color to all navbar links */
.navbar li a, .navbar .navbar-brand {
color: #d5d5d5 !important;
}
/* On hover, the links will turn white */
.navbar-nav li a:hover {
color: #fff !important;
}
/* The active link */
.navbar-nav li.active a {
color: #fff !important;
background-color:#29292c !important;
}
/* Remove border color from the collapsible button */
.navbar-default .navbar-toggle {
border-color: transparent;
}
/* Dropdown */
.open .dropdown-toggle {
color: #fff ;
background-color: #555 !important;
}
/* Dropdown links */
.dropdown-menu li a {
color: #000 !important;
}
.dropdown-menu form div {
padding: 0px 20px;
}
/* On hover, the dropdown links will turn red */
.dropdown-menu li a:hover {
background-color: red !important;
}
.button, .tablinks {
margin-bottom: 0;
background-color: #2d2d30;
color: #d5d5d5;
border: none;
outline:none;
font-size: 11px !important;
letter-spacing: 4px;
opacity:0.8;
}
.active, .button:hover, .tablinks:hover {
color: #fff;
background-color: #555 !important;
}
.container-bg {
position: relative;
opacity: .80;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-image: url("img/home_bg.jpg");
height: 100%;
}
</style>
</head>
<body>
<div class="container-bg">
<div class="container-fluid">
<div class="row">
<nav class="navbar navbar-default">
<div class="navbar-header">
<a class="navbar-brand" href="myhomepage">title</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<?php if (isset($_SESSION['username']) && !empty($_SESSION['username'])): ?>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">WELCOME, <?php echo $_SESSION['username'] ?><span class="caret"></span></a>
<ul class="dropdown-menu">
<li>LOGOUT</li>
</ul>
</li>
<?php else: ?>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">REGISTER<span class="caret"></span></a>
<ul class="dropdown-menu">
<form action="registration/register.php" method="post">
<div class="form-group">
<input type="text" name="reg_username" id="reg_username" class="form-control" placeholder=" Username" value="">
</div>
<div class="form-group">
<input type="email" name="reg_email" id="reg_email" class="form-control" placeholder=" Email Address" value="">
</div>
<div class="form-group">
<input type="password" name="reg_password_1" id="reg_password_1" class="form-control" placeholder=" Password">
</div>
<div class="form-group">
<input type="password" name="reg_password_2" id="reg_password_2" class="form-control" placeholder=" Confirm Password">
</div>
<div class="form-group">
<div class="row">
<div>
<input type="submit" name="register-submit" id="register-submit" class="form-control btn btn-info" value=" Register Now">
</div>
</div>
</div>
</form>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">LOGIN<span class="caret"></span></a>
<ul class="dropdown-menu">
<form action="registration/register.php" method="post">
<div class="form-group">
<input type="text" name="log_username" id="log_username" class="form-control" placeholder=" Username" value="">
</div>
<div class="form-group">
<input type="password" name="log_password" id="log_password" class="form-control" placeholder=" Password">
</div>
<!--
<div class="form-group">
<label>
<input type="checkbox" checked="checked" name="remember"> Remember me
</label>
</div>
-->
<div class="form-group">
<div class="row">
<div>
<input type="submit" name="login-submit" id="login-submit" class="form-control btn btn-info" value=" Login Now">
</div>
</div>
</div>
</form>
</ul>
</li>
<?php endif; ?>
</ul>
</div>
</nav>
</div>
<!-- Tab links -->
<div class="tab" id="tab">
<button class="tablinks" onclick="openTab(event, 'tab1')" id="defaultOpen">tab1</button>
<button class="tablinks" onclick="openTab(event, 'tab2')">tab2</button>
<button class="tablinks" onclick="openTab(event, 'tab3')">tab3</button>
<button class="tablinks" onclick="openTab(event, 'tab4')">tab4</button>
</div>
<div class="row">
<div class="col-md-12">
<div class="jumbotron">
<!-- Tab content -->
<div id="tab1" class="tabcontent">
<h3>tab1</h3>
<p>list stuff for tab1</p>
</div>
<div id="tab2" class="tabcontent">
<h3>tab2</h3>
<p>list stuff for tab2</p>
</div>
<div id="tab3" class="tabcontent">
<h3>tab3</h3>
<p>list stuff for tab3</p>
</div>
<div id="tab4" class="tabcontent">
<h3>tab4</h3>
<p>list stuff for tab4</p>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
function openTab(evt, tabName) {
// Declare all variables
var i, tabcontent, tablinks;
// Get all elements with class="tabcontent" and hide them
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
// Get all elements with class="tablinks" and remove the class "active"
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
// Show the current tab, and add an "active" class to the button that opened the tab
document.getElementById(tabName).style.display = "block";
evt.currentTarget.className += " active";
}
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
</script>
</body>
</html>
I have a simple side nav that I built out that I want fixed. From my understanding of bootstrap classes columns are supposed to be aligned. My second column for most of my page content ends up falling behind my sidenav. How do you have a second column aligned with your first while keeping that first column fixed?
#logo {
height: 40vh;
width: 20vw; }
.dropdown-toggle, .dropdown-menu {
width: 300px; }
.btn-group img {
margin-right: 10px; }
.dropdown-toggle {
padding-right: 50px; }
.dropdown-toggle .glyphicon {
margin-left: 20px;
margin-right: -40px; }
.dropdown-menu > li > a:hover {
background: white; }
/* $search-blue */
.dropdown-header {
background: #ccc;
font-size: 14px;
font-weight: 700;
padding-top: 5px;
padding-bottom: 5px;
margin-top: 10px;
margin-bottom: 5px; }
#sidebar {
min-width: 250px;
max-width: 250px;
height: 100vh;
border: 1px solid pink; }
/*# sourceMappingURL=notification.css.map */
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid" style="background-color: #e0f7fa">
<div class="d-flex flex-row" style="border:1px solid black;">
<div class="col d-flex justify-content-start" style="border:1px solid blue;">
<img id="logo" src="./images/logo.png">
</div><!--logo -->
<div class="col d-flex align-items-center justify-content-end" style="border:1px solid red;">
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<img src="http://lorempixel.com/75/50/abstract/" style="border-radius: 50%;">
0123 4567 8912 3456
<span class="glyphicon glyphicon-chevron-down"></span>
</button>
<ul class="dropdown-menu">
<li class="dropdown-header">Member name (you)</li>
<li>
<img src="http://lorempixel.com/75/50/abstract/">0123 4567 8912 3456
</li>
<li>
<img src="http://lorempixel.com/75/50/abstract/">0123 4567 8912 3456
</li>
<li class="dropdown-header">Member name</li>
<li>
<img src="http://lorempixel.com/75/50/abstract/">0123 4567 8912 3456
</li>
</ul>
</div>
</div><!--dropdown for profile image,name and description -->
</div>
</div><!--container for header -->
<div class="container-fluid" style="border: 1px solid black">
<div class="row">
<div class="col-4 position-fixed align-self-start">
<nav id="sidebar">
<!-- Sidebar Header -->
<div class="sidebar-header">
<h3>Notification</h3>
</div>
<!-- Sidebar Links -->
<ul class="list-unstyled components">
<li class="active">Edit Profile</li>
<li>Privacy & Security</li>
<li>Payment Setting</li>
<li>Transaction History</li>
<li>Trust & Verfication</li>
<li>My Education Blog</li>
<li>Promotions</li>
</ul>
<ul>Cancel Account</ul>
</nav>
</div>
<div class="col-8 align-self-center">
<h3>Send notifications via</h3>
</div><!--this should be directly next to navbar -->
</div>
</div><!--container for navbar and page content -->
You can see that I have a header in the top page with an image and a dropdown in its own container. Then following that I have a container with the sidenav and where it says "get notifications via" is misplaced. I added borders so you can see the where everything is located.
I have read a lot of posts about this but I still didn't find an answer.
I have a footer that I want to be at the end of the page, not fixed.
The problem is that the footer is where the content ends. Look at picture.
This is my HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title> Mobtech - Privatni korisnici </title>
<!--Ubaci bootstrap css -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<link rel="css/basic-template.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet">
</head>
<body>
<!--Navigation bar -->
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-container">
<span class="sr-only"> Pokazi i sakrij navigaciju </span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<span> <img src="Slike/logo.png" alt="LogoSlika"/> </span>
<font face="Roboto Condensed" size="4" color="green"> Mobtech </font>
</a>
</div>
<div class="collapse navbar-collapse" id="navbar-container">
<ul class="nav navbar-nav navbar-right">
<li> Početna strana </li>
<li class="active"> Privatni korisnici </li>
<li> Poslovni korisnici </li>
<li> Uređaji </li>
<li> O Nama </li>
</ul>
</div>
</div>
</nav>
<br />
<div class="container"> <!--Container -->
<div class="row">
<!-- Kolona na velikom ekranu (lg) prikazuje duzinu jedne kolone, Ekstra small (xs) prikazuje 4 kolone -->
<div class="col-lg-12 bg-success">
<p> Outer div </p>
<div class="col-lg-6 bg-primary">
<p> Inner div </p>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer class="mojFooter">
<font face="Roboto Condensed" size="4"> <center>
<div class="container">
<div class="row" style="margin-top: 7px;">
<p> © Copyright Ivan Prošić 2016.</p>
</div>
<div class="bottom-footer">
<div class="col-md-12">
<ul class="footer-nav">
<li> Facebook </li>
<li> Twitter </li>
<li> Google+ </li>
</ul>
</div>
</div>
</div>
</font> </center>
</footer>
<!-- JavaScript fajl -->
<script src="js/jquery.min.js"></script>
<!-- Kompresovan JavaScript fajl -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
This is my CSS, for the footer only:
.mojFooter{
background-color: #f8f8f8;
color: #00a651;
padding-top: 0px;
border-top: 1px solid #e7e7e7;
margin-bottom: 0px;
}
.bottom-footer{
border-top: 1px solid #00a651;
margin-top: 0px;
padding-top: 7px;
color: #00a651;
}
.footer-nav li{
display: inline;
padding: 0px 40px;
}
.footer-nav a{
color: grey;
text-decoration: none;
}
When using bootstrap 4 or 5, flexbox could be used to achieve desired effect:
<body class="d-flex flex-column min-vh-100">
<header>HEADER</header>
<content>CONTENT</content>
<footer class="mt-auto"></footer>
</body>
Please check the examples: Bootstrap 4 Bootstrap 5
In bootstrap 3 and without use of bootstrap. The simplest and cross browser solution for this problem is to set a minimal height for body object. And then set absolute position for the footer with bottom: 0 rule.
body {
min-height: 100vh;
position: relative;
margin: 0;
padding-bottom: 100px; //height of the footer
box-sizing: border-box;
}
footer {
position: absolute;
bottom: 0;
height: 100px;
}
Please check this example:
Bootstrap 3
In my case for Bootstrap4:
<body class="d-flex flex-column min-vh-100">
<div class="wrapper flex-grow-1"></div>
<footer></footer>
</body>
You can just add:
style="min-height:100vh"
to your page content container and place the footer in another container
Use this stylesheet:
/* Sticky footer styles
-------------------------------------------------- */
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
line-height: 60px; /* Vertically center the text there */
background-color: #f5f5f5;
}
/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */
body > .container {
padding: 60px 15px 0;
}
.footer > .container {
padding-right: 15px;
padding-left: 15px;
}
code {
font-size: 80%;
}
© 2021 Company, Inc
<a href="/" class="col-md-4 d-flex align-items-center justify-content-center mb-3 mb-md-0 me-md-auto link-dark text-decoration-none">
<svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg>
</a>
<ul class="nav col-md-4 justify-content-end">
<li class="nav-item">Home</li>
<li class="nav-item">Features</li>
<li class="nav-item">Pricing</li>
<li class="nav-item">FAQs</li>
<li class="nav-item">About</li>
</ul>
:root {
--text: #daf7a6;
--header: #581845;
--main: #900c3f;
--footer: #ff5733;
}
*,
*:before,
*:after {
box-sizing: border-box;
}
html,
body {
height: 100%;
}
header,
main,
footer {
color: var(--text);
height: 100px;
padding: 1rem;
}
header {
background-color: var(--header);
}
main {
background-color: var(--main);
}
footer {
background-color: var(--footer);
position: sticky;
top: 100vh;
}
<header>header</header>
<main>content</main>
<footer>footer</footer>
I'm using the basic fullscreen carousel from Bootstrap. It's working great, full screen. The issue is I need to add a custom header and footer to it (along with a little bit of text in the center). I want the header and footer to overlap the carousel (as if the carousel is in the background). Is this possible? I've tried playing around with z-index a bit, no success so far.
Here's the code for the carousel.
<!-- Full Page Image Background Carousel Header -->
<header 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('assets/img/background-image.jpg');"></div>
</div>
<div class="item">
<!-- Set the second background image using inline CSS below. -->
<div class="fill" style="background-image:url('assets/img/background-image.jpg');"></div>
</div>
<div class="item">
<!-- Set the third background image using inline CSS below. -->
<div class="fill" style="background-image:url('assets/img/background-image.jpg');"></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>
</header>
Update 1.0
I already adjust from my template.Hope you learn something from my coding.
HTML
<div class="wrapper">
<div class="nav-bar-area">
<div class="menu">
<div id="text">Menu</div>
<div id="image"><img src="http://www.rcunlocks.com/IMG_0468.PNG" /></div>
</div>
<div class="nav-bar">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Products</li>
<li>Services</li>
<li>Careers</li>
<li>Contact US</li>
</ul>
</div>
</div>
<div class="container--head">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<div class="carousel-tooltip">
<div class="caraousel-tooltip-item active" data-index="0">
<a href="#" class="tooltip-carousel" style="top:100px;left: 100px;padding:5px 10px;background:#f00;color:#fff;display:inline-block" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Wicked Sick">
<span class="fa fa-heart"></span>
</a>
<a href="#" class="tooltip-carousel" style="top:120px;left: 400px;padding:5px 10px;background:#000;color:#fff;display:inline-block" data-container="body" data-toggle="popover" data-placement="bottom" data-content="First Blood">
<span class="fa fa-star"></span>
</a>
</div>
<div class="caraousel-tooltip-item" data-index="1">
<a href="#" class="tooltip-carousel" style="top:120px;left: 300px;padding:5px 10px;background:#000;color:#fff;display:inline-block" data-container="body" data-toggle="popover" data-placement="top" data-content="NeverMore">
<span class="fa fa-plus"></span>
</a>
</div>
<div class="caraousel-tooltip-item" data-index="2">
<a href="#" class="tooltip-carousel" style="top:100px;left: 500px;padding:5px 10px;background:#000;color:#fff;display:inline-block" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Pudge">
<span class="fa fa-plus"></span>
</a>
</div>
<div class="caraousel-tooltip-item" data-index="3">
<a href="#" class="tooltip-carousel" style="top:20px;left: 300px;padding:5px 10px;background:#000;color:#fff;display:inline-block" data-container="body" data-toggle="popover" data-placement="right" data-content="Hello World">
<span class="fa fa-plus"></span>
</a>
</div>
<div class="caraousel-tooltip-item" data-index="4">
<a href="#" class="tooltip-carousel" style="top:180px;left: 200px;padding:5px 10px;background:#000;color:#fff;display:inline-block" data-container="body" data-toggle="popover" data-placement="bottom" >
<span class="fa fa-plus"></span>
</a>
</div>
</div>
<!-- Indicators -->
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="http://blogs-images.forbes.com/rogerkay/files/2014/06/dell-background-2.jpg" alt="..." style="width:100%">
<div class="carousel-caption">
<h3>Dell</h3>
Bring The Game
</div>
</div>
<div class="item">
<img src="http://www.techarena.co.ke/wp-content/uploads/2015/02/acer-on-black-wallpapers_30230_1920x1080.jpg" alt="..." style="width:100%">
<div class="carousel-caption">
<h3>Acerr</h3>
Just Starting
</div>
</div>
<div class="item">
<img src="http://www.hardwareinside.de/wp-content/uploads/2015/06/Asus_logo-7.jpg" alt="..." style="width:100%">
<div class="carousel-caption">
<h3>Lorem ipsum dolor</h3>
Lorem ipsum dolor sit amet, tharsiam eam est in.
</div>
</div>
<div class="item">
<img src="http://www.hardwareinside.de/wp-content/uploads/2015/06/Asus_logo-7.jpg" alt="..." style="width:100%">
<div class="carousel-caption">
<h3>Lorem ipsum dolor</h3>
Lorem ipsum dolor sit amet, tharsiam eam est in.
</div>
</div>
<div class="item">
<img src="http://orig08.deviantart.net/3f83/f/2012/097/c/b/hp_in_dark_by_yarinsl45-d4vak5s.png" alt="..." style="width:100%">
<div class="carousel-caption">
<h3>Hello World</h3>
The Taste Can't Describe
</div>
</div>
</div>
<!-- Controls -->
</div>
</div>
</div>
<!-- Fontawesome -->
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<!-- Bootstrap -->
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
CSS
.body {
background-color: #bbb;
}
.container--head {
background: #BF3E11;
}
.tooltip-carousel {
position: absolute;
z-index: 11;
border-radius: 50%;
}
.caraousel-tooltip-item {
display: none;
}
.caraousel-tooltip-item.active {
display: block;
}
#menu {
font-family: Arial, sans-serif;
font-weight: bold;
text-transform: uppercase;
margin: 50px 0;
padding: 0;
list-style-type: none;
background-color: #eee;
font-size: 13px;
height: 40px;
border-top: 2px solid #eee;
border-bottom: 2px solid #ccc;
}
#menu li {
float: left;
margin: 0;
}
#menu li a {
text-decoration: none;
display: block;
padding: 0 20px;
line-height: 40px;
color: #666;
}
#menu li a:hover, #menu li.active a {
background-color: #f5f5f5;
border-bottom: 2px solid #DDD;
color: #999;
}
#menu_wrapper ul {margin-left: 12px;}
#menu_wrapper {padding: 0 16px 0 0; background: url(images/grey.png) no-repeat right;}
#menu_wrapper div {float: left; height: 44px; width: 12px; background: url(images/grey.png) no-repeat left;}
.wrapper{
width: 100%;
max-width: 960px;
margin: 0 auto;
padding: 0;
}
.nav-bar-area{
width: 100%;
height: 60px;
background-color: #000;
padding: 0;
margin:0 auto;
position:relative;
}
ul{
margin: 0 auto;
padding: 0;
width: 600px;
height: 60px;
}
ul li{
display:inline;
float:left;
padding: 10px 10px 10px 8px;
margin: 0 3% 0 0;
color: #fff;
cursor:pointer;
line-height: 225%;
}
li:hover{
background-color: #888888;
}
.menu{
display:none;
color:#fff;
font-weight:bold;
}
#text{
float:left;
}
#image{
float:right;
cursor:pointer;
}
#media screen and (max-width: 600px){
.nav-bar-area{
height:auto;
overflow:auto;
}
ul{
width: 100%;
height: auto;
display:block;
overflow: hidden;
}
ul li{
width: 50%;
float:left;
position: relative;
display:block;
margin: -1px;
padding: 10px 0 10px 0;
text-indent: 25px;
border-bottom: 1px solid #888888;
border-right: 1px solid #888888;
}
.nav-bar{
display:block;
}
}
#media screen and (max-width: 480px){
.menu{
display:block;
padding: 20px 0 40px 0;
border-bottom: 1px solid #fff;
}
#text{
margin: 0 0 0 20px;
}
#image{
margin: 0 30px 0 0;
}
.nav-bar{
display:none;
}
.nav-bar{
font-size: 0.8em;
}
}
JS
$(function(){
$('.tooltip-carousel').popover();
$('#carousel-example-generic').on('slide.bs.carousel', function () {
$('.tooltip-carousel').popover('hide');
$(this).find('.caraousel-tooltip-item.active').fadeOut(function(){
$(this).removeClass('active');
});
});
$('#carousel-example-generic').on('slid.bs.carousel', function () {
var index = $(this).find('.carousel-inner > .item.active').index();
$(this).find('.caraousel-tooltip-item').eq(index).fadeIn(function(){
$(this).addClass('active');
});
//alert(index);
});
$('.tooltip-carousel').mouseenter(function(){
$(this).popover('show');
}).mouseleave(function(){
$(this).popover('hide');
});
});
Here is the DEMO.