I am working on creating a site with bootstrap3. Unfortunately, even after watching many videos I am still having problems.
I would like the logo on my navbar to remain on the left side (which I have) and other additional icons that will be links to other area of the page to be toward the left - unfortunately I have not figured this out via html/css. Please check out www.frobot.net to see what I am attempting to emulate. Essentially, there are multiple icons next to the text.
I would like a white background for the navbar and for it to have a definitive bottom rather than meshing into the rest of the website, if that makes sense. As of right now, there is not a consistent horizontal white area with the navigation tools.
I set up a carousel for three images and only the first image appears.
Can someone please point out issues in my code?
HTML:
<!DOCTYPE html>
<html>
<head>
<!-- Website Title & Description for Search Engine purposes -->
<title>THE BEST YOGURT</title>
<meta name="description" content="Frozen Yogurt">
<!-- Mobile viewport optimized -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<!-- Bootstrap CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-glyphicons.css" rel="stylesheet">
<!-- Custom CSS -->
<link rel="stylesheet" href="css/style.css">
<!-- Include Modernizr in the head, before any other Javascript -->
<script src="js/modernizr-2.6.2.min.js"></script>
</head>
<body>
<div class="container" id="main">
<nav class="navbar navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img src="img/logo.png" alt="#Logo">
</a>
</div>
<div class="navbar navbar-custom">
<div class="navbar-header">
<a class="icons" href="icons">
<link href='http://fonts.googleapis.com/css?family=Titillium+Web' rel='stylesheet' type='text/css'>
<img src="img/froyo.png" alt="Froyo"<li>FROYO</li>
<img src="img/story.png" alt="Bots"<li>BOTS</li>
<img src="img/team.png" alt="Press"<li>PRESS</li>
<img src="img/talk.png" alt="Team"<li>TEAM</li>
<img src="img/contact.png" alt="Contact"<li>CONTACT</li>
</div>
</nav><!--End Nav Bar -->
</div>
<!-- Carousel Begins -->
<div class="carousel-slide" id="myCarousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li class="active" data-slide-to="0" data-target="#myCarousel"></li>
<li data-slide-to="1" data-target="#myCarousel"></li>
<li data-slide-to="2" data-target="#myCarousel"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active" id="slide1">
<div class="carousel-caption">
<h4></h4>
<p></p>
</div><!-- end carousel-caption-->
</div><!-- end item -->
<div class="item" id="slide2">
<div class="carousel-caption">
<h4></h4>
<p></p>
</div><!-- end carousel-caption-->
</div><!-- end item -->
<div class="item" id="slide3">
<div class="carousel-caption">
<h4></h4>
<p></p>
</div><!-- end carousel-caption-->
</div><!-- end item -->
</div><!-- carousel-inner -->
<!-- Controls -->
<a class="left carousel-control" data-slide="prev" href="#myCarousel"><span class="icon-prev"></span></a>
<a class="right carousel-control" data-slide="next" href="#myCarousel"><span class="icon-next"></span></a>
</div><!-- end myCarousel -->
<div class="row" id="FroYo">
<img src="img/contact-para-bg.png" alt="Bots"
</body>
</html>
CSS:
/* --------------------------------------
Layout
-------------------------------------- */
.nav-bar {
position:fixed;
top:0;
background-color:white;
padding-top:30px;
padding-left:100px;
}
.navbar-brand {
padding: 13px 15px;
background-color:white;
}
.icons {
margin:0;
padding-top: 25px;
padding-right: 200px;
padding-left:100px;
background-color:white;
}
.icons a{
font-family: 'Titillium Web', sans-serif;
text-decoration: none;
float: left;
display: block;
padding: 20px 15px;
color:gray;
background-color:white;
}
.icons a:hover{
color:purple;
}
* --------------------------------------
Carousel
-------------------------------------- */
#myCarousel {
margin-top: 300px;
background-color:gray;
}
.carousel-caption {
font-size: 24px;
}
.carousel-caption h4 {
font-size: 32px;
}
#myCarousel .item { height: 700px; }
#slide1 {
background: url('../img/best-slide.png') top center no-repeat;
}
#slide2 {
background: url('../img/good.png') top center no-repeat;
}
#slide3 {
background: url('../img/slide3.png') top center no-repeat;
}
you can throw a bottom border on the navbar and modify the css of the border to make the space between the navbar and the rest of your page. You also forgot the data-ride="carousel" in the div tag for the carousel.
Related
I put a frame and a picture together but my photo is not fully displayed, and in each size a part of the image is displayed, for example, for a mobile phone, only a small part of it is displayed, and in a larger and medium size, a larger part of the photo is displayed. can you help me?
My html markup:
<!-- about section -->
<section id="about" class="bg-secondary">
<div class="container-fluid">
<div class="row">
<!-- about img column -->
<div class="col-md-6 about-picture height-80 img-responsive "></div>
<!-- about text column -->
<div class="col-md-6 about-text height-80 px-5 d-flex align-items-center justify-content-center">
<!-- this is for centering -->
<div class="about-text-center">
<!-- title -->
<div class="row">
<div class="col text-center">
<h1 class="display-4 text-uppercase text-dark mb-0"><strong>about</strong></h1>
<div class="title-underline bg-warning"></div>
<p class="mt-2 text-capitalize">hi it is a test</p>
</div>
</div>
<!-- end of title -->
<!-- single item -->
</div>
</div>
</div>
</div>
</section>
This is my CSS:
body {
font-family: 'Roboto', sans-serif;
}
.height {
min-height: 100vh;
}
.title-underline {
width: 200px;
height: 5px;
margin: 0 auto;
}
.height-80 {
min-height: 100vh;
}
.height-11 {
max-height: 11vh;
}
.about-picture {
background: url("https://cdn.mos.cms.futurecdn.net/6t8Zh249QiFmVnkQdCCtHK.jpg");
}
You can use background image as you have done, but you need to give it a size and position, and stop it repeating, otherwise it is just picking up the defaults for these values.
Here is what to put in your CSS. I have deliberately explicitly set each value so it's easier to see what is going on:
.about-picture {
background-image: url("https://cdn.mos.cms.futurecdn.net/6t8Zh249QiFmVnkQdCCtHK.jpg");
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
}
Of course, you may want to change the positioning, but the size contain makes sure the whole image is always visible whatever the actual dimensions of the column on any device.
After I see your code, maybe I don't think you can put the image in the css if it's used like that. I changed your code in the css section in .about-picture.
And I also changed the html markup in this section:
<div class="col-md-6 about-picture">
<img src="https://cdn.mos.cms.futurecdn.net/6t8Zh249QiFmVnkQdCCtHK.jpg">
</div>
Like this edited from me:
<html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<style>
body{
font-family: 'Roboto', sans-serif;
width: 100%;}
.height{
min-height: 100vh;}
.title-underline{
width: 200px;
height: 5px;
margin: 0 auto;}
.height-80{
min-height: 100vh;}
.height-11{
max-height: 11vh;}
.about-picture{
align-items: center!important;
}
.about-picture img{
width: 100%;
position: relative;
padding-top: 120px;
}
</style>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
<title>Document</title>
</head>
<body>
<!-- about section -->
<section id="about" class="bg-secondary">
<div class="container-fluid">
<div class="row">
<!-- about img column -->
<div class="col-md-6 about-picture">
<img src="https://cdn.mos.cms.futurecdn.net/6t8Zh249QiFmVnkQdCCtHK.jpg">
</div>
<!-- about text column -->
<div class="col-md-6 about-text height-80 px-5 d-flex align-items-center justify-content-center">
<!-- this is for centering -->
<div class="about-text-center">
<!-- title -->
<div class="row">
<div class="col text-center">
<h1 class="display-4 text-uppercase text-dark mb-0"><strong>about</strong></h1>
<div class="title-underline bg-warning"></div>
<p class="mt-2 text-capitalize">hi it is a test</p>
</div>
</div>
<!-- end of title -->
<!-- single item -->
</div>
</div>
</div>
</div>
</section>
</body>
</html>
I'm making a web with bootstrap and I need to create an specific header but I have problems.
The image below is what I have to do:
and the image below here is what I have made:
The code I'm using is:
#wrapper {
background-color: #F2F2F2;
height: 100%;
}
.navbar {
background-color: #000000;
color: #FFFFFF;
}
#profile {
border-radius: 100%;
}
<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/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="wrapper">
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="nav navbar-left top-nav">
<img id="profile" width="50px" src="assets/images/nobody.jpg">
<p>Nombre y apellido usuario</p>
</div>
<div class="navbar-header">
<img src="assets/images/logo.jpe">
</div>
<ul class="nav navbar-right top-nav">
<li>Logout<i class="mdi mdi-logout"></i></li>
</ul>
</nav>
</div>
Here is an option using basic Bootstrap concepts. Hope it helps.
<!--Container-->
<div class="container-fluid">
<!--Row-->
<div class="row">
<!--Col-MD-12-->
<div class="col-md-12">
<nav class="navbar navbar-default navbar-fixed-top navbar-inverse" role="navigation">
<!--Left Nav Div-->
<div class="col-sm-4">
<ul class="nav navbar-nav">
<li>
<span><img class="img-circle" src="http://placehold.it/50x50"></span>
</li>
<li>
<p style="color: white; margin-top: 20%;">Nombre y apellido usuario</p>
</li>
</ul>
</div>
<!--Mid Nav Div-->
<div class="col-sm-4 text-center"><h3 style="color: white; margin-top: 5%;">LOGO</h3></div>
<!--Right Nav Div-->
<div class="col-sm-4">
<ul class="nav navbar-nav navbar-right" style="margin-top: 2%; ">
<li>Logout <span class="glyphicon glyphicon-off"></span></li>
</ul>
</div>
</nav>
</div> <!-- End Col-MD-12-->
</div> <!--End Row-->
</div> <!--End Container-->'
This can be done it many ways.. I have just added some inline css in your html for normal view(desktop view).Yet you can try better option to make it work responsively.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Case</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
#wrapper {
background-color: #F2F2F2;
height: 100%;
}
.navbar {
background-color: #000000;
color: #FFFFFF;
}
#profile {
border-radius: 50%;
}
</style>
</head>
<body>
<div id="wrapper">
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="nav navbar-left top-nav" style="margin:10px;">
<img id="profile" width="50px" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150">
<p style="display:inline;">Nombre y apellido usuario</p>
</div>
<div class="navbar-header" style="margin:0.2% 25%;">
<img width="100" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150">
</div>
<ul class="nav navbar-right top-nav" style="margin:0.8% 1%;">
<li>Logout<i class="mdi mdi-logout"></i></li>
</ul>
</nav>
</div>
At the end I find the solution. I have been searching and I found a solution to center the elements vertically:
https://stackoverflow.com/a/35388513/1888372
Here it's says to use display: flex; align-items: center; on parent div, so the result is:
#wrapper {
background-color: #F2F2F2;
height: 100%;
}
.navbar {
background-color: #000000;
color: #FFFFFF;
height: 76px;
display: flex;
align-items: center;
}
.navbar p {
display: inline;
}
.brand {
position: absolute;
left: 50%;
margin-left: -50px !important;
display: block;
}
#profile {
border-radius: 100%;
}
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<nav class="navbar navbar-default navbar-fixed-top navbar-inverse" role="navigation">
<div class="col-sm-4">
<img class="img-circle" src="assets/images/nobody.jpg" width=60>
<p>Nombre y apellido usuario</p>
</div>
<div class="col-sm-4 text-center">
<img src="assets/images/logo.jpe">
</div>
<div class="col-sm-4">
<div class="nav navbar-nav navbar-right">
Logout<i class="mdi mdi-logut"></i>
</div>
</div>
</nav>
</div>
</div>
</div>
Now it is finished (I have to fix some issues but I can do by myself).t
First post here on StackOverflow but longtime user. I am trying to add two MDlite cards to my website, each with a different background image, but the last-declared background image always shows for both. Any help is very much appreciated. Here is the full code you can plop into any browser to see the issue (sorry for formatting, doing this on my phone):
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Website Title</title>
<meta name="description" content="Percula Creative">
<meta name="author" content="Percula Creative Author">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.deep_purple-orange.min.css" />
<script defer src="https://code.getmdl.io/1.2.1/material.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--[if IE]><link rel="shortcut icon" href="favicon.ico"><![endif]-->
<link rel="icon" href="favicon.png">
</head>
<body>
<!-- Uses a transparent header that draws on top of the layout's background -->
<style>
.demo-layout-transparent {
background: url('../assets/demos/transparent.jpg') center / cover;
}
.demo-layout-transparent .mdl-layout__header,
.demo-layout-transparent .mdl-layout__drawer-button {
/* This background is dark, so we set text to white. Use 87% black instead if
your background is light. */
color: white;
}
</style>
<!-- Always shows a header, even in smaller screens. -->
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class="mdl-layout__header">
<div class="mdl-layout__header-row">
<!-- Title -->
Website Title
<!-- Add spacer, to align navigation to the right -->
<div class="mdl-layout-spacer"></div>
<!-- Navigation. We hide it in small screens. -->
<nav class="mdl-navigation mdl-layout--large-screen-only">
<a class="mdl-navigation__link" href="apps.html">Apps</a>
<a class="mdl-navigation__link" href="">About</a>
<a class="mdl-navigation__link" href="">Contact</a>
</nav>
</div>
</header>
<div class="mdl-layout__drawer">
<span class="mdl-layout-title">Website</span>
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="">Apps</a>
<a class="mdl-navigation__link" href="">About</a>
<a class="mdl-navigation__link" href="">Contact</a>
</nav>
</div>
<main class="mdl-layout__content" style="background-color: #EEEEEE;">
<div class="page-content" >
<div style="width:80%; max-width:780px; margin: 0 auto; padding: 16px">
<!-- Wide card with share menu button --> <style> .demo-card-wide.mdl-card { width: 100%; } .demo-card-wide > .mdl-card__title { color: #fff; height: 176px; background: URL('http://www.imagenspng.com.br/wp-content/uploads/2015/07/minions-03.png') center / cover; } .demo-card-wide > .mdl-card__menu { color: #fff; } </style>
<div class="demo-card-wide mdl-card mdl-shadow--2dp"">
<div class="mdl-card__title">
<h2 class="mdl-card__title-text"></h2> </div>
<div class="mdl-card__supporting-text">
<p>Lorem Ipsum dolor1...</p>
</div>
<div class="mdl-card__actions mdl-card--border">
<a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect" href="">Download</a>
</div>
<div class="mdl-card__menu">
<button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
<i class="material-icons">share</i>
</button>
</div>
</div>
</div>
<div style="width:80%; max-width:780px; margin: 0 auto; padding: 16px">
<!-- Wide card with share menu button --> <style> .demo-card-wide.mdl-card { width: 100%; } .demo-card-wide > .mdl-card__title { color: #fff; height: 176px; background: URL('http://i2.mirror.co.uk/incoming/article6379795.ece/ALTERNATES/s615b/Minion.jpg') center / cover; } .demo-card-wide > .mdl-card__menu { color: #fff; } </style>
<div class="demo-card-wide mdl-card mdl-shadow--2dp"">
<div class="mdl-card__title">
<h2 class="mdl-card__title-text"></h2> </div>
<div class="mdl-card__supporting-text">
<p>Lorem Ipsum dolor2...</p>
</div>
<div class="mdl-card__actions mdl-card--border">
<a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect" href="">Download</a>
</div>
<div class="mdl-card__menu">
<button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
<i class="material-icons">share</i>
</button>
</div>
</div>
</div>
</div>
</main>
</div>
</body>
</html>
That is because you've inlined your CSS twice into the page, and the second is overriding the first. This line of CSS is effecting both divs, not just the first or second.
.demo-card-wide > .mdl-card__title { color: #fff; height: 176px; background: URL('http://www.imagenspng.com.br/wp-content/uploads/2015/07/minions-03.png') center / cover; }
You'll need to create two separate rules, one for each div if you want two different background images in each.
In short do the following:
1) Delete the entire second <style>...</style> block
2) Add a new class to the second div so it becomes
<div class="mdl-card__title second">
3) Add a new css rule to your first <style>...</style> block like this
.demo-card-wide > .mdl-card__title.second { color: #fff; height: 176px; background: URL('http://i2.mirror.co.uk/incoming/article6379795.ece/ALTERNATES/s615b/Minion.jpg') center / cover; }
I am using Bootstrap and I need two layouts for wide and boxed. And I want to easly toggle (change) between layouts when needed.
EDIT : How can I do like this : http://htmlstream.com/preview/unify-v1.7/
Beetween boxed and wide layout changing only in body class (boxed-layout container) I don't need switcher. I will put "boxed-layout container" class to body for boxed layout or I will remove boxed-layout container class from body for wide layout. But I can not do it with bootstap and need help for this.
How can I create wide and boxed layouts like following example images? And how can I change layout via class?
For example:
<html>
<head>
<style>
.main-wrapper-wide {
width: 100% !important;
}
.main-wrapper-boxed {
width: 850px !important;
box-shadow: 0 0 5px #ccc;
}
</style>
</head>
<body>
<div class="main-wrapper-wide or main-wrapper-boxed">
<!-- header content here !-->
<!-- slider here !-->
<!-- site content here !-->
<!-- footer content here start !-->
</div>
</body>
</html>
Do you just want the Navbar and the main containers to only be a max of 800px wide and then still be free to resize on all screens sizes.
If so then this is probably all you need.
Just use max-width:800px; and you also need to <center> the divs.
Here is a full size Fiddle.
<!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="">
<link rel="icon" href="../../favicon.ico">
<title>Starter Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<style>
body {
padding-top: 50px;
}
.clear {
margin-top:60px;
margin-bottom:60px;
}
.block1 {
height: 440px;
margin-bottom:60px;
}
.block2 {
height: 200px;
}
.bg-clr {
background-color: blueviolet;
}
.bg-clr-blk {
background-color: black;
}
.section-max-width {
max-width:800px;
}
b {
color:black;
}
</style>
</head>
<body class="bg-clr">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container section-max-width">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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="#">Project name</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<center>
<section class="section-max-width">
<div class="clear">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 bg-primary block1">
<br>
The overall <b>Max Width</b> these containers and the navbar can be is <b>800px</b>.
<br>
They are still free the reduce in size when resized to fit smaller screen sizes.
<br>
Resize to see.
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 bg-primary block2"></div>
</div><!-- /.container -->
<div class="container col-lg-12 col-md-12 col-sm-12 col-xs-12 bg-clr-blk clear"><br><br></div>
</section>
</center>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<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>
</body>
</html>
Take a look at this code snippet and try changing the main-wrapper-wide class to main-wrapper-boxed:
body {
background-color: #E5E5E5;
}
.container {
max-width: 850px;
border: solid 1px #6c757d;
padding: 10px;
margin-bottom: 10px;
}
.main-wrapper-boxed {
max-width: 850px;
margin: 0 auto;
padding: 10px;
background-color: #FF7777;
}
.main-wrapper-boxed .container-fluid {
padding-left: 0;
padding-right: 0;
}
.slider {
padding: 10px;
background-color: #CDCDCD;
}
.footer {
color: #fff;
padding: 10px;
background-color: #1C1C1C;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="main-wrapper-wide"> <!-- change class name to main-wrapper-boxed -->
<div class="container">
<div class="row header mx-0">
<div class="col-3">Logo</div>
<div class="col-8 offset-1">Header menu</div>
</div>
</div>
<div class="container-fluid slider">
<div class="container">Slider</div>
</div>
<div class="container">Site content</div>
<div class="container-fluid footer">
<div class="container">Footer</div>
</div>
</div>
These were the steps I took:
First of all, I created the page as you wanted in the Bootstrap wide example. This became the main-wrapper-wide version.
After that, I changed the class to main-wrapper-boxed and customized it for the Bootstrap boxed example by giving it max-width=850px.
Done!
Here's a Fiddle just in case...
I'm trying to make a responsive design, where I will have
structure like this.
But I want the vertical menu to go from the header to the footer, no matter if there is some text or not.
Here is my code:
<!DOCTYPE html>
<html>
<head lang="en">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<meta charset="UTF-8">
<title>template</title>
</head>
<body>
<div class="">
<div class="row">
<header class="col-sm-12 col-lg-12 bordered header"> <!-- Header -->
Header
</header> <!-- End of header -->
</div>
<div class="row">
<div class="col-sm-12 col-lg-12 bordered menu-horizontal"> <!-- Horizontal menu -->
Menu horizontal
</div><!-- End of horizontal menu -->
</div>
<div class="site-container container-fluid">
<div class="row">
<div class="col-sm-2 col-lg-2 bordered"> <!-- Vertical menu -->
<menu class="menu-vertical" role="menu">
Menu vertical
</menu>
</div> <!-- End of vertical menu -->
<div class="col-sm-10 col-lg-10 bordered"> <!-- Content -->
Content
</div> <!-- End of content -->
</div>
</div>
<div class="row">
<footer class="col-sm-12 col-lg-12 bordered footer"> <!-- Footer -->
Footer
</footer> <!-- End of footer -->
</div>
</div>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
And here is CSS
.bordered {
border: 1px solid black
}
.footer {
position: fixed;
bottom: 0;
}
.header {
height: 67px;
}
.menu-vertical {
position: relative;
height: 100%;
}
.site-container {
position: absolute;
height: 100%;
width: 100%;
}
.menu-horizontal {
height: 18px;
}
There is many ways to achieve what you want. One possible solution is :
1/ Remove "menu-vertical" from the menu element and put it on it's parent. Like this :
<div class="col-sm-2 col-lg-2 bordered menu-vertical">
<menu role="menu">
Menu vertical
</menu>
</div>
2/ Then, add this CSS :
.site-container > .row:first-of-type {
height:100%;
}
And you should be far closer to what you want ;)
.menu-vertical {
position : absolute;
top : height1 px;
bottom : height2 px;
}
see my screen :
http://screencast.com/t/N2NuyOju
I hope here you'll find something that can help.
<head lang="en">
<meta charset="UTF-8">
<title>template</title>
<style>
.bordered {
border: 1px solid red
}
.header {
height: 10%;
}
.menu {
height: 10%;
}
.vertical {
width: 30%;
float: left;
height: 70%;
}
.content {
float: left;
}
.footer {
position: fixed;
bottom: 0;
height: 10%;
}
</style>
</head>
<body>
<div class="">
<div class="bordered header">
<header>
Header
</header>
</div>
<div class="row">
<div class="bordered menu">
Menu horizontal
</div>
</div>
<div class="">
<div class="row">
<div class="bordered vertical">
<menu class="" role="menu">
Menu vertical
</menu>
</div>
<div class="bordered content">
Content
</div>
</div>
</div>
<div class="row">
<footer class="bordered footer">
Footer
</footer>
</div>
</div>
</body>
</html>