So I'm using bootstrap to build a dashboard with a side nav bar. When the navbar is open, the container content is pushed to the right and out of the screen. I want the whole container to be resized to fit the screen. So whether navbar is open or collapsed, container should be fully visible. Is there a bootstrap css class I can add to body or container to fix that issue?
<body>
<div id="wrapper">
<div class="overlay"></div>
<!-- Sidebar -->
<nav class="navbar navbar-inverse navbar-fixed-top" id="sidebar-wrapper" role="navigation">
<ul class="nav sidebar-nav">
<li class="sidebar-brand">
<img src="assets/img/logo.png"></img>
</li>
<li>
<span class="icon icon-home"></span>Overview
</li>
<li>
<span class="icon icon-suitcase"></span>Account Management
</li>
<li>
<span class="icon icon-bar-graph"></span>Demand Planning
</li>
<li>
<span class="icon icon-box"></span>Inventory Planning
</li>
<li>
<span class="icon icon-light-bulb"></span>Vendor Management Invetory
</li>
<li>
<span class="icon icon-calculator"></span>Dashboards
</li>
<li>
<span class="icon icon-text-document">Reports
</li>
</ul>
</nav>
<!-- /#sidebar-wrapper -->
<!-- Page Content -->
<div id="page-content-wrapper">
<button type="button" class="hamburger is-closed" data-toggle="offcanvas">
<span class="hamb-top"></span>
<span class="hamb-middle"></span>
<span class="hamb-bottom"></span>
</button>
<div class="container">
<div class="dashhead">
<div class="dashhead-titles">
<div class="dashhead-toolbar">
<form class="navbar-form" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
</div>
</form>
</div>
<h3 class="dashhead-title">Overview</h3>
</div>
</div>
<ul class="nav nav-bordered mt-4 mt-md-2 mb-0 clearfix" role="tablist">
<li class="nav-item" role="presentation">
Summary
</li>
</ul>
<hr class="mt-0 mb-5">
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="traffic">
<div class="row text-center m-t-md">
<div class="col-lg-4"</div>
</div>
</div>
</div>
<style>
#sidebar-wrapper {
z-index: 1000;
left: 235px;
width: 0;
height: 100%;
margin-left: -235px;
overflow-y: auto;
overflow-x: hidden;
background: #252D3A;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;}
#wrapper.toggled #sidebar-wrapper {
width: 235px;}
#wrapper.toggled #page-content-wrapper {
position: absolute;
margin-right: -235px;}
#page-content-wrapper {
width: 100%;
padding-top: 20px;}
#sidebar-nav {
position: absolute;
top: 0;
width: 235px;
margin: 0;
padding: 0;
list-style: none;}
</style>
Please Change the value of css.
#wrapper.toggled #page-content-wrapper {
position: absolute;
width: calc(100% - 235px);
margin-left: 235px;
}
Related
Try to add top navigation that has side navigation already. But how I put the top navigation to the main page seems wrong. How to make side nav and top nav be in the same position. The image I put below. Top nav at the above. and the side nav goes below the top nav. I want to make it looks parallel. How to do it in the correct way?
In this case, my topnav height is 60 px. Is there any better way than just add margin-top -60px to my sidebar?
TopNavigation.jsp
<div class="top_nav">
<div class="nav_menu">
<nav class="" role="navigation">
<ul class="nav navbar-nav navbar-right">
<li class="">
<a href="javascript:;"
class="user-profile dropdown-toggle" data-toggle="dropdown"
aria-expanded="false">
<img
src="
<c:url value="/resources/images/user.png"/>
"><%=session.getAttribute("usrname")%>
<span class=" fa fa-angle-down"></span>
</a>
</ul>
</nav>
</div>
</div>
SideNavigation.jsp
<nav id="sidebar">
<div class="custom-menu">
<button type="button" id="sidebarCollapse" class="btn btn-primary">
<i class="fa fa-bars"></i> <span class="sr-only">Toggle Menu</span>
</button>
</div>
<div class="p-4">
<h1>
<img src=""/>">
</h1>
<ul class="list-unstyled components scrollBarNav mb-5">
<li class="active"><a href="#"><span class="fa fa-camera "></span>
</a>
</li>
<li><span class="fa fa-code-fork"></span>
</li>
<li><a href="#"><span class=""><i class="fa fa-user-plus" aria-hidden="true"></i></span>
</a>
</li>
</ul>
<div class="footer">
<span class="fa fa-sign-out"></span>
</div>
</div>
</nav>
Main Page
<body>
<jsp:include page='TopNavigation.jsp'></jsp:include>
<div class="wrapper d-flex align-items-stretch">
<jsp:include page='SideNavigationManagement.jsp'></jsp:include>
<div id="content" class="p-4 p-md-5 pt-5">
<h2 class="mb-4">Sidebar #05</h2>
<p>Lorem ipsum </p>
</div>
</div>
</body>
CSS
#sidebar {
min-width: 270px;
max-width: 270px;
background: #3445b4;
color: #fff;
-webkit-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
position: fixed;
height:100%;
}
#content {
width: 100%;
padding: 0;
min-height: 100vh;
-webkit-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
margin-left:270px;
}
//TopCss .main_container .top_nav {
display: block;
margin-left: 270px;
}
.nav_menu {
float: left;
background: #EDEDED;
border-bottom: 1px solid #D9DEE4;
margin-bottom: 10px;
width: 100%;
position: relative;
}
.navbar-right {
margin-right: 0;
}
.top_nav .navbar-right {
margin: 0;
width: 70%;
float: right;
}
.top_nav .navbar-right li {
display: inline-block;
float: right;
position: static;
}
Result Image :
I just want to make the navbar and sidebar fixed even the user scroll down the page. And also responsive. How can I do that without changing the design of the navbar and sidebar? Can somebody help me with my problem using bootstrap? Here's my fiddle https://jsfiddle.net/exyvat08/17/
<div class="d-flex" id="wrapper">
<div class="bg-light border-right" id="sidebar-wrapper">
<div class="sidebar-heading"><img class="mx-auto d-block" src="../images/logo.jpg" id="logo"></div>
<div class="list-group list-group-flush">
Dashboard
User
Supplier
Purchase Order
Reports
</div>
Original Design
Change your CSS to look like this:
.navbar{
position: fixed;
left: 0px; /* the key here is to make left and right '0px' */
right: 0px;
background: linear-gradient(to top right,#0084ff,#0084ff);
}
.content-container{ /* change this to be the container of your content */
margin-top: 57px /* 57px is just the height of your navbar */
}
Fiddle: https://jsfiddle.net/exyvat08/17/
I have fixed the siderbar & Nav bar fixed using position fixed & width calc
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
if (e.target.innerText == "Show Menu") {
e.target.innerText = "Hide Menu";
} else {
e.target.innerText = "Show Menu";
}
});
body {
height: 100%;
overflow-x: hidden;
font-family: sans-serif;
}
#logo {
width: 160px;
height: 150px;
border-radius: 50%;
}
#page-content-wrapper {
margin-left: 241px;
width: calc(100% - 241px);
}
#sidebar-wrapper {
min-height: 100vh;
margin-left: -15rem;
-webkit-transition: margin .25s ease-out;
-moz-transition: margin .25s ease-out;
-o-transition: margin .25s ease-out;
transition: margin .25s ease-out;
position:fixed;
z-index: 1;
height:100vh;
}
#sidebar-wrapper .sidebar-heading {
padding: 0.875rem 1.25rem;
font-size: 1.2rem;
}
#sidebar-wrapper .list-group {
width: 15rem;
}
#page-content-wrapper {
min-width: 100vw;
}
#wrapper.toggled #sidebar-wrapper {
margin-left: 0;
}
.navbar {
background: linear-gradient(to top right, #0084ff, #0084ff);
position: fixed !important;
width: calc(100% - 241px);
top:0px;
}
#media (min-width: 768px) {
#sidebar-wrapper {
margin-left: 0;
}
#page-content-wrapper {
min-width: 0;
width: 100%;
}
#wrapper.toggled #sidebar-wrapper {
margin-left: -15rem;
}
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<body>
<div class="d-flex" id="wrapper">
<div class="bg-light border-right" id="sidebar-wrapper">
<div class="sidebar-heading"><img class="mx-auto d-block" src="../images/logo.jpg" id="logo"></div>
<div class="list-group list-group-flush">
<i class="fas fa-tachometer-alt"></i>Dashboard
User
Supplier
Purchase Order
Reports
</div>
</div>
<!-- /#sidebar-wrapper -->
<!-- Page Content -->
<div id="page-content-wrapper">
<nav class="navbar navbar-expand-lg navbar-light bg-success border-bottom">
<button class="btn btn-outline-light btn-sm" id="menu-toggle">Hide Menu</button>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link text-light" href=""><i class="fas fa-home"></i> Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link text-light"><i class="fas fa-building"></i> Contact</a>
</li>
<li class="nav-item dropdown">
<a class="btn nav-link dropdown-toggle text-light" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fas fa-user"></i> John Doe
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">See Profile</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Logout</a>
</div>
</li>
</ul>
</div>
</nav>
<h1>
test
</h1>
<h1>
test
</h1>
<h1>
test
</h1>
<h1>
test
</h1>
<h1>
test
</h1>
<h1>
test
</h1>
<h1>
test
</h1>
<h1>
test
</h1>
<h1>
test
</h1>
<h1>
test
</h1>
<h1>
test
</h1>
<h1>
test
</h1>
<h1>
test
</h1>
<h1>
test
</h1>
</body>
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
So far I have a responsive side bar and top bar.
My problem is I want to make my side bar 100% height but still responsive. The reason I want it to be a 100% so the background colour runs down the screen. This is how it looks currently http://prntscr.com/gtyxt0
This is how it looks when it the browser width is shortened: http://prntscr.com/gtyxxp When clicking the icon, the side bar expands which is exactly what I want.
When I set the position of the side bar to fixed so I can set the height 100% I lose all responsiveness.
What is the best way to go about this?
Here is my HTML/CSS
HTML
<div class="navbar navbar-fixed-top navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand title" href="#">DSUM</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
{{username}} <span class="caret"></span>
<ul class="dropdown-menu">
<li>Sign Out</li>
</ul>
</li>
</ul>
</div>
<!-- /.nav-collapse -->
</div>
<!-- /.container -->
</div>
<!-- /.navbar -->
<div class="container-fluid page-header">
<div class="row row-offcanvas row-offcanvas-left">
<div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation">
<div class="sidebar-nav">
<ul class="nav">
<li class="sidebar-item-group">Menu</li>
<li><a routerLink="/dashboard"><i class="fa fa-home" aria-hidden="true"></i> Dashboard</a></li>
<li class="nav-divider"></li>
<li class="sidebar-item-group">Quick Links</li>
<li><a routerLink="/usersearch"><i class="fa fa-search" aria-hidden="true"></i> User Search</a></li>
<li><i class="fa fa-user-plus" aria-hidden="true"></i> Create Disc Account</li>
<li><i class="fa fa-address-card-o" aria-hidden="true"></i> Create Disc Role</li>
</ul>
</div>
<!--/.well -->
</div>
<!--/span-->
<div class="col-xs-12 col-sm-9">
<br>
<div class="jumbotron">
<a class="visible-xs" data-toggle="offcanvas"><i class="fa fa-lg fa-reorder"></i></a>
<h1>Hello, world!</h1>
<p>This is an example to show the potential of an offcanvas layout pattern in Bootstrap. Try some responsive-range viewport sizes to see it in action.</p>
</div>
<div class="row">
</div>
<!--/row-->
</div>
<!--/span-->
</div>
<!--/row-->
</div>
<!--/.container-->
CSS
body {
padding-top: 50px;
}
footer {
padding-left: 15px;
padding-right: 15px;
}
/*
* Off Canvas
* --------------------------------------------------
*/
#media screen and (max-width: 768px) {
.row-offcanvas {
position: relative;
-webkit-transition: all 0.25s ease-out;
-moz-transition: all 0.25s ease-out;
transition: all 0.25s ease-out;
background: #ecf0f1;
}
.row-offcanvas-left .sidebar-offcanvas {
left: -40%;
}
.row-offcanvas-left.active {
left: 40%;
}
.sidebar-offcanvas {
position: absolute;
top: 0;
width: 40%;
margin-left: 12px;
}
}
#sidebar {
padding: 15px;
margin-top: 10px;
background-color: #2F363E;
}
.title {
background-color: #1F70A8;
text-align: left;
font-family: 'Lato', sans-serif;
font-size: 24px;
font-weight: bold;
color: #e1ffff;
width: 185px;
}
.sidebar-item-group {
color: #637083;
font-family: 'Lato', sans-serif;
font-weight: bold
}
My footer is not sticking to the bottom of the page. I have already tried the following:
footer { /* position must be absolute and bottom must be 0 */
height: 100px;
width: 100%;
background: rgba(255,255,255,0.2);
position: absolute;
bottom: 0;
}
footer {
height: 50px;
position: absolute;
left: 0;
right: 0;
background-color: #00A;
z-index: 150;
}
footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 30px;
}
None of these solutions (found on stackoverflow) have worked out for me so far so I have made a codepen with what I have:
http://codepen.io/sredmond/pen/revjdv
If you expand the code pen so that you see more of the result than the code you will see that it stays
NAVBAR
JUMBOTRON
CONTENT
FOOTER
<!--
Random white space
-->
What I want it to do is go like this:
NAVBAR
JUMBOTRON
CONTENT
FOOTER
Thanks!
Put your .row in div inside footer, maybe row class override your position setting.
Not:
<footer class="row"></footer>
But:
<footer><div class="row"></div></footer>
And then:
footer {
position: fixed;
left: 0; bottom: 0; right: 0;
}
EDIT
So you need flexbox (or tables, flexbox is simplier but less backward compatible):
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">Project</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
<li>Terms Of Service</li>
</ul>
<ul class="nav navbar-nav navbar-right hidden-xs hidden-sm">
<li>
<a class="btn" href="https://www.facebook.com/Tech-U-276023285879783/" target="_blank" onclick="ga('send','event','engagement','facebook')"><span class="fa fa-facebook"></span></a>
</li>
<li>
<a class="btn" href="https://twitter.com/TechUHost?s=09" target="_blank" onclick="ga('send','event','engagement','twitter')"><span class="fa fa-twitter"></span></a>
</li>
<li>
<a class="btn" href="https://play.google.com/store/apps/developer?id=TechU" target="_blank" onclick="ga('send','event','engagement','android')"><span class="fa fa-android"></span></a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right hidden-md hidden-lg hidden-sm text-center">
<li class="social-icons">
<a class="btn" href="https://www.facebook.com/Tech-U-276023285879783/" target="_blank" onclick="ga('send','event','engagement','facebook')"><span class="fa fa-facebook"></span></a>
<a class="btn" href="https://twitter.com/TechUHost?s=09" target="_blank" onclick="ga('send','event','engagement','twitter')"><span class="fa fa-twitter"></span></a>
<a class="btn" href="https://play.google.com/store/apps/developer?id=TechU" target="_blank" onclick="ga('send','event','engagement','android')"><span class="fa fa-android"></span></a>
</li>
</ul>
</div>
</div>
</div>
<div class="container body-content">
<div class="content-wrapper">
<div class="content-body">
<div class="jumbotron">
<h1 class="text-center">Portfolio</h1>
</div>
<div class="row">
<div class="col-xs-12 col-md-4 text-center bottom-30">
<h4 class="bold">PeppNation</h4>
<a href="http://www.peppnation.techuhost.com" target="_blank">
<img src="/Assets/Images/Images/Portfolio/PeppNation.png" width="300"/>
</a>
</div>
<div class="col-xs-12 col-md-4 text-center bottom-30">
<h4 class="bold">Brock Report - Publications Page</h4>
<a href="http://brockreport.com/publications.aspx" target="_blank">
<img src="/Assets/Images/Images/Portfolio/BrockReport.png" width="300"/>
</a>
</div>
<div class="col-xs-12 col-md-4 text-center bottom-30">
<h4 class="bold">Camp BASIC</h4>
<a href="http://campbasicdev.dev2.nsrit.com/" target="_blank">
<img src="/Assets/Images/Images/Portfolio/CampBasic.png" width="300"/>
</a>
</div>
</div>
</div>
<footer class="content-footer">
<div class="row text-center">
<div class="col-xs-12 col-md-2">
<h4 class="bold">TechU</h4>
<p>Terms Of Service</p>
<p>© 2016 - TechU</p>
</div>
<div class="col-xs-12 col-md-3">
<h4 class="bold">Contact Information</h4>
<p>Phone: <strong>(414) 255-5423</strong></p>
<p>Email: <strong>samjredmond#yahoo.com</strong></p>
</div>
<div class="col-xs-12 col-md-3">
<h4 class="bold">Business Hours</h4>
<p>Monday - Friday: <strong>9 a.m. - 5 p.m. CST</strong></p>
<p>Saturday & Sunday: <strong>Closed</strong></p>
</div>
<div class="col-xs-12 col-md-4">
<ul class="nav navbar-nav hidden-xs footer-social-button-align">
<li>
<a class="btn" href="https://www.facebook.com/Tech-U-276023285879783/" target="_blank" onclick="ga('send','event','engagement','facebook')"><span class="fa fa-facebook"></span></a>
</li>
<li>
<a class="btn" href="https://twitter.com/TechUHost?s=09" target="_blank" onclick="ga('send','event','engagement','twitter')"><span class="fa fa-twitter"></span></a>
</li>
<li>
<a class="btn" href="https://play.google.com/store/apps/developer?id=TechU" target="_blank" onclick="ga('send','event','engagement','android')"><span class="fa fa-android"></span></a>
</li>
</ul>
<ul class="nav navbar-nav hidden-md hidden-lg hidden-sm">
<li class="social-icons">
<a class="btn" href="https://www.facebook.com/Tech-U-276023285879783/" target="_blank" onclick="ga('send','event','engagement','facebook')"><span class="fa fa-facebook"></span></a>
<a class="btn" href="https://twitter.com/TechUHost?s=09" target="_blank" onclick="ga('send','event','engagement','twitter')"><span class="fa fa-twitter"></span></a>
<a class="btn" href="https://play.google.com/store/apps/developer?id=TechU" target="_blank" onclick="ga('send','event','engagement','android')"><span class="fa fa-android"></span></a>
</li>
</ul>
</div>
</div>
</footer>
</div>
</div>
</body>
&CSS
html, body {
height: 100%;
padding-top: 0;
background-color: #cccccc;
}
.body-content {
height: 100%;
}
.content-wrapper {
display: flex;
flex-direction: column;
height: 100%
}
.content-body {
flex: 1 0 auto;
overflow-y: auto;
overflow-x: hidden;
padding-top: 50px;
}
.content-footer {
flex: 0 0 auto;
}
I tried this many times and it works perfect for me.
https://css-tricks.com/snippets/css/sticky-footer/
Hope it helps :)
The problem is, that your html and your body tag dont expand to the bottom of the screen, if you have no content. To make your html expand to the bottom add this css:
html,
body {
margin:0; /* removes any margin (especially at the bottom) */
padding:0; /* removes any padding (especially at the bottom) */
height:100%; /* will make it expand to the end */
}
I would like to have a smaller jumbotron/carousel with the text over the images at the top of the page like I have, but I just don't like how plan it looks stretched across the whole width like that.
I would also like to know if there is a way to dim the image or put a transparent background behind the text so it is more visible?
I'm a newb developer trying to learn the ropes. I couldnt think of my own project to tackle, so I want to redesign my job's website in a "better" way. The website they currently have is not responsive. Just trying to learn the ropes more than anything. Here is my code.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Crabcake Factory | World Famous Cakes!</title>
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href='http://fonts.googleapis.com/css?family=Slabo+27px' rel='stylesheet' type='text/css'>
<link href="css/style.css" rel="stylesheet" >
</head>
<body>
<!--navigation -->
<div id="navmarg">
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<!-- 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">
<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="#"><p>Crabcake Factory | Online</p></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
Store <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Food</li>
<li>Clothing/Accessories</li>
<li>Gift Cards</li>
<li class="divider"></li>
</ul>
</li>
<li class="dropdown">
Locations & Specials, Menu <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Locations & Specials</li>
<li>Menu</li>
<li class="divider"></li>
</ul>
</li>
<li>Blog</li>
<li>Our Story</li>
<li>Contact</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</div>
<!--END NAV-->
<!--SLIDESHOW-->
<div id="myCarousel" class="carousel slide jumbotron">
<div class="container">
<ol class="carousel-indicators">
<li class="active" data-target="#myCarousel" data-slide-to="0"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<div class="carousel-caption slidecenter">
<h1>World Famous Cakes</h1>
<p class="lead">Taste our world famous jumbo lump crabcakes!</p>
<button type="button" class="btn btn-success">Order Crabcakes Anywhere</button>
</div>
<img src="img/crabcakes.jpg" alt="Crabcake Factory World Famous Jumbo Lump Crabcakes - Shipped Worldwide!" class="img-responsive slidecenter">
</div>
<div class="item">
<div class="carousel-caption slidecenter">
<h1>Something for everyone</h1>
<p class="lead">Browse our menu!</p>
<button type="button" class="btn btn-success">Menu</button>
</div>
<img src="img/cakeplate.jpg" alt="Crabcake Factory World Famous Jumbo Lump Crabcakes - Shipped Worldwide!" class="img-responsive slidecenter">
</div>
<div class="item">
<div class=" carousel-caption slidecenter">
<h1>Stop by during happy hour</h1>
<p class="lead">Fenwick Happy Hour 12-6 | Best specials on the shore!</p>
<button type="button" class="btn btn-success">Locations & Specials</button>
</div>
<img src="img/drinks.jpg" alt="Crabcake Factory World Famous drinks, fenwick de drink specials" class="img-responsive slidecenter">
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="icon-prev"></span>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="icon-next"></span>
</a>
</a>
</div>
<!--END SLIDESHOW-->
<div class="container">
<div class="row">
<!--EMAIL LIST-->
<div class="col-xs-12 col-md-4 pull-right">
<div id="email-list">
<div class="widget widget-mailing-list" id="widget-mailing-list">
<div class="widget-header">
<h3>Stay up to date with Specials, Events and More!</h3>
</div>
<div class="widget-content">
<p>Sign up for online deals, news, events, specials, and more.</p>
</div>
<form action="//crabcakefactoryonline.us9.list-manage.com/subscribe/post?u=6140fd91fdae3db6f79963c78&id=207ed287eb" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank">
<input placeholder="your#email.com" name="EMAIL" id="email-input" type="email">
<input class="btn" value="Sign Up" name="subscribe" id="email-submit" type="submit">
</form>
</div>
</div>
<!-- END HEADER -->
</div>
<!--END EMAIL LIST -->
</div>
</div>
<!-- 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="js/bootstrap.min.js"></script>
</body>
</html>
CSS
#myCarousel{
}
.slidecenter{
margin: auto;
text-align: center;
}
.item img{
margin-top: 5px;
}
.carousel-indicators li{
border-color: #222;
}
.carousel-indicators li.active{
background-color: #222;
}
This may be what you are looking: Bootsnipp Responsive Carousel
In case the link dies: http://bootsnipp.com/snippets/featured/responsive-bs-carousel-with-hero-headers it can be found searching www.bootsnipp.com for "Carousel".
The important aspects are located in maridlcrmn's CSS file where she positions the hero absolute with percentages to maintain the text's position centrally to the view. You may have to crop your images since they are your company's for faster rendering.
EDIT
You mentioned your text overflowing. Chances are that some of your own styles are causing this as it doesn't occur in the example where the only files used are Bootstrap CDN for CSS and JS, as well as and the jQuery framework CDN. If it persists, there are media queries, targeting the text within the carousel. Add this to the end of your CSS for screen widths smaller than 340 pixels.
#media screen and (max-width: 340px) {
.hero h1 {
font-size:0.8em;
}
}
For anyone who may stumble on this thread, here is how I fixed my problem:
I linked to a file containing this CSS, right before my custom CSS (Contains media queries to fix text)
/*
Fade content bs-carousel with hero headers
Code snippet by maridlcrmn (Follow me on Twitter #maridlcrmn) for Bootsnipp.com
Image credits: unsplash.com
*/
/********************************/
/* Fade Bs-carousel */
/********************************/
.fade-carousel {
position: relative;
height: 100vh;
}
.fade-carousel .carousel-inner .item {
height: 100vh;
}
.fade-carousel .carousel-indicators > li {
margin: 0 2px;
background-color: #f39c12;
border-color: #f39c12;
opacity: .7;
}
.fade-carousel .carousel-indicators > li.active {
width: 10px;
height: 10px;
opacity: 1;
}
/********************************/
/* Hero Headers */
/********************************/
.hero {
position: absolute;
top: 50%;
left: 50%;
z-index: 3;
color: #fff;
text-align: center;
text-transform: uppercase;
text-shadow: 1px 1px 0 rgba(0,0,0,.75);
-webkit-transform: translate3d(-50%,-50%,0);
-moz-transform: translate3d(-50%,-50%,0);
-ms-transform: translate3d(-50%,-50%,0);
-o-transform: translate3d(-50%,-50%,0);
transform: translate3d(-50%,-50%,0);
}
.hero h1 {
font-size: 5em;
font-weight: bold;
margin: 0;
padding: 0;
}
.fade-carousel .carousel-inner .item .hero {
opacity: 0;
-webkit-transition: 2s all ease-in-out .1s;
-moz-transition: 2s all ease-in-out .1s;
-ms-transition: 2s all ease-in-out .1s;
-o-transition: 2s all ease-in-out .1s;
transition: 2s all ease-in-out .1s;
}
.fade-carousel .carousel-inner .item.active .hero {
opacity: 1;
-webkit-transition: 2s all ease-in-out .1s;
-moz-transition: 2s all ease-in-out .1s;
-ms-transition: 2s all ease-in-out .1s;
-o-transition: 2s all ease-in-out .1s;
transition: 2s all ease-in-out .1s;
}
/********************************/
/* Overlay */
/********************************/
.overlay {
position: absolute;
width: 100%;
height: 100%;
z-index: 2;
background-color: #080d15;
opacity: .7;
}
/********************************/
/* Custom Buttons */
/********************************/
.btn.btn-lg {padding: 10px 40px;}
.btn.btn-hero,
.btn.btn-hero:hover,
.btn.btn-hero:focus {
color: #f5f5f5;
background-color: #1abc9c;
border-color: #1abc9c;
outline: none;
margin: 20px auto;
}
/********************************/
/* Slides backgrounds */
/********************************/
.fade-carousel .slides .slide-1,
.fade-carousel .slides .slide-2,
.fade-carousel .slides .slide-3 {
height: 100vh;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
.fade-carousel .slides .slide-1 {
background-image: url(../img/crabcakes.jpg);
}
.fade-carousel .slides .slide-2 {
background-image: url(../img/cakeplate.jpg);
}
.fade-carousel .slides .slide-3 {
background-image: url(../img/drinks.jpg);
}
/********************************/
/* Media Queries */
/********************************/
#media screen and (min-width: 980px){
.hero { width: 980px; }
}
#media screen and (max-width: 440px) {
.hero h1 {
font-size:3.8em;
}
}
#media screen and (max-width: 340px) {
.hero h1 {
font-size:3em;
}
}
And here is my HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Crabcake Factory | World Famous Crabcakes!</title>
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href='http://fonts.googleapis.com/css?family=Slabo+27px' rel='stylesheet' type='text/css'>
<link href="css/carouselcss.css" rel="stylesheet" >
<link href="css/style.css" rel="stylesheet" >
</head>
<body>
<!--navigation -->
<div id="navmarg">
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<!-- 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">
<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="#"><p>Crabcake Factory | Open 9-9PM Daily!</p></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
Online Store <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Food</li>
<li>Clothing/Accessories</li>
<li>Gift Cards</li>
<li class="divider"></li>
</ul>
</li>
<li class="dropdown">
Locations & Specials, Menu <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Locations & Specials</li>
<li>Menu</li>
<li class="divider"></li>
</ul>
</li>
<li>Blog</li>
<li>Our Story</li>
<li>Contact</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</div>
<!--END NAV-->
<!--START JUMBO SLIDER-->
<div class="carousel fade-carousel slide" data-ride="carousel" data-interval="4000" id="bs-carousel">
<!-- Overlay -->
<div class="overlay"></div>
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#bs-carousel" data-slide-to="0" class="active"></li>
<li data-target="#bs-carousel" data-slide-to="1"></li>
<li data-target="#bs-carousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item slides active">
<div class="slide-1"></div>
<div class="hero">
<hgroup>
<h1>Hungry?</h1>
<h3>We ship delicious crabcakes World Wide!</h3>
</hgroup>
<button class="btn btn-hero btn-lg" role="button">Order Crabcakes</button>
</div>
</div>
<div class="item slides">
<div class="slide-2"></div>
<div class="hero">
<hgroup>
<h1>Something for Everyone</h1>
<h3>Browse our menu!</h3>
</hgroup>
<button class="btn btn-hero btn-lg" role="button">Menu</button>
</div>
</div>
<div class="item slides">
<div class="slide-3"></div>
<div class="hero">
<hgroup>
<h1>Rockin' Specials!</h1>
<h3>The Best on the Shore!</h3>
</hgroup>
<button class="btn btn-hero btn-lg" role="button">Locations & Specials</button>
</div>
</div>
</div>
</div>
<!--END JUMBO SLIDER-->
<div class="container">
<div class="row">
</div>
</div><!--ENDCONTAINER-->
<!-- 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="js/bootstrap.min.js"></script>
</body>
</html>