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?
Related
This is basic html with bootstrap flexbox. The second div may contain it's nested div upto 8. And the result should be like attached screenshots.
Can it be done with given structure. Am attaching most of the scenario's along with this.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Chat 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/4.4.1/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<style>
.chat{
}
.chat .chat-part{
height: 100px;
}
</style>
</head>
<body>
<div class="container-fluid">
<h1>Grid Structure</h1>
<p>Condition is one div always one or more than div inside it.</p>
<div class="container-fluid">
<!-- Control the column width, and how they should appear on different devices -->
<div class="row chat">
<!-- This is first div -->
<div class="col" style="background-color:yellow;">owner</div>
<!-- This is second div -->
<div class="col d-flex px-0 chat-part">
<!-- This div may have upto 8 nested div's -->
<div class="col" style="background-color:orange;">chat1</div>
<div class="col" style="background-color:yellow;">chat2</div>
<div class="col" style="background-color:orange;">chat3</div>
<div class="col" style="background-color:yellow;">chat4</div>
</div>
</div>
</div>
</div>
</body>
</html>
In your case, You can achieve this by using flexbox.
Use .flex-column to set a vertical direction
<!DOCTYPE html>
<html lang="en">
<head>
<title>Chat 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/4.4.1/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<style>
.chat{
}
.chat .chat-part{
min-height: 100px;
}
</style>
</head>
<body>
<div class="container-fluid">
<h1>Grid Structure</h1>
<p>Condition is one div always one or more than div inside it.</p>
<div class="container-fluid">
<!-- Control the column width, and how they should appear on different devices -->
<div class="row chat flex-column">
<!-- This is first div -->
<div class="col chat-part" style="background-color:red;">Owner</div>
<!-- This is second div -->
<div class="col d-flex px-0 chat-part">
<!-- This div may have upto 8 nested div's -->
<div class="col" style="background-color:orange;">chat1</div>
<div class="col" style="background-color:yellow;">chat2</div>
<div class="col" style="background-color:orange;">chat3</div>
<div class="col" style="background-color:yellow;">chat4</div>
</div>
</div>
</div>
</div>
</body>
</html>
I'm trying to change the width of the div elements during responsiveness.
so when I reduce the screen width to around 600px the div elements should increase their width to 50%.
Now I noticed no breakpoint for w-* class, and was wondering is there any way to do it??
also I'm allowed to only use bootstrap and avoid as much as possible to add my own CSS.
can any one help??
here is the code snippet
<!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/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<style>
.d-flex>div
{
height:200px;
background-color:black;
margin-left:10px;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="card bg-light">
<div class="card-body d-flex align-items-center flex-wrap">
<div class="flex-grow-1">
</div>
<div class="flex-grow-1 ">
</div>
<div class="flex-grow-1 ">
</div>
<div class="flex-grow-1 ">
</div>
<div class="flex-grow-1 ">
</div>
</div>
</div>
</div>
</body>
</html>
you can do it with pinch of jquery code like below,
if(jQuery(window).width() < 601px){
jQuery('.your-div-class').addClass('w-50');
}
else {
jQuery('.your-div-class').removeClass('w-50');
}
Please make sure you have included jquery in your page as well.
Bootstrap's break points are Small 540px and Medium 720px. So you could try the following. This example defaults to 5 blocks per row, and then 2 blocks per row on a small break point.:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!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/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<style>
.d-flex {
height: 200px;
background-color: black;
border: 1px solid yellow;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="card bg-light">
<div class="card-body row">
<div class="d-flex col-6 col-sm-2">
</div>
<div class="d-flex col-6 col-sm-2">
</div>
<div class="d-flex col-6 col-sm-2">
</div>
<div class="d-flex col-6 col-sm-2">
</div>
<div class="d-flex col-6 col-sm-2">
</div>
</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>
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!