as I am new to Bootstrap and working on a test site which requires nested column layout.
my code is as under
<html class="no-js" lang="en-US">
<body>
<div class="container">
<div id="page" class="row">
<header id="branding" role="banner" class="span12">
<nav id="access" role="navigation">
Menu
</nav>
</header>
<section id="primary" class="span9">
<div id="content" role="main">
<h1 class="entry-title">Some Title</h1>
<div class="entry-meta">
Some Info
</div><!-- .entry-meta -->
<div class="row meta-info">
<div class="post-image span3">
<ul class="thumbnails">
image
</ul>
</div><!-- .post-image -->
<div class="post-intro span4">
some intro text
</div><!-- .post-intro -->
<div class="post-desc span2">
some more info
</div><!-- .post-desc-->
</div><!-- meta info-->
</section>
</div><!-- #content -->
</div><!-- row -->
</div><!-- container -->
</body>
</html>
I see every think ok on a large display, but on a screen 1152x864, post-desc on span2 will break down and appears at the bottom of span4.
what I need that this should remain responsive and should adjust with browser re-size.
is my code correct? or is there any other way to achieve this?
Please help.
Regards
SAQ
<div class="row meta-info">
shoud be
<div class="row-fluid meta-info">
supposing your container has a max-width value on it, it should work.
Related
So I've been working on this for the better half of 2 weeks now and can not seem to get this to work out as intended. I'm starting to think that it might be an issue with how deep the rows/columns in question are, but would really like to get some outside insight.
In short, it is the page with -> 2 rows in which the second row contains -> 2 columns in which the second contains -> 3 rows being a breadcrumb, the main content of each page and a footer. Should the page need to extend the nav should remain static. I vaguely recall when starting out seeing some posts of people trying to do a similar layout, but have not been able to find those posts again.
Below is the code in question in as stripped down a form as I could get it:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap and self-made CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<!-- various imports -->
<link href="https://fonts.googleapis.com/css?family=Chivo:900" rel="stylesheet">
<style>
html, body{
height: 100%;
width: 100%;
}
h2 {
font-family: 'Chivo', sans-serif;
}
</style>
</head>
<body style="background-color: #000;"> <!-- bgc: black -->
<div class="container-fluid h-100">
<div class="row h-25"style="background-color: #F00;"> <!-- bgc: red -->
<div class="col">
<h1>In the header!</h1>
</div>
</div>
<div class="row h-75" style="background-color: #0F0;"> <!-- bgc: green -->
<div class="col-sm-2 no-gutters h-100" style="background-color: #00F;"> <!-- bgc: blue -->
<nav>
<h2>In the nav bar!</h2>
</nav>
</div>
<div class="col-sm-10 no-gutters h-100" style="background-color: #FF0;"> <!-- bgc: yellow -->
<div class="row align-items-start" style="background-color: #FFF;"> <!-- bgc: white -->
<div class="col">
<main>
<h2>In the breadcrumb!</h2>
</main>
</div>
</div>
<div class="row align-items-center" style="background-color: #0FF;"> <!-- bgc: cyan -->
<div class="col">
<main>
<h2>In the main!</h2>
</main>
</div>
</div>
<div class="row align-items-end" style="background-color: #F0F;"> <!-- bgc: magenta -->
<div class="col">
<footer>
<h2>In the footer</h2>
</footer>
</div>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</body>
</html>
My questions are:
1. Can a layout like this even be done in bootstrap4?
2. If it can, what changes are needed to make it work?
3. The "nav column" when collapsing on smaller screens remains at h-100 instead of shrinking, am I using the subclasses correctly for the fluid scaling?
Sorry, I don't have much experience using rows and containers in bootstrap 4, however I can provide you flexbox implementation of such a layout. If you understand flexbox, you can use the below code as reference to create your own layout.
Following is a barebone flexbox code to achieve the layout hierarchy you have mentioned. I realize it's not the best of answers, but hope it helps.
<div class="container-fluid d-flex flex-column" style="height: 100%"> <!-- Main container declared as flexbox column -->
<div class="h-25"> <!-- Row 1 in the container -->
</div>
<div class="h-75 d-flex row"> <!-- Row 2 in the container. This itself is a flexbox row -->
<div class="col-sm-2"> <!-- Column 1 of the row -->
</div>
<div class="col-sm-10 d-flex flex-column"> <!-- Column 2 of the row -->
<div> <!-- Row 1 of the column -->
</div>
<div> <!-- Row 2 of the column -->
</div>
<div> <!-- Row 3 of the column -->
</div>
</div>
</div>
</div>
Refer to boostrap4 flexbox document to understand flexbox https://v4-alpha.getbootstrap.com/utilities/flexbox/:
EDIT
Here's a working plunker : https://plnkr.co/edit/WWT5XoHyvLf2paKQItSH?p=preview
I am trying to build a MDL-based header, which includes drawer and tabs. The problem is that these two components come on different lines, while I want them to be on the same line.
1
http://codepen.io/anon/pen/KVWppQ
<html>
<head>
<!-- Material Design Lite -->
<script src="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js"></script>
<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<!-- Material Design icon font -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<!-- Simple header with fixed tabs. -->
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header
mdl-layout--fixed-tabs">
<header class="mdl-layout__header">
<div class="mdl-layout__header-row">
<div class="mdl-layout-spacer"></div>
</div>
<!-- Tabs -->
<nav class="mdl-layout__tab-bar mdl-js-ripple-effect">
Tab 1
Tab 2
Tab 3
</nav>
</header>
<div class="mdl-layout__drawer">
<span class="mdl-layout-title">Title</span>
</div>
<main class="mdl-layout__content">
<section class="mdl-layout__tab-panel is-active" id="fixed-tab-1">
<div class="page-content"><!-- Your content goes here --></div>
</section>
<section class="mdl-layout__tab-panel" id="fixed-tab-2">
<div class="page-content"><!-- Your content goes here --></div>
</section>
<section class="mdl-layout__tab-panel" id="fixed-tab-3">
<div class="page-content"><!-- Your content goes here --></div>
</section>
</main>
</div>
</body>
</html>
Thanks in advance!
I'm using the page-header class to centre the main content of my page. This creates some empty column space on either sides of page-header, and I'd like to utilize that space (possibly to add AdSense banners).
Here is what I tried:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test Title</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script>
</head>
<body>
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
Click Me!
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-2 pull-left">
<span>Left Ding</span>
</div>
<div class="col-md-8">
<div class="page-header">
<h2>I'm a big centered page header!</h2>
</div>
</div>
<div class="col-md-2 pull-right">
<span>Right Dong</span>
</div>
</div>
</div>
</body>
</html>
I do not see Left Ding or Right Dong anywhere on the page. Here is the rendered html: https://jsfiddle.net/bgmjs3qf/
What is the correct way to utilize the left and right column spaces?
You have to add padding to the top of your page since you have a fixed navbar.
See example and Docs.
body {
padding-top: 70px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header"> Click Me!
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-2 pull-left"> <span>Left Ding</span>
</div>
<div class="col-md-8">
<div class="page-header">
<h2>I'm a big centered page header!</h2>
</div>
</div>
<div class="col-md-2 pull-right"> <span>Right Dong</span>
</div>
</div>
</div>
I'm new to Twitter Bootstrap framework and CSS.
I want my right sidebar height to go along with the height of my main content. How should I do that.
<!DOCTYPE HTML>
<html lang="en">
<head>
<link href="includes/Bootstrap/css/bootstrap.css" rel="stylesheet">
<link href="includes/Bootstrap/css/bootstrap-responsive.css" rel="stylesheet">
</head>
<body>
<div class="page-container">
<div class="container">
<div class="container-fluid">
<header class="margin-top">
<div class="row-fluid">
<img border=0 src="images/header.jpg" alt="">
</div>
</header>
<div class="row-fluid">
<div class="span3">
<div class="well sidebar-nav">
<ul class="nav nav-list">
<li>Home</li>
<li>Contact </li>
<li>About Us</li>
</ul>
</div><!--/.well -->
</div><!--/span-->
<div class="span9">
<div class="hero-unit">
If I have a long content here.. The sidebar does not follow the height of the content.
</div>
</div><!--/span-->
</div><!--/row-->
</div><!--/.fluid-container-->
</div>
</div>
</body>
</html>
your container seems to be fine and has a auto height so what is the problem
here you see the fiddle
http://jsfiddle.net/cancerian73/ZpZCD/
.container {background-color:#fc0;}
I've been starting to explore Twitter Bootstrap, and I tried to write or replicate some of their example codes. I used a div with their .container class for the wrapper, and added some rows and columns in it. Having a div with a .container class supposedly centers the div automatically, but in my case, I'm having an unbalanced content. The white space on the left side is much wider than the white space on the right side. Here's the code (I'm not using any css styles):
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The Room</title>
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link rel='stylesheet' href='style.css' />
<!--responsive bootsrap here-->
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="js/jquery-1.10.1.min.js"></script>
<script src="js/functions.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row"></div>
<div class="span12">
<div class="navbar navbar-inverse">
<div class="navbar-inner">
The Room
<ul class="nav">
<li class="active">Home</li>
<li class="divider-vertical"></li>
<li>Preview</li>
<li class="divider-vertical"></li>
<li>Blog</li>
<li class="divider-vertical"></li>
<li>About</li>
<li class="divider-vertical"></li>
</ul>
<form class="navbar-search">
<input type="text" class="search-query" placeholder="Search for...">
</form>
</div>
</div>
</div> <!-- first row -->
<div class="span12">
<div class="hero-unit">
<h1>Hey Mark! <small>and everybody!</small></h1>
<p>Hey Mark! I am Johnny, I am super boring, I love to play football, and I am very passionate about film making. I love the idea on sucking on making films, spending $6m for my first feature film, which is my masterpiece of course! The title of my masterpiece, is "The Room" very catchy right? No, I did not hit her! I did not hit her! I did NOT!</p>
<p>
<a class="btn btn-primary btn-large">Watch Movie</a>`enter code here`
</p>
</div>
</div><!-- second row -->
</div>
</div>
</body>
</html>
Here is the screenshot:
https://dl.dropboxusercontent.com/u/70465637/error_center.jpg
Notice how the left white space is wider than the right white space.
Help Please, thanks in advance.
Your div.span12 should be a child of div.row.
<div class="row">
<div class="span12"></div>
</div>
replace body tag with this
<body>
<div class="container">
<div class="row">
<div class="span12">
<div class="navbar navbar-inverse">
<div class="navbar-inner">
The Room
<ul class="nav">
<li class="active">Home</li>
<li class="divider-vertical"></li>
<li>Preview</li>
<li class="divider-vertical"></li>
<li>Blog</li>
<li class="divider-vertical"></li>
<li>About</li>
<li class="divider-vertical"></li>
</ul>
<form class="navbar-search">
<input type="text" class="search-query" placeholder="Search for...">
</form>
</div>
</div>
</div>
<!-- first row -->
</div>
<div class="row">
<div class="span12">
<div class="hero-unit">
<h1>
Hey Mark! <small>and everybody!</small></h1>
<p>
Hey Mark! I am Johnny, I am super boring, I love to play football, and I am very
passionate about film making. I love the idea on sucking on making films, spending
$6m for my first feature film, which is my masterpiece of course! The title of my
masterpiece, is "The Room" very catchy right? No, I did not hit her! I did not hit
her! I did NOT!</p>
<p>
<a class="btn btn-primary btn-large">Watch Movie</a>`enter code here`
</p>
</div>
</div>
<!-- second row -->
</div>
</div>
</div></body>
check your code properly your span12 div should come inside of <div class="row"></div>
your code should be something like this
<div class="container">
<div class="row">
<div class="span12"> your content goes here </div>
</div>
</div>
If you're still having trouble with the whitespace after putting your span12 div inside your row, then it might be because Bootstrap specifies its own margins and padding etc.
You may have to set your own margins or padding for your span. You can override the bootstrap styles in your CSS with the !important declaration:
.span12 {
margin-left: -50px !important;
}