I try to use bootsrap but it doesn't affect my layout. I want the layout to be like this (the colors and boxes helps to give you an idea of where on the screen the text should be):
Instead it look like this:
Here is my code:
<%# page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="../css/top.css">
<link
href='http://fonts.googleapis.com/css?family=Shadows+Into+Light|Gloria+Hallelujah|Architects+Daughter'
rel='stylesheet' type='text/css'>
<title>Top</title>
</head>
<body>
<div class="container">
<div class="row-fluid">
<div class="span12">
Fluid 12
<div class="row-fluid">
<div class="span6">
Fluid 6
<div class="row-fluid">
<div class="span6">Fluid 6</div>
<div class="span6">Fluid 6</div>
</div>
</div>
<div class="span6">Fluid 6</div>
</div>
</div>
</div>
</div>
</body>
</html>
span and row-fluid are deprecated in bootstrap 3 onwards.
Just use container-fluid and keep a row div instead of row-fluid and use col-xs instead of span like this:
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">....</div>
<div class="col-xs-6">....</div>
</div>
</div>
I would suggest taking a look at the documentation here: http://getbootstrap.com/css/#grid
As mentioned below, the version has changed but for a layout that you are looking for I would use something like this (click full page when you run the snippet):
.container {
text-align: center;
}
.col-md-6, .col-md-12, .col-md-3 {
background-color:grey;
margin:5px 0;
border-radius:3px;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<div class="container">
<div class="row">
<div class="col-md-12">
12
</div>
</div>
<div class="row">
<div class="col-md-6">
6
</div>
<div class="col-md-6">
6
</div>
</div>
<div class="row">
<div class="col-md-3">
3
</div>
<div class="col-md-3">
3
</div>
</div>
</div>
There are some very useful examples too!
Related
I want the replacement of classes col-sm-push-9 and col-sm-pull-3 of bootstrap-3 in bootstrap-4, can any one write classes in below html code in bootstrap 4?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width">
<title>Bootstrap 4</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-3 col-sm-push-9" style="border: 1px solid #ccc">
Div 1
</div>
<div class="col-sm-9 col-sm-pull-3" style="border: 1px solid #ccc">
Div 2
</div>
</div>
</div>
</body>
</html>
Basically this has been asked before. If you read the Bootstrap 4 docs you'll see that push pull are no longer used for column ordering. Instead use the column ordering classes.
<div class="container">
<div class="row">
<div class="col-sm-3 order-sm-last" style="border: 1px solid #ccc">
Div 1
</div>
<div class="col-sm-9 order-sm-first" style="border: 1px solid #ccc">
Div 2
</div>
</div>
</div>
https://www.codeply.com/go/6wcDwJR2Ex
In Bootstrap 4 you cans use class="order-md-**" for ordering your columns in a row.Please check the below snippet
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-6 order-md-12 border">column 1</div>
<div class="col-md-6 order-md-1 border">column 2</div>
</div>
</div>
</body>
</html>
I'm probably doing something really stupid but can't figure out what. I want something extremely simple. Divide page in two identical parts.
Code looks like this:
<body>
<div class="row">
<div class="col-lg-6">
LEFT ONE
</div>
<div class="col-lg-6">
RIGHT ONE
</div>
</div>
</body>
Problem:
Despite the fact it divides the page in two parts, it also makes some overflow on X line. I tried to find the reason and noticed that if I count both that <div class="col-lg-6"> it has a slightly bigger width than parent <div class="row">.
Snippet:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
</head>
<body>
<div class="row">
<div class="col-lg-6">
LEFT ONE
</div>
<div class="col-lg-6">
RIGHT ONE
</div>
</div>
</body>
</html>
Do you have any idea what I'm doing wrong?
Thanks.
You forget to put containeror container-fluid class.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-lg-6">
LEFT ONE
</div>
<div class="col-lg-6">
RIGHT ONE
</div>
</div>
</div>
</body>
</html>
Try this
<div class="row">
<div class="col">
LEFT ONE
</div>
<div class="col">
RIGHT ONE
</div>
</div>
I can't figure out what is the problem with my code. I'm very new in bootstrap my problem is kinda trivial. One of my field is out of position. I have tried a different route by making only one row and instead of increasing the div sizes I reduced them, but it had the exact same problem. (Run the code in full screen mode).
Please if you can help me out!
.row {
background-color: yellow;
}
.col-sm-3, .col-sm-6 {
border:solid 2px black;
}
div {
height:200px;
}
.two-div {
height:400px;
}
.three-div {
height:600px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</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.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-3 three-div pull-left">Works</div>
<div class="col-sm-6">Works</div>
<div class="col-sm-3 two-div pull-right">Works</div>
</div>
<div class="row">
<div class="col-sm-3 two-div">Works</div>
<div class="col-sm-3 three-div">Works</div>
</div>
<div class="row">
<div class="col-sm-3 two-div pull-right">Works</div>
</div>
<div class="row">
<div class="col-sm-6">:(</div>
</div>
</div>
</body>
</html>
With some nesting and pull-right on the appropriate columns you can reverse the float:left and make it work (albeit a hack!)...
http://www.codeply.com/go/rgHEL6DW12
<div class="container">
<div class="row">
<div class="col-sm-9">
<div class="row">
<div class="col-sm-4 three-div">works</div>
<div class="col-sm-8">works</div>
<div class="col-sm-4 three-div pull-right">works</div>
<div class="col-sm-4 two-div pull-right">works</div>
<div class="col-sm-8 pull-right">
;-)
</div>
</div>
</div>
<div class="col-sm-3">
<div class="row">
<div class="col-sm-12 two-div">works</div>
<div class="col-sm-12 two-div">works</div>
</div>
</div>
</div>
</div>
Think about it like this...
http://www.codeply.com/go/rgHEL6DW12
Your unhappy smiley box is off because your setting different heights for the containers. I altered your code to explain how you work with BS grid system. See comments.
.row {
background-color: yellow;
}
.col-sm-3,.col-sm-6 {
border:solid 2px black;
}
div { height:200px; }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</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.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-3 three-div">Works</div> <!-- no need for pulling left. BS does that already -->
<div class="col-sm-6">Works</div>
<div class="col-sm-3 two-div">Works</div> <!-- no need for pulling right -->
</div>
<div class="row">
<div class="col-sm-3 two-div">Works</div>
<div class="col-sm-3 three-div">Works</div>
</div>
<div class="row">
<div class="col-sm-3 col-sm-offset-9">Works</div> <!-- use -offset-X to move your divs horizontally along the grid -->
</div>
<div class="row">
<div class="col-sm-6">:(</div>
</div>
</div>
</body>
</html>
Here is my code...
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Brandi</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" media="all" />
<link rel="stylesheet" type="text/css" href="style.css" media="all" />
</head>
<body>
<div class="col-md-3 well">Column 3</div>
<div class="col-md-3 well">Column 3</div>
<div class="col-md-3 well">Column 3</div>
<div class="col-md-3 well">Column 3</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</body>
</html>
All links are working fine.But columns are not working.
Output:
First, you need to have container, which will determine the sizes of the container depending on your screen size and preferably row which will determine the horizontal section in your container.
Here is a snippet from the bootstrap source code. It sets different sizes depending on the viewport/screen sizes
#media (min-width: 768px) {
.container {
width: 750px;
}
}
#media (min-width: 992px) {
.container {
width: 970px;
}
}
#media (min-width: 1200px) {
.container {
width: 1170px;
}
}
Second, you also need a meta tag to let the bootstrap know the screen sizes.
<meta name="viewport" content="width=device-width, initial-scale=1">
Here is the snippet. Try to see the result in the big and small screens.
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<title>Brandi</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-3 col-lg-3 well">Column 3</div>
<div class="col-xs-3 col-lg-3 well">Column 3</div>
<div class="col-xs-3 col-lg-3 well">Column 3</div>
<div class="col-xs-3 col-lg-3 well">Column 3</div>
</div>
</div>
</body>
</html>
The way grid works is, by dividing the grid number by 12. So when you have col-md-3 for example, the size of the div will be:
3/12 * (container-size)
Note that, the md is just determining on which screen it should apply. So, the choices are, xs, sm, md, lg
it works perfectly for me when wrapping them inside an container class.
<div class="container">
<div class="col-md-3 well">Column 3</div>
<div class="col-md-3 well">Column 3</div>
<div class="col-md-3 well">Column 3</div>
<div class="col-md-3 well">Column 3</div>
</div>
Maybe your screen is to small for the md, try with xs, just to make sure its not because of screen size. (Sorry cant do comments yet)
<div class="container">
<div class="col-xs-3 well">Column 3</div>
<div class="col-xs-3 well">Column 3</div>
<div class="col-xs-3 well">Column 3</div>
<div class="col-xs-3 well">Column 3</div>
</div>
You should load the bootstrap.min.js before anything else. (Except for jQuery of course, always load it first, but you get the point I am sure)
This also avoids any future problems which you are likely to encounter because you're loading your JavaScript on the bottom of your page. Move it to the header and before your CSS is being loaded.
It is also recommended to wrap your columns inside a .row, though it is not necessary. Otherwise your code seems to be all right!
Your code works fine as it it is,May be It seems the path of 'js' and 'css' are wrong.
Try using
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Brandi</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" media="all" />
<link rel="stylesheet" type="text/css" href="style.css" media="all" />
</head>
<body>
<div class="col-md-3 well">Column 3</div>
<div class="col-md-3 well">Column 3</div>
<div class="col-md-3 well">Column 3</div>
<div class="col-md-3 well">Column 3</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>
The problem was with my bootstrap.min.css file. It was not working properly though it was loading properly. When I changed the code and linked with a CDN then it worked. My code was
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
It was the main problem. Then I changed with...
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
Now its OK. But I have a curiosity about this strange behavior of bootstrap.min.css file. Does it acts like this with other? If it does then what is the reason?
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>