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>
Related
I am still new to web development and use WordPress. Calculated Field Forms plugin will only allow 4 columns so I need to create a custom stylesheet for this particular form. Now I have tried starting with very simple or basic explanation of how it is supposed to work.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
</style>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="column">
Column
</div>
<div class="column">
Column
</div>
<div class="column">
Column
</div>
</div>
</div>
</body>
</html>
It is supposed to give me 1 row with 3 columns. But instead I get 1 column and 3 rows. In total I need 1 row with 7 columns representing the 7 days of the week. I keep finding stuff that will work, but nothing that helps explain why I am getting the results that I am getting. Thanks for anyone's help and patience as I am still learning HTML and CSS.
Here is an example using display flex:
.row {
display: flex;
justify-content: space-between;
}
<!DOCTYPE html>
<html lang="en">
<head>
<style>
</style>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="column">
Column
</div>
<div class="column">
Column
</div>
<div class="column">
Column
</div>
<div class="column">
Column
</div>
<div class="column">
Column
</div>
<div class="column">
Column
</div>
<div class="column">
Column
</div>
</div>
</div>
</body>
</html>
Here is an example with the classes you used being styled by bootstrap:
.row{justify-content: space-between;}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<style>
</style>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="column">
Column
</div>
<div class="column">
Column
</div>
<div class="column">
Column
</div>
<div class="column">
Column
</div>
<div class="column">
Column
</div>
<div class="column">
Column
</div>
<div class="column">
Column
</div>
</div>
</div>
</body>
</html>
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 have started to learn Bulma. I want to minimize container's (grey area in the picture) size in x-axis so I can embed elements into.Couldn't find any related content in documents. Here is my source code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" it>
<title>Title</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.css">
</head>
<body>
<section class="hero is-medium">
<div class="hero-body has-background-danger">
<nav class="navbar has-background-primary">
<div class="container has-background-grey-light is-fluid ">
</div>
</nav>
</div>
</section>
</body>
</html>
This is the sample view of this code:
You can wrap it in a column class and then adjust its size. (ex. is-half)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" it>
<title>Title</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.css">
</head>
<body>
<section class="hero is-medium">
<div class="hero-body has-background-danger">
<div class="columns is-centered">
<div class="column is-half">
<nav class="navbar has-background-primary">
<div class="container has-background-grey-light is-fluid">
</div>
</nav>
</div>
</div>
</div>
</section>
</body>
</html>
Result:
I started learning Web Designing and I have some doubt in Grid System.
Question might seem very nooby, so assume that I have no knowledge about it.
I have the following code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Grid System</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-4" style="background-color: yellow">
<h4>Grid</h4>
</div>
<div class="col-md-4" style="background-color: grey">
<h4 >System</h4>
</div>
<div class="col-md-4" style="background-color: yellow">
<h4>Practice</h4>
</div>
</div>
</div>
</body>
</html>
Suppose I wish to print "Grid" in the center of it's div. How can I do it?
Add the following to the h4: class="text-center". That should do it.
you could try
<div class="col-md-4 text-center" style="background-color: yellow">
<h4>Grid</h4>
</div>
If you want to positionate only the Grid word(the rest part of it`s div will be on left) you can simply use the center html tag:
<center><h4>Grid</h4></center>
Or if you want to move the entire content of the div to the center you can add the text-center class to div tag as it was mentioned before my answer:
<div class="col-md-4 text-center" style="background-color: yellow">
<h4>Grid</h4>
</div>
Use :
<div class="col-md-4 text-center" style="background-color: grey">
Example: jsFiddle
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!