I'm using a off canvas navigation bar I found from a template and by default it is set to hide. I want it so that it completely takes the left side of the screen and no matter where the user scroll it will always "be there".
Can someone help me achieve this? Also any way I can make this mobile friendly by possibly making it collapse for smaller screens?
The "menu" button isn't appearing correctly but it is the long grey bar across the slideshow. I have a feeling it is in the css, so I made a comment as to where the css for the navbar begins.
https://jsfiddle.net/nv7rsgpg/9/
<!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="description" content="">
<meta name="author" content="">
<title>Stylish Portfolio - Start Bootstrap Theme</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!-- Custom CSS -->
<link href="http://ironsummitmedia.github.io/startbootstrap-stylish-portfolio/css/stylish-portfolio.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="http://ironsummitmedia.github.io/startbootstrap-stylish-portfolio/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">
<!-- 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]-->
<style>
/* Side Menu */
#sidebar-wrapper {
z-index: 1000;
position: fixed;
left: 0;
width: 250px;
height: 100%;
margin-left: -250px;
overflow-y: auto;
background: #222;
-webkit-transition: all 0.4s ease 0s;
-moz-transition: all 0.4s ease 0s;
-ms-transition: all 0.4s ease 0s;
-o-transition: all 0.4s ease 0s;
transition: all 0.4s ease 0s;
}
.sidebar-nav {
position: absolute;
top: 0;
width: 250px;
margin: 0;
padding: 0;
list-style: none;
}
.sidebar-nav li {
text-indent: 20px;
line-height: 40px;
}
.sidebar-nav li a {
display: block;
text-decoration: none;
color: #999;
}
.sidebar-nav li a:hover {
text-decoration: none;
color: #fff;
background: rgba(255,255,255,0.2);
}
.sidebar-nav li a:active,
.sidebar-nav li a:focus {
text-decoration: none;
}
.sidebar-nav > .sidebar-brand {
height: 55px;
font-size: 18px;
line-height: 55px;
}
.sidebar-nav > .sidebar-brand a {
color: #999;
}
.sidebar-nav > .sidebar-brand a:hover {
color: #fff;
background: none;
}
#menu-toggle {
z-index: 1;
position: fixed;
top: 0;
left: 0;
}
#sidebar-wrapper.active {
left: 250px;
width: 250px;
-webkit-transition: all 0.4s ease 0s;
-moz-transition: all 0.4s ease 0s;
-ms-transition: all 0.4s ease 0s;
-o-transition: all 0.4s ease 0s;
transition: all 0.4s ease 0s;
}
.toggle {
margin: 5px 5px 0 0;
}
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
width: 100%;
margin: auto;
height: 100vh;
}
.vcenter {
position: absolute;
height:100px;
width:100%;
top:50%;
bottom:50%;
margin-top: -50px;
margin-bottom: -50px;
}
.v-center {
position: absolute;
height:100px;
width:40%;
top:50%;
bottom:50%;
margin-top: -50px;
margin-bottom: -50px;
left:15%;
}
</style>
</head>
<body>
<!-- Navigation -->
<a id="menu-toggle" href="#" class="btn btn-dark btn-lg toggle"><i class="fa fa-bars"></i></a>
<nav id="sidebar-wrapper">
<ul class="sidebar-nav">
<a id="menu-close" href="#" class="btn btn-light btn-lg pull-right toggle"><i class="fa fa-times"></i></a>
<li class="sidebar-brand">
<a href="#top" onclick = $("#menu-close").click(); >Start Bootstrap</a>
</li>
<li>
<a href="#top" onclick = $("#menu-close").click(); >Home</a>
</li>
<li>
<a href="#about" onclick = $("#menu-close").click(); >About</a>
</li>
<li>
<a href="#services" onclick = $("#menu-close").click(); >Services</a>
</li>
<li>
<a href="#portfolio" onclick = $("#menu-close").click(); >Portfolio</a>
</li>
<li>
<a href="#contact" onclick = $("#menu-close").click(); >Contact</a>
</li>
</ul>
</nav>
<header>
<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://lorempixel.com/460/345/cats" />
</div>
<div class="item">
<img src="http://lorempixel.com/460/345/business" />
</div>
<div class="item">
<img src="http://lorempixel.com/460/345/abstract" />
</div>
<div class="item">
<img src="http://lorempixel.com/460/345/transportation" />
</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>
</header>
<!-- About -->
<section id="about" class="about">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2>Stylish Portfolio is the perfect theme for your next project!</h2>
<p class="lead">This theme features some wonderful photography courtesy of <a target="_blank" href="http://join.deathtothestockphoto.com/">Death to the Stock Photo</a>.</p>
</div>
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</section>
<!-- Services -->
<!-- The circle icons use Font Awesome's stacked icon classes. For more information, visit http://fontawesome.io/examples/ -->
<section id="services" class="services bg-primary">
<div class="container">
<div class="row text-center">
<div class="col-lg-10 col-lg-offset-1">
<h2>Our Services</h2>
<hr class="small">
<div class="row">
<div class="col-md-3 col-sm-6">
<div class="service-item">
<span class="fa-stack fa-4x">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-cloud fa-stack-1x text-primary"></i>
</span>
<h4>
<strong>Service Name</strong>
</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
Learn More
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="service-item">
<span class="fa-stack fa-4x">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-compass fa-stack-1x text-primary"></i>
</span>
<h4>
<strong>Service Name</strong>
</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
Learn More
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="service-item">
<span class="fa-stack fa-4x">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-flask fa-stack-1x text-primary"></i>
</span>
<h4>
<strong>Service Name</strong>
</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
Learn More
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="service-item">
<span class="fa-stack fa-4x">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-shield fa-stack-1x text-primary"></i>
</span>
<h4>
<strong>Service Name</strong>
</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
Learn More
</div>
</div>
</div>
<!-- /.row (nested) -->
</div>
<!-- /.col-lg-10 -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</section>
<!-- Callout -->
<aside class="callout">
<div class="text-vertical-center">
<h1>Vertically Centered Text</h1>
</div>
</aside>
<!-- Portfolio -->
<section id="portfolio" class="portfolio">
<div class="container">
<div class="row">
<div class="col-lg-10 col-lg-offset-1 text-center">
<h2>Our Work</h2>
<hr class="small">
<div class="row">
<div class="col-md-6">
<div class="portfolio-item">
<a href="#">
<img class="img-portfolio img-responsive" src="img/portfolio-1.jpg">
</a>
</div>
</div>
<div class="col-md-6">
<div class="portfolio-item">
<a href="#">
<img class="img-portfolio img-responsive" src="img/portfolio-2.jpg">
</a>
</div>
</div>
<div class="col-md-6">
<div class="portfolio-item">
<a href="#">
<img class="img-portfolio img-responsive" src="img/portfolio-3.jpg">
</a>
</div>
</div>
<div class="col-md-6">
<div class="portfolio-item">
<a href="#">
<img class="img-portfolio img-responsive" src="img/portfolio-4.jpg">
</a>
</div>
</div>
</div>
<!-- /.row (nested) -->
View More Items
</div>
<!-- /.col-lg-10 -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</section>
<!-- Call to Action -->
<aside class="call-to-action bg-primary">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h3>The buttons below are impossible to resist.</h3>
Click Me!
Look at Me!
</div>
</div>
</div>
</aside>
<!-- Map -->
<section id="contact" class="map">
<iframe width="100%" height="100%" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=Twitter,+Inc.,+Market+Street,+San+Francisco,+CA&aq=0&oq=twitter&sll=28.659344,-81.187888&sspn=0.128789,0.264187&ie=UTF8&hq=Twitter,+Inc.,+Market+Street,+San+Francisco,+CA&t=m&z=15&iwloc=A&output=embed"></iframe>
<br />
<small>
</small>
</iframe>
</section>
<!-- Footer -->
<footer>
<div class="container">
<div class="row">
<div class="col-lg-10 col-lg-offset-1 text-center">
<h4><strong>Start Bootstrap</strong>
</h4>
<p>3481 Melrose Place<br>Beverly Hills, CA 90210</p>
<ul class="list-unstyled">
<li><i class="fa fa-phone fa-fw"></i> (123) 456-7890</li>
<li><i class="fa fa-envelope-o fa-fw"></i> name#example.com
</li>
</ul>
<br>
<ul class="list-inline">
<li>
<i class="fa fa-facebook fa-fw fa-3x"></i>
</li>
<li>
<i class="fa fa-twitter fa-fw fa-3x"></i>
</li>
<li>
<i class="fa fa-dribbble fa-fw fa-3x"></i>
</li>
</ul>
<hr class="small">
<p class="text-muted">Copyright © Your Website 2014</p>
</div>
</div>
</div>
</footer>
<!-- jQuery -->
<!-- Bootstrap Core JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<!-- Custom Theme JavaScript -->
<script>
// Closes the sidebar menu
$("#menu-close").click(function(e) {
e.preventDefault();
$("#sidebar-wrapper").toggleClass("active");
});
// Opens the sidebar menu
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#sidebar-wrapper").toggleClass("active");
});
// Scrolls to the selected menu item on the page
$(function() {
$('a[href*=#]:not([href=#]):not([href=#myCarousel])').click(function() {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') || location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
</script>
</body>
</html>
Just add the active class to the sidebar-wrapper
<nav id="sidebar-wrapper" class="active">
and since you don't want to hide it ever, you can remove the menu-toggle link
<!-- REMOVE this -->
<a id="menu-toggle" href="#" class="btn btn-dark btn-lg toggle"><i class="fa fa-bars"></i></a>
And since the menu is always on, you need to move your body so that it is not covered up. For that you do this
body {
padding-left: 250px;
}
Note that because you are using a non-fluid container, this would cause the content to overflow if the screen / window is not large enough. You could work around this a bit by replacing all the containers with container-fluid, but your images are going to look stretched.
The right way would be to modify your responsive wrap points in your Bootstrap less files to account for the menu. But looking at the menu width being hardcoded, I doubt you are targeting smaller screens.
Fiddle with container - https://jsfiddle.net/9n8dtr5o/show
Fiddle with container-fluid - https://jsfiddle.net/z9Lknqn7/show
Related
I want to be able to have a carousel with the div's inside centered with a stroller.
Here are the images:
This is what I currently have:
I would love to center those two boxes within the arrows:
I want the arrows to slide between the three boxes: Right arrow: From 2 -> 3 -> 1 etc.
Here is the code:
$('#carousel-example-generic').carousel({
wrap: true,
interval: false
});
.carousel.slide img {
width: 100%;
height: auto;
}
.carousel img {
border-radius: 0px;
}
.carousel-control.left,
.carousel-control.right {
background: none;
color: #red;
border: none;
}
.carousel-control.left {
margin-left: -45px;
color: black;
}
.carousel-control.right {
margin-right: -45px;
color: black;
}
/* DIV BOXES */
.bottomFarLeftBox {
height: 170px;
width: 290px;
background-color: #4B92DB;
float: left;
clear: none;
}
.bottomMidLeftBox {
height: 170px;
width: 290px;
margin-right: 60px;
background-color: #4B92DB;
float: right;
clear: none;
}
.bottomRightBox {
height: 170px;
width: 310px;
}
.row img {
padding-bottom: 5px;
}
#topLeftColumn {
padding-right: 30px;
}
#bottomLeftColumn {
padding-left: 0px;
}
#bottomRightColumn {
padding-right: 0px;
}
#bottomContactsRow {
display: inline-flex;
}
<div class="col-sm-8">
<h4>Latest Training Documentation</h4>
<hr style="margin-top: 10px;" />
<div id="carousel-example-generic" class="carousel slide">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" class="active"></li>
<!-- data-slide-to="0" -->
<!-- UPDATE ON 3+ SLIDES -->
<!-- <li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
<li data-target="#carousel-example-generic" data-slide-to="3"></li> -->
</ol>
<div class="carousel-inner">
<!-- Slide -->
<div class="item active">
<div class="row">
<div class="col-md-6">
<a href="/TrainingResourceCenter/O365Training/Pages/OneDrive.aspx">
<div class="bottomFarLeftBox">
<h2 id="innerBoxHeadings"><img src="/TrainingResourceCenter/O365Training/PublishingImages/onedrive-logo.png" style="width: 60px!important; padding-bottom: 5px; padding-right: 6px; vertical-align: middle;" />OneDrive</h2>
<p id="innerBoxText">Store files in one place, share them with others, and get to them from any device connected to the internet.</p>
</div>
</a>
</div>
<div class="col-md-6">
<a href="/TrainingResourceCenter/O365Training/Pages/Delve.aspx">
<div class="bottomMidLeftBox">
<h2 id="innerBoxHeadings"><img src="/TrainingResourceCenter/O365Training/PublishingImages/delveLogo.png" style="height: 50px!important; width: 50px!important; padding-bottom: 5px; padding-right: 8px; vertical-align: middle;" />Delve</h2>
<p id="innerBoxText">It's more than your employee profile! Get personal insights and relevant information based on who you work with and the content you work on.</p>
</div>
</a>
</div>
</div>
</div>
<!-- Slide -->
<div class="item">
<div class="row">
<div class="col-md-6">
<!-- ADD TRAINING MATERIALS IN HERE -->
</div>
<div class="col-md-6">
<!-- ADD TRAINING MATERIALS IN HERE -->
</div>
</div>
</div>
<!-- Slide -->
<div class="item">
<div class="row">
<div class="col-md-6">
<!-- ADD TRAINING MATERIALS IN HERE -->
</div>
<div class="col-md-6">
<!-- ADD TRAINING MATERIALS IN HERE -->
</div>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
<span class="icon-next"></span>
</a>
</div>
</div>
Now you have it
<!doctype html>
<html>
<head>
<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">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.carousel.slide img {
width:100%;
height:auto;
}
.carousel img {
border-radius: 0px;
}
.carousel-control.left, .carousel-control.right {
background: none;
color: #red;
border: none;
}
.carousel-control.left {color: black;}
.carousel-control.right {color: black;}
/* DIV BOXES */
.bottomFarLeftBox {
height: 170px;
width: 95%;
margin-left: 5%;
background-color: #4B92DB;
float: left;
clear: none;
}
.bottomMidLeftBox {
height: 170px;
width: 95%;
margin-right: 5%;
background-color: #4B92DB;
float: right;
clear: none;
}
.carousel-inner > .item > img,
.carousel-inner > .item > a > img{
width: 70%;
height: 200px;
margin: auto;
}
</style>
</head>
<body>
<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>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="row">
<div class="col-sm-1"></div>
<div class="col-sm-5">
<a href="/TrainingResourceCenter/O365Training/Pages/OneDrive.aspx">
<div class="bottomFarLeftBox">
<img src="/TrainingResourceCenter/O365Training/PublishingImages/onedrive-logo.png" />
<div class="carousel-caption">
<p>Store files in one place, share them with others, and get to them from any device connected to the internet.</p>
</div>
</div>
</a>
</div>
<div class="col-sm-5">
<a href="/TrainingResourceCenter/O365Training/Pages/Delve.aspx">
<div class="bottomMidLeftBox">
<img src="/TrainingResourceCenter/O365Training/PublishingImages/onedrive-logo.png" />
<div class="carousel-caption">
<p>It's more than your employee profile! Get personal insights and relevant information based on who you work with and the content you work on.</p>
</div>
</div>
</a>
</div>
<div class="col-sm-1"></div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-sm-1"></div>
<div class="col-sm-5">
<a href="/TrainingResourceCenter/O365Training/Pages/OneDrive.aspx">
<div class="bottomFarLeftBox">
<img src="/TrainingResourceCenter/O365Training/PublishingImages/onedrive-logo.png" />
<div class="carousel-caption">
<p>I am second</p>
</div>
</div>
</a>
</div>
<div class="col-sm-5">
<a href="/TrainingResourceCenter/O365Training/Pages/Delve.aspx">
<div class="bottomMidLeftBox">
<img src="/TrainingResourceCenter/O365Training/PublishingImages/onedrive-logo.png" />
<div class="carousel-caption">
<p>I am second of second</p>
</div>
</div>
</a>
</div>
<div class="col-sm-1"></div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-sm-1"></div>
<div class="col-sm-5">
<a href="/TrainingResourceCenter/O365Training/Pages/OneDrive.aspx">
<div class="bottomFarLeftBox">
<img src="/TrainingResourceCenter/O365Training/PublishingImages/onedrive-logo.png" />
<div class="carousel-caption">
<p>I am the third</p>
</div>
</div>
</a>
</div>
<div class="col-sm-5">
<a href="/TrainingResourceCenter/O365Training/Pages/Delve.aspx">
<div class="bottomMidLeftBox">
<img src="/TrainingResourceCenter/O365Training/PublishingImages/onedrive-logo.png" />
<div class="carousel-caption">
<p>I am the third of third</p>
</div>
</div>
</a>
</div>
<div class="col-sm-1"></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>
</body>
</html>
I am using Bootstrap 4 to construct a grid of rows and columns. Mostly everything is laid out as I like it, except for the 3 columns on the bottom left area, which I cannot get to automatically grow to the maximum height of the row they are place within. I have added a border to every row and column for demonstration, and I've added a blue background to the columns that will not automatically resize to the full possible height. I've tried everything I can think of, and can't quite get the columns to automatically grow to the full height.
I will normally have charts.js charts in the 3 columns, and when they don't grow to fill the entire height of the column, the charts get squished and look bad. Any help would be extremely appreciated!
I've constructed a (hopefully) full codepen example here:
https://codepen.io/coldcoffeecup/pen/aGgpoV
While Bootstrap's row comes with display: flex, unfortunately the columns do not. As such, if you simply want to make the blue squares expand to fill the full vertical space, all you need to do is add the following CSS:
#A {
display: flex;
flex-direction: column;
}
This can be seen working here.
.hovereffect {
width: 100%;
height: 100%;
float: left;
overflow: hidden;
position: relative;
text-align: center;
cursor: default;
}
.hovereffect .overlay {
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
opacity: 0;
background-color: rgba(0, 0, 0, 0.5);
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out
}
.hovereffect img {
display: block;
position: relative;
-webkit-transition: all .4s linear;
transition: all .4s linear;
}
.hovereffect h2 {
text-transform: uppercase;
color: #fff;
text-align: center;
position: relative;
font-size: 17px;
background: rgba(0, 0, 0, 0.6);
-webkit-transform: translatey(-100px);
-ms-transform: translatey(-100px);
transform: translatey(-100px);
-webkit-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
padding: 10px;
}
.hovereffect a.info {
text-decoration: none;
display: inline-block;
text-transform: uppercase;
color: #fff;
border: 1px solid #fff;
background-color: transparent;
opacity: 0;
filter: alpha(opacity=0);
-webkit-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
margin: 50px 0 0;
padding: 7px 14px;
}
.hovereffect a.info:hover {
box-shadow: 0 0 5px #fff;
}
.hovereffect:hover img {
-ms-transform: scale(1.2);
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
.hovereffect:hover .overlay {
opacity: 1;
filter: alpha(opacity=100);
}
.hovereffect:hover h2,
.hovereffect:hover a.info {
opacity: 1;
filter: alpha(opacity=100);
-ms-transform: translatey(0);
-webkit-transform: translatey(0);
transform: translatey(0);
}
.hovereffect:hover a.info {
-webkit-transition-delay: .2s;
transition-delay: .2s;
}
.fullwidth {
width: 100% !important;
}
.fullheight {
height: 100% !important;
}
#A {
display: flex;
flex-direction: column;
}
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="assets/images/favicon.ico">
<title>Template</title>
<!-- Bootstrap core CSS -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="assets/css/starter-template.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/10.0.2/css/bootstrap-slider.min.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
<a class="navbar-brand" href="#">Dashboard</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu" id="reportDropdown" aria-labelledby="dropdown01">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Account
</button>
<div class="dropdown-menu dropdown-menu-right">
<button class="dropdown-item" type="button">Account</button>
<button class="dropdown-item" id="sign-out" type="button">Sign Out</button>
</div>
</div>
</div>
</nav>
<main role="main" class="container-fluid">
<div class="starter-template">
<h1 class="display-4">Title</h1>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-9 border" id="A">
<div class="row border" id="A1">
<div class="col-3 border">
<div class="row">
<div class="dropdown fullwidth">
<button class="btn btn-secondary dropdown-toggle fullwidth" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Type
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenu1">
<a class="dropdown-item" href="#!">A</a>
<a class="dropdown-item" href="#!">B</a>
<a class="dropdown-item" href="#!">C</a>
</div>
</div>
</div>
<div class="row border" style="padding:5% 10% 5% 10%;">
<div class="fullwidth">
<p class="lead text-muted text-center">
Slide 1
</p>
</div>
<input id="slider1" type="text" class="span2" value="" data-slider-min="10" data-slider-max="1000" data-slider-step="5" data-slider-value="[10,450]" />
</div>
<div class="row border" style="padding:5% 10% 5% 10%;">
<div class="fullwidth">
<p class="lead text-muted text-center">
Slide 2
</p>
</div>
<input id="slider2" type="text" class="span2" value="" data-slider-min="10" data-slider-max="1000" data-slider-step="5" data-slider-value="[10,450]" />
</div>
<div class="row border" style="padding:5% 10% 5% 10%;">
<div class="fullwidth">
<p class="lead text-muted text-center">
Slide 3
</p>
</div>
<input id="slider3" type="text" class="span2" value="" data-slider-min="10" data-slider-max="1000" data-slider-step="5" data-slider-value="[10,450]" />
</div>
</div>
<div class="col border">
A4
</div>
</div>
<div class="row bg-primary d-flex flex-fill" id="A2">
<div class="col-4 border">
<canvas id="chart1"></canvas>
</div>
<div class="col-4 border">
<canvas id="chart2"></canvas>
</div>
<div class="col-4 border">
<canvas id="chart3"></canvas>
</div>
</div>
</div>
<div class="col border" id="B">
<div class="row border">
<ul class="list-group fullwidth">
<li class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
A
<span>
<i class="fa fa-plus-square-o" aria-hidden="true"></i>
</span>
</li>
<li class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
B
<span>
<i class="fa fa-plus-square-o" aria-hidden="true"></i>
</span>
</li>
<li class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
C
<span>
<i class="fa fa-plus-square-o" aria-hidden="true"></i>
</span>
</li>
<li class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
D
<span>
<i class="fa fa-plus-square-o" aria-hidden="true"></i>
</span>
</li>
<li class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
E
<span>
<i class="fa fa-plus-square-o" aria-hidden="true"></i>
</span>
</li>
<li class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
F
<span>
<i class="fa fa-plus-square-o" aria-hidden="true"></i>
</span>
</li>
<li class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
G
<span>
<i class="fa fa-plus-square-o" aria-hidden="true"></i>
</span>
</li>
<li class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
H
<span>
<i class="fa fa-plus-square-o" aria-hidden="true"></i>
</span>
</li>
</ul>
</div>
<div class="row border">
<div class="input-group input-group-sm">
<input type="text" placeholder="Enter a value" class="form-control" aria-label="Small" aria-describedby="inputGroup-sizing-sm">
<div class="input-group-append">
<button class="btn btn-secondary btn-sm" type="button">Add</button>
</div>
</div>
</div>
<div class="row border">
<ul class="list-group fullwidth">
<li class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
I
<span><i class="fa fa-minus-square-o" aria-hidden="true"></i></span>
</li>
<li class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
J
<span><i class="fa fa-minus-square-o" aria-hidden="true"></i></span>
</li>
<li class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
K
<span><i class="fa fa-minus-square-o" aria-hidden="true"></i></span>
</li>
</ul>
</div>
<div class="row border" style="padding:3%">
<button type="button" class="btn btn-primary fullwidth">Done</button>
</div>
</div>
</div>
</div>
</main>
<!-- /.container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<script>
window.jQuery || document.write('<script src="../../../../assets/js/vendor/jquery-slim.min.js"><\/script>')
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<script src="assets/js/vendor/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/10.0.2/bootstrap-slider.js"></script>
<script src="assets/js/slider.js" rel="stylesheet"></script>
<script src="assets/js/chartCode.js" rel="stylesheet"></script>
<script src="assets/js/create.js" rel="stylesheet"></script>
</body>
</html>
I have the images at a set height and width since they are different sizes, so how do I center carousel itself?
I honestly have no clue where to start, because I don't know how to do it without screwing up bootstrap styling. Any help would be appreciated.
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">
<title>Balloons Flowers and Gifts</title>
<link rel="stylesheet" type="text/css" href="css/bfg.css">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=News+Cycle" type="text/css" rel="stylesheet">
<!-- Spent two hours trying to figure out why my customized CSS wouldn't load in, then realized that I put it in front of bootstrap... -->
<script src="https://use.fontawesome.com/7a267289ed.js"></script>
<link rel="stylesheet" type="text/css" href="css/bfg.css">
<link rel="icon" href="img/icon.png">
</head>
<body>
<div class="container-fluid main-section">
<nav class=" navbar navbar-default">
<div class="container-fluid col-md-12 col-xs-12">
<div class="headers-bfg">
<div class="navbar-header">
<a class="navbar-brand" href="#">BFG</a>
</div>
<div class="navbar-header">
<a class="navbar-brand col-xs-2" href="#"><i class="fa fa-heart" aria-hidden="true"></i></a>
</div>
</div>
<ul class=" nav navbar-nav ">
<li>Balloons</li>
<li><i class="fa fa-small fa-circle" aria-hidden="true"></i></li>
<li>Flowers</li>
<li><i class="fa fa-circle" aria-hidden="true"></i></li>
<li>Gifts</li>
<li><i class="fa fa-circle" aria-hidden="true"></i></li>
<li>Hours</li>
</ul>
</div>
</nav>
<div class="">
<div class="row">
<div class="col-md-12 col-xs-12 text-center main">
<h1>Balloons Flowers and Gifts</h1>
<h3>The perfect way to brighten someone's day, and make them smile!</h3>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-md-12 col-xs-12 text-center info-panel balloon-sect">
<h2>Balloons</h2>
<p> Our hand crafted balloon creations are a hit at every paty! We have a wide variety of colored and themed balloons ranging from Pokemon GO to a life sized stormtrooper! We also do balloon arches and towers for events!</p>
<div id="myCarousel" class="carousel center 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="img/f1.jpg" alt="Chania">
</div>
<div class="item">
<img src="img/f2.jpg" alt="Chania">
</div>
<div class="item">
<img src="img/f3.jpg" alt="Flower">
</div>
<div class="item">
<img src="img/f4.jpg" alt="Flower">
</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>
</div>
<div class="col-md-12 col-xs-12 text-center info-panel flower-sect">
<h2>Flowers</h2>
<p>Our Flowers are perfect for any occasion! We have a wide variety all year round, just be sure to call for availability! We can do prom flowers, funeral arrangements, and everything in between!</p>
</div>
<div class="col-md-12 col-xs-12 text-center info-panel gift-sect">
<h2>Gifts</h2>
<p>We have a wide variety of gifts available for purchase that range from wind chimes to <b>Decorative Vases.</b></p>
</div>
<div class="col-md-12 col-xs-12 text-center info-panel hour-sect">
<h2>Hours</h2>
</div>
</div>
</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="js/bootstrap.min.js"></script>
CSS
body {
font-family: 'News Cycle', sans-serif;
font-size: 175%;
}
li {
float: right;
text-align: left
}
link {
link
}
a:link {
text-decoration: none;
color: #000000;
}
a:visited {
text-decoration: none;
color: #000000;
}
a:hover {
text-decoration: none;
color: #232323;
}
a:active {
text-decoration: underline;
color: #000000;
}
.main-section {
background-image: url(../img/back.jpg);
background-size: cover;
height: 1000px;
color: white;
}
.navbar {
position: fixed;
width: 100%;
}
.container-fluid {
padding-left: 0px;
}
.main {
padding: 400px 0px 360px 0px;
text-shadow: 1px black;
}
.nav {
float: right;
text-align: left;
font-size: 20px;
letter-spacing: .5px;
}
.headers-bfg {
padding-left: 35px;
}
.navbar-brand {
font-size: 20px;
letter-spacing: .5px;
}
h1 {
font-size: 70px;
}
h3 {
font-size: 35px;
}
.fa-circle {
color: gray;
font-size: .4em;
padding-top: 23px
}
.info-panel {
padding: 50px 50px 50px 50px;
}
.balloon-sect {
background-color: skyblue;
}
.flower-sect {
background-color: #f4f6f9;
}
.gift-sect {
background-color: #ce6640;
}
.carousel {
width:640px;
height:360px;
}
#myCarousel {
}
Not 100% sure this is what you want but you can take a look at this: http://www.bootply.com/t08I4ieD1s
Basically all I did was add: margin: 0 auto; to the .carousel css
.carousel {
width:640px;
height:360px;
margin: 0 auto;
}
and add:
.carousel-indicators{
width:auto;
margin: 0 auto;
}
To add space above and below you need to change the top and bottom margins. So for example you could do the following:
.carousel {
width:640px;
height:360px;
margin: 100px auto 50px auto;
}
This would add 100px above the carousel, and 50 below. Read here: http://www.w3schools.com/cssref/pr_margin.asp for more info.
Try this easy fix:
You can use bootstrap class .center-block to this line
<div id="myCarousel" class="carousel center slide" data-ride="carousel">
after adding class
<div id="myCarousel" class="carousel center-block center slide" data-ride="carousel">
bootstrap class .center-block make your element to the center horizontally with respect to its parent element.
I'm trying to create a single scrolling webpage consisting of three pages
$('a.page-scroll').on('click', function(event) {
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top - 60
}, 1000);
event.preventDefault();
});
* {
margin-top: 0;
margin-bottom: 0;
}
#page1 {
height: 1000px;
background-color: #000;
color: white;
}
#page2 {
height: 1000px;
color: white;
background-color: #18121e;
padding-top: 140px;
border-top: 100px;
}
#page3 {
height: 650px;
color: white;
background-color: #233237;
background-size: cover;
padding-top: 200px;
}
body {
padding-top: 0px;
}
#page1 p {
padding-top: 100px;
font-size: 2.5rem;
}
#page1 p #highlight {
color: pink !important;
}
#page2 h3 {
padding-bottom: 80px;
line-height: 1.5;
}
#page3 h3 {
padding-bottom: 100px;
line-height: 1.5;
}
.btn {
color: white;
background-color: #000 !important;
}
.btn:hover {
color: gray;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.nicescroll/3.6.7/jquery.nicescroll.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<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="#">Rashid Naushad</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><a class="page-scroll" href="#about">About</a>
</li>
<li><a class="page-scroll" href="#portfolio">Portfolio</a>
</li>
<li><a class="page-scroll" href="#contact">Contact</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<!--<div class="container-fluid">-->
<div>
<div id="page1">
<a id="about"></a>
<br>
<br>
<br>
<p class="text-center">Hi !
<br>I'm a self taught web developer based in India.
<br>I'm an undergraduate student pursuing economics who just loves to <span id="highlight">code</span>.
<br>I dream of combining my knowledge of programming, economics, and
<br>financial markets for the betterment of the society.
<br>Languages and Frameworks:
<br>HTML5, CSS3, Bootstrap3,
<br>Javascript, jQuery, Angular.js, Meteor.js,
<br>Node.js, React,js,
<br>Python, php..
<br>Tools & expertise: Git, Responsive Web Design.</p>
</div>
<div id="page2">
<a id="portfolio"></a>
<h3 class="text-center">Here is my latest portfolio, <br>I'll be adding more as I learn and grow..</h3>
<!--<div class="row">
<div class="thumbnail img img-responsive">
<p data-height="268" data-theme-id="0" data-slug-hash="VaKMBJ" data-default-tab="result" data-user="rashidnaushad" data-preview="true" class="codepen">See the Pen Simple Javascript App by Rashid Naushad (#rashidnaushad) on CodePen.</p>
<script async src="//assets.codepen.io/assets/embed/ei.js"></script>
</div>
<div class="thumbnail img img-responsive">
<p data-height="268" data-theme-id="0" data-slug-hash="pyPjae" data-default-tab="result" data-user="rashidnaushad" data-preview="true" class="codepen">See the Pen Tribute to Raghuram Rajan by Rashid Naushad (#rashidnaushad) on CodePen.</p>
<script async src="//assets.codepen.io/assets/embed/ei.js"></script>
</div>
</div>
<div class="row">
<div class="thumbnail">
<img class="img img-responsive img-rounded" src="http://cleantallahassee.com/wp-content/uploads/2015/09/coming-soon.jpg" alt="Coming Soon!" />
<div class="caption">
<h5 class="text-center">Coming Soon!</h5>
</div>
</div>
<div class="thumbnail">
<img class="img img-responsive img-rounded" src="http://cleantallahassee.com/wp-content/uploads/2015/09/coming-soon.jpg" alt="Coming Soon!" />
<div class="caption">
<h5 class="text-center">Coming Soon!</h5>
</div>
</div>
</div>-->
</div>
<div id="page3">
<a id="contact"></a>
<h3 id="contact-text" class="text-center">Think I can be of any help to you?<br>Wanna collaborate?<br>Shoot me a message, now!</h3>
GitHub
<div class="hidden-lg hidden-md">
<br>
</div>
freeCodeCamp
<div class="hidden-lg hidden-md">
<br>
</div>
Gmail
</div>
</div>
The buttons on the third page,when collapsed don't leave a space in between. How do I add space between the buttons in the small and xsmall screen sizes?I tried inserting between the buttons, but that didn't work.
Here is the JsFiddle
Add this to your CSS
#media screen and (max-width: 990px) {
.btn ~ .btn {
margin-top: 10px;
}
}
Updated fiddle
Sample snippet
$('a.page-scroll').on('click', function(event) {
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top - 60
}, 1000);
event.preventDefault();
});
* {
margin-top: 0;
margin-bottom: 0;
}
#page1 {
height: 1000px;
background-color: #000;
color: white;
}
#page2 {
height: 1000px;
color: white;
background-color: #18121e;
padding-top: 140px;
border-top: 100px;
}
#page3 {
height: 650px;
color: white;
background-color: #233237;
background-size: cover;
padding-top: 200px;
}
body {
padding-top: 0px;
}
#page1 p {
padding-top: 100px;
font-size: 2.5rem;
}
#page1 p #highlight {
color: pink !important;
}
#page2 h3 {
padding-bottom: 80px;
line-height: 1.5;
}
#page3 h3 {
padding-bottom: 100px;
line-height: 1.5;
}
.btn {
color: white;
background-color: #000 !important;
}
.btn:hover {
color: gray;
}
#media screen and (max-width: 990px) {
.btn ~ .btn {
margin-top: 10px;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.nicescroll/3.6.7/jquery.nicescroll.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<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="#">Rashid Naushad</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><a class="page-scroll" href="#about">About</a>
</li>
<li><a class="page-scroll" href="#portfolio">Portfolio</a>
</li>
<li><a class="page-scroll" href="#contact">Contact</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<!--<div class="container-fluid">-->
<div>
<div id="page1">
<a id="about"></a>
<br>
<br>
<br>
<p class="text-center">Hi !
<br>I'm a self taught web developer based in India.
<br>I'm an undergraduate student pursuing economics who just loves to <span id="highlight">code</span>.
<br>I dream of combining my knowledge of programming, economics, and
<br>financial markets for the betterment of the society.
<br>Languages and Frameworks:
<br>HTML5, CSS3, Bootstrap3,
<br>Javascript, jQuery, Angular.js, Meteor.js,
<br>Node.js, React,js,
<br>Python, php..
<br>Tools & expertise: Git, Responsive Web Design.</p>
</div>
<div id="page2">
<a id="portfolio"></a>
<h3 class="text-center">Here is my latest portfolio, <br>I'll be adding more as I learn and grow..</h3>
<!--<div class="row">
<div class="thumbnail img img-responsive">
<p data-height="268" data-theme-id="0" data-slug-hash="VaKMBJ" data-default-tab="result" data-user="rashidnaushad" data-preview="true" class="codepen">See the Pen Simple Javascript App by Rashid Naushad (#rashidnaushad) on CodePen.</p>
<script async src="//assets.codepen.io/assets/embed/ei.js"></script>
</div>
<div class="thumbnail img img-responsive">
<p data-height="268" data-theme-id="0" data-slug-hash="pyPjae" data-default-tab="result" data-user="rashidnaushad" data-preview="true" class="codepen">See the Pen Tribute to Raghuram Rajan by Rashid Naushad (#rashidnaushad) on CodePen.</p>
<script async src="//assets.codepen.io/assets/embed/ei.js"></script>
</div>
</div>
<div class="row">
<div class="thumbnail">
<img class="img img-responsive img-rounded" src="http://cleantallahassee.com/wp-content/uploads/2015/09/coming-soon.jpg" alt="Coming Soon!" />
<div class="caption">
<h5 class="text-center">Coming Soon!</h5>
</div>
</div>
<div class="thumbnail">
<img class="img img-responsive img-rounded" src="http://cleantallahassee.com/wp-content/uploads/2015/09/coming-soon.jpg" alt="Coming Soon!" />
<div class="caption">
<h5 class="text-center">Coming Soon!</h5>
</div>
</div>
</div>-->
</div>
<div id="page3">
<a id="contact"></a>
<h3 id="contact-text" class="text-center">Think I can be of any help to you?<br>Wanna collaborate?<br>Shoot me a message, now!</h3>
GitHub
<div class="hidden-lg hidden-md">
<br>
</div>
freeCodeCamp
<div class="hidden-lg hidden-md">
<br>
</div>
Gmail
</div>
</div>
Is there any option in bootstrap carousel to animate it to top to bottom and bottom to top, instead of right to left and left to right.
jsFiddle
<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="false">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1" class=""></li>
<li data-target="#myCarousel" data-slide-to="2" class=""></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<div class="container">
<div class="carousel-caption">
<h1>Example headline.</h1>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a>
</p>
</div>
</div>
</div>
<div class="item">
<div class="container">
<div class="carousel-caption">
<h1>Another example headline.</h1>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a>
</p>
</div>
</div>
</div>
<div class="item">
<div class="container">
<div class="carousel-caption">
<h1>One more for good measure.</h1>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Browse gallery</a>
</p>
</div>
</div>
</div>
</div> <a class="left carousel-control" href="#myCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
<a class="right carousel-control" href="#myCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
</div>
You can get change the direction of carousel using this code (The JSFiddle example at the end)
Pay attention to the CSS vertical class selector
CSS: ( the essence of the change of carousel direction )
.vertical .carousel-inner {
height: 100%;
}
.carousel.vertical .item {
-webkit-transition: 0.6s ease-in-out top;
-moz-transition: 0.6s ease-in-out top;
-ms-transition: 0.6s ease-in-out top;
-o-transition: 0.6s ease-in-out top;
transition: 0.6s ease-in-out top;
}
.carousel.vertical .active {
top: 0;
}
.carousel.vertical .next {
top: 400px;
}
.carousel.vertical .prev {
top: -400px;
}
.carousel.vertical .next.left,
.carousel.vertical .prev.right {
top: 0;
}
.carousel.vertical .active.left {
top: -400px;
}
.carousel.vertical .active.right {
top: 400px;
}
.carousel.vertical .item {
left: 0;
}
Javascript:
$('.carousel').carousel({
interval: 3000
})
HTML:
<div class="container">
<div class="row-fluid">
<div class="span6 offset3">
<div id="myCarousel" class="carousel slide vertical">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item">
<img src="http://placehold.it/600x400&text=First+Slide">
</div>
<div class="item">
<img src="http://placehold.it/600x400&text=Second+Slide">
</div>
<div class="item">
<img src="http://placehold.it/600x400&text=Third+Slide">
</div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
</div>
</div>
</div>
You can see it in action here: http://jsfiddle.net/wram2h2p/