I am just learning the new bootstrap grid system however it is very different from 2.x and I can't seem to get it to contain anything, it just flows on out.
Screenshot: http://i.imgur.com/aBVgNVr.png
Code: http://pastie.org/8272634
<!DOCTYPE html>
<html>
<head>
<title>ICG - Home</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/over.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="assets/js/html5shiv.js"></script>
<script src="assets/js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="navbar navbar-default 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" id="blue" href="#">iCanGame</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Community</li>
<li>All Games</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Login</li>
<li>Register</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<div id="navend"></div>
<div class="container">
<div class="row">
<div class="col-xs-10">left</div>
<div class="col-xs-2"><div class="wrap">sdsafdsafdsafdsafdsafdsajlsdhakfhdksahlfdsahkfldsakfhkdsakfdkjslahfdskhaflhdksaklfhdsaklfdkhsa</div></div>
</div>
</div>
<script src="assets/js/jquery.js"></script>
<script src="dist/js/bootstrap.min.js"></script>
</body>
</html>
Well the text has been overflowing because your sample text is a single word you have not included any space between those...
Please find code below..
<div class="row">
<div class="col-xs-10"><p>left</p></div>
<div class="col-xs-2"><div class="wrap"><p>
sdsafds dhakfhdks ahlfdsahkf ldsakfhk dsakfdkj slahfd skhafl hdksaklfhds aklfdkhsa</p> </div></div>
</div>
You are using two .col-md-12, shouldn't you be using only two .col-md-6 classes, since the .col-md-12 are width:100% divs?
Because you are giving a no-space-contain word.
Ex:
string like adfjklsdjfaksdjfsakldjfsakl;fjsakl;djf won't work.
instead, string like asdfkljsd;lf asdfkjds asdkfjklj will work
And the grid system will not cut single word into two line.
By the way, give testing paragraph by typing will not be a great idea.
Try Something like paragraph generator
to generate random paragraph.
Related
I'm using angular JS and Bootstrap to display some dynamic data, I currently have it tiling 3 divs. However I need it to tile more than 3 i need them to be smaller, however I can't figure out the bottstrap if i use the smaller column size it just puts one or 2 per row. I need at least 7 per row. Also my function to have them maximize on click isnt working either and i dont know why..
This is what im at now it all works except for setting the ngclick I get an error..
<html>
<head>
<title>Relic</title>
<script src="js/jquery.min.js"></script>
<script src="js/jquery.scrolly.min.js"></script>
<link href="css/cover.css" rel="stylesheet">
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/angular.js"></script>
<script type="text/javascript" src="js/social.js"></script>
<script>
$(document).ready(function() {
$('.hide_div').hide();
$('.show_button').click(function(){
/**
* when show button is clicked we call the show plugin
* which scales the box to default size
* You can try other effects from here: http://jqueryui.com/effect/
*/
$(".hide_div").show("scale", 500);
});
$('.show_button').click(function(){
//same thing happens except in this case we hide the element
$(".hide_div").hide("scale", 500);
});
});
</script>
</head>
<body ng-app="userProfile" ng-controller="ProfileController as post" >
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<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 class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<div class="container-fluid" id="content">
<div class="row" >
<ul ng-repeat="post in post.userPost" class="col-md-1" id="post">
<li ng-click='tab = {{post.message}}' class='show_button'>{{post.title}}{{post.message}}</li>
</ul>
</div>
</div>
</div>
</div>
<div id='fullscreen' class='hide_div'>{{tab}}
<div class='show_button'>test</div></div>
</body>
</html>
this is the error im getting
Error: [$parse:syntax] Syntax Error: Token 'post.message' is unexpected, expecting [:] at column 9 of the expression [tab = {{post.message}}] starting at [post.message}}].
http://errors.angularjs.org/1.3.0-beta.17/$parse/syntax?p0=post.message&p1=is%20unexpected%2C%20expecting%20%5B%3A%5D&p2=9&p3=tab%20%3D%20%7B%7Bpost.message%7D%7D&p4=post.message%7D%7D
at file:///C:/Users/TheLastOne/Desktop/Angular/js/angular.js:78:12
at Parser.throwError (file:///C:/Users/TheLastOne/Desktop/Angular/js/angular.js:10739:11)
at Parser.consume (file:///C:/Users/TheLastOne/Desktop/Angular/js/angular.js:10773:12)
at Parser.object (file:///C:/Users/TheLastOne/Desktop/Angular/js/angular.js:11075:14)
at Parser.primary (file:///C:/Users/TheLastOne/Desktop/Angular/js/angular.js:10707:22)
at Parser.unary (file:///C:/Users/TheLastOne/Desktop/Angular/js/angular.js:10958:19)
at Parser.multiplicative (file:///C:/Users/TheLastOne/Desktop/Angular/js/angular.js:10941:21)
at Parser.additive (file:///C:/Users/TheLastOne/Desktop/Angular/js/angular.js:10932:21)
at Parser.relational (file:///C:/Users/TheLastOne/Desktop/Angular/js/angular.js:10923:21)
at Parser.equality (file:///C:/Users/TheLastOne/Desktop/Angular/js/angular.js:10914:21) <li ng-click="tab = {{post.message}}" class="show_button">
An id needs to be unique, so what you want to use inside any loop or repeat is a class, so class="post" and $('.post').click(..).
Either that or you can have a big mess of indexed ids like id="post{{$index}}" id="fullscreen{{$index}}" but that doesn't sound fun.
It would also make alot more sense in this case to use ng-click.
Here is a Plunker
<!doctype html>
<html>
<head>
<title>Home Page</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="main.css"/>
<link rel="stylesheet" href="style.css"/>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<header class ="navbar">
<div class="container navbar-inverse">
<nav 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" 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="#">CASES4U</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">
iPhone <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>iPhone 3g/3gs</li>
<li>iPhone 4/4s</li>
<li>iPhone 5/5s</li>
<li class="divider"></li>
<li>iPod</li>
</ul>
</li>
<li class="dropdown">
Samsung <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Galaxy S 3</li>
<li>Galaxy S 4</li>
<li>Galaxy S 5</li>
<li class="divider"></li>
<li>Galaxy Tab</li>
</ul>
</li>
<li class="dropdown">
HTC <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>HTC Desire</li>
<li>HTC Desire HD</li>
<li>HTC One</li>
<li class="divider"></li>
<li>HTC One M8</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</div>
</header>
</head>
<body>
<h1 class="cases-of-the-week"><center>Cases Of The Week</center></h1>
<div class="container-row">
<div class="row">
<div class="col-sm-4 col-xs-12">
<div class="panel ">
<div class="panel-heading"><center>iPhone Case</center></div>
<div class="panel-body ">
<div class="iPhone-Case-1">
<img src="iPhone-Case-Of-The-Week.png"width="260" height="290" /></div>
<b><u><center>XTREME iPhone Case (iPhone 5/5s Case)</center></u></b>
It may look like fluorescent armour, but that’s because it kinda is. The XTREME iPhone Case is packed with Reactive Protection Technology, made of XRD foam which stiffens on impact and absorbs 90% of the impact. There’s also a rigid outer polycarbonate shell and an inner shock-absorbing TPE insert, which combine to make this one of the safest havens for your iPhone 5s on the planet.
</div>
</div>
</div>
<div class="col-sm-4 col-xs-6"><div class="panel ">
<div class="panel-heading"><center>Samsung Case</center></div>
<div class="panel-body ">
<div class="Samsung-Case-1">
<img src="Samsung-Case-Of-The-Week.png" width="260" height="290" /></div>
<b><u><center>Spigen SGP Slim Armour Case (Samsung Galaxy S4 Case)</center></u></b>
The Slim Armour case for the Samsung Galaxy S4 has been specifically designed and crafted to offer amazing protection despite being incredibly slim and beautiful in appearance. The TPU case features improved shock absorption on the top, bottom and corners to effectively protect the Galaxy against external impact.
</div>
</div></div>
<div class="col-sm-4 col-xs-6"><div class="panel ">
<div class="panel-heading"><center>HTC Case</center></div>
<div class="panel-body ">
<div class="HTC-Case-1">
<img src="HTC-Case-Of-The-Week.png"width="260" height="290" /></div>
<b><u><center>Tough HTC One Case (HTC One Case)</center></u></b>
You know the feeling. The heartbreak that immediately sets in as your phone smashes to the ground. Flashes of panic, pools of sweat and buckets of tears overwhelm your body. Protect yourself from future stress with the Tough case, providing dual layers of protection. Built to withstand sudden drops and accidental falls, the Tough case for the HTC One is the epitome of protection.
</div>
</div>
</div>
</div>
<footer><center>CASES4U Inc</center></footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>
I recently started using bootstrap and it was going well. I was learning alot and i started using the navbar they have. I used it and it was going well i even made a quick phone case website everything was going well. Until i checked on my file and saw that my website had changed. I dont understand it was fine a day ago and i didnt touch anything.
What website looks like now
You have the <header class="navbar"> inside your <head>, move it to the <body>.
<header class="navbar"> </header> should go inside <body> </body>
Make sure you got matching pairs of <div> </div> tags inside <body> </body>
Use <!DOCTYPE html>
I am creating a navigation bar and placed a banner below it but they are not 100% wide. I want both of them to wrap the 100% width.
HTML(header.php)
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/app.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="col-md-12" style="margin-bottom: 0px;">
<nav class="navbar navigation_bar navbar-default navbar-static-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" 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>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<div class="col-md-3"></div>
<div class="col-md-6">
<center>
<ul class="nav navbar-nav">
<li class="active">HOME</li>
<li>MENUITEM1</li>
<li>MENUITEM2</li>
<li>MENUITEM3</li>
<li>MENUITEM4</li>
<li>MENUITEM5</li>
<li>MENUITEM6</li>
<li>MENUITEM7</li>
</ul>
</center>
</div>
<div class="col-md-3"></div>
</div><!-- /.navbar-collapse !-->
</div><!-- /.container-fluid !-->
</nav>
</div>
Index.php
<?php include "header.php" ?>
<div class="col-md-12">
<img class="img-responsive" src="img/banner_1.png" width="100%">
</div>
Note: I may have added few additional classes but they are used to change the colors only, layout is not at all touched.
Also, i tried to add row class above col-md-12 but it result in scrolling page left to right and vice versa.
I am wondering how can i make the nav bar and banner 100% wide. After inspecting col-md-12 its width is 100% but i am not sure why it is not working.
Thanks in advance.
JSFiddle
col-md-12 has a default padding values....padding-left: 15px and padding-right: 15px.
If you want to remove these defaults for bootstrap, add an additional class to the same div with padding: 0.
Here's a JSFiddle: http://jsfiddle.net/v42e2/
as of Bootstrap 3.1 you can use the class container-fluid to have things stretch across the entire screen
<div class="container-fluid">
<div class="row">
//your code for nav here
</div>
</div>
I'm using Bootstrap 3 with a Bootswatch theme. Here is my 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>Title</title>
<!-- Bootstrap -->
<link href="//netdna.bootstrapcdn.com/bootswatch/3.1.1/flatly/bootstrap.min.css" rel="stylesheet">
<!-- 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]-->
</head>
<body>
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" data-toggle="collapse" data-target=".navbarcollapse" class="navbar-toggle">
<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="#">LicenseApp</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Dashboard</li>
<li>Nav 1</li>
<li>Nav 2</li>
</ul>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-12">
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="col-sm-2 control-label" for="">Username</label>
<div class="col-sm-10">
<input class="form-control" name="username" type="text" />
</div>
</div>
</form>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</body>
</html>
Any ideas why I'm having so many problems? Am I missing a DIV or something?
Your form is placed under your navbar because your navbar is fixed at top.
With following css rules:
.navbar-fixed-top {
top: 0;
border-width: 0 0 1px;
}
Therefore, either push your form more down or make navbar not fixed, for example remove navbar-fixed-top from this element:
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
Therefore, it displays jsfiddle example
Or as #Jamesking56 noticed, changing navbar-fixed-top to navbar-static-top works
In Bootstrap, when using a fixed navigation header, you usually put a padding-top on the body, the same height as the header.
See here: Bootstrap docs
Body padding required
The fixed navbar will overlay your other content, unless you add padding to the top of the body. Try out your own values or use our snippet below. Tip: By default, the navbar is 50px high.
body { padding-top: 70px; }
Make sure to include this after the core Bootstrap CSS.
Using the following code:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<style>
div[class^='span'] {
border: 1px solid black;
}
</style>
</head>
<body>
<div class="navbar navbar-static-top navbar-inverse">
<div class="navbar-inner">
<div class="container-fluid">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">Bootstrap Test</a>
<ul class="nav pull-right nav-collapse collapse">
<li class="active">Home</li>
<li class="divider-vertical"></li>
<li>About</li>
<li class="divider-vertical"></li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
<div class="containter-fluid">
<div class="row-fluid">
<div class="span12">
<h1>Hello, world!</h1>
</div>
</div>
<div class="row-fluid">
<div class="span2">2</div>
<div class="span10">10</div>
</div>
</div>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
I get the following:
Yet, in the example on the Bootstrap site, all of its collapsed links form a vertical list. Any ideas on what I'm doing wrong?
EDIT: Taking .pull-right out of the nav <ul> and replacing it with <div class="span8"> solved some of it. Unfortunately, it looks like my .brand element is causing some issues.
If I shrink my browser to the point where the collapsable nav button is next to my .brand, the links below don't form a list:
If I shrink the browser so the links form a list, then the button pops below the .brand:
Is there a way to keep the button on the same line as the .brand and force the links below to form a vertical list?
From the looks of your code, you are missing a very important piece of code in there.
You need to link bootstrap-responsive.css or bootstrap-responsive.min.css
Additionally, this is what your menu should look like:
<div class="navbar navbar-static-top navbar-inverse">
<div class="navbar-inner">
<div class="container-fluid">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">Bootstrap Test</a>
<div class="pull-right nav-collapse collapse">
<ul class="nav">
<li class="active">Home</li>
<li class="divider-vertical"></li>
<li>About</li>
<li class="divider-vertical"></li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</div>
You must be using inline-block or float:left.
If so then remove float and use display:block