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>
Related
I am using the container-lg class of Bootstrap, and I am experiencing the current situation:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
</head>
<body>
<header>
<div class="container-lg">
<h1>Brand</h1>
</div>
</header>
<main>
<div class="row py-5" style="height: 400px;">
<div class="col-md-6">
<h2>Left</h2>
</div>
<div class="col-md-6" style="background-color: red;"></div>
</div>
</main>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
</body>
</html>
I am trying to horizontally align the text of the left div with the header's one, without affecting to the right container, which must have a width of 100% without paddings or margins.
This is what I have tried:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
</head>
<body>
<header>
<div class="container-lg">
<h1>Brand</h1>
</div>
</header>
<main>
<div class="container-lg py-5">
<div class="row" style="height: 400px;">
<div class="col-md-6">
<h2>Left</h2>
</div>
<div class="col-md-6" style="background-color: red;"></div>
</div>
</div>
</main>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
</body>
</html>
But, as you can notice, this is not my expected behavior, because it affects to the right container.
Any ideas?
Yes, enjoy both of the worlds by using absolute positioning. It's not that awful.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
</head>
<body>
<header>
<div class="container-lg">
<h1>Brand</h1>
</div>
</header>
<main>
<div class="containers-container position-relative">
<div class="container-fluid-lg">
<div class="row py-5" style="height: 400px;">
<div class="col-md-6">
</div>
<div class="col-md-6" style="background-color: red;">
</div>
</div>
</div>
<div class="container-lg position-absolute" style="left:0; right:0; top:0;">
<div class="row py-5" style="height: 400px;">
<div class="col-md-6">
<h2>Left</h2>
</div>
<div class="col-md-6">
<h2>Right</h2>
</div>
</div>
</div>
</div>
</main>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
</body>
</html>
I need to make a full-page sized div background.
So I'm having these two columns: col-9 sized div in gray and col-3 div in blue color. Here's the code of the two cols:
#media print {
#page {
size: auto;
margin: 0;
}
}
<html>
<head>
<title>Test Full Page</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">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src='https://kit.fontawesome.com/a076d05399.js'></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-9 h-100" style="background-color:#F8F8FF;">
<div style="margin-top: 20px;">
<div class="row">
<div class="col-11">
<br />
<h4>Title</h4>
<hr>
</div>
</div>
<div class="row" style="padding-left: 1.5rem;">
<div class="col-6">
<strong>Title</strong>
<p align="justify">
<span>Date</span>
</p>
<p align="justify">
Blablabla
</p>
</div>
</div>
</div>
</div>
<div class="col-3 h-100" style="background-color:#0BA9FE;">
</div>
</div>
</div>
</body>
</html>
How do I make both div cols full-sized height on every page? like the first page, second and third page. These two divs won't fill the entire page even when I added the h-100 class.
Any help will be much appreciated.
Thank you
Remove h-100 from the class in div.
Refer working code https://jsfiddle.net/pallaviyadav/n3Lus0v7/8/
<html>
<head>
<title>Test Full Page</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">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src='https://kit.fontawesome.com/a076d05399.js'></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-9" style="background-color:#F8F8FF;">
<div style="margin-top: 20px;">
<div class="row">
<div class="col-11">
<br />
<h4>Title</h4>
<hr>
</div>
</div>
<div class="row" style="padding-left: 1.5rem;">
<div class="col-6">
<strong>Title</strong>
<p align="justify">
<span>Date</span>
</p>
<p align="justify">
Blablabla
</p>
</div>
</div>
</div>
</div>
<div class="col-3" style="background-color:red;">
</div>
</div>
</div>
</body>
</html>
I want to create a layout responsive like the pic down, with bootstrap 4 or other support. (full screen)
This is my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
<link href="~/Content/StyleSheet1.css" rel="stylesheet" />
</head>
<body>
<div class="container">
<div class="flex-row">
<div class="col" style="background-color: blue;">Header</div>
</div>
<div class="flex-row">
<div class="col-md-4" style="background-color: orange;">Left Nav</div>
<div class="col" style="background-color: gray;">Content</div>
</div>
<div class="flex-row" style="background-color: green;">
Footer
</div>
</div>
#RenderBody()
</body>
</html>
.container
{ height: 100%;
width: 100%; }
Any idea for this ?
p.s. I work with VS2019
I created your design using bootstrap col.You can modify the height as you wish but you can use this layout for your blueprint.For more info you can check : https://www.w3schools.com/bootstrap4/bootstrap_grid_system.asp
<!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.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<!-- Control the column width, and how they should appear on different devices -->
<div class="row">
<div class="col-sm-12" style="background-color:yellow;height:200px">Header</div>
</div>
<br>
<div class="row" style="height:450px">
<div class="col-sm-4" style="background-color:yellow;">Left Navigation</div>
<div class="col-sm-8" style="background-color:orange;">Content</div>
</div>
<br>
<!-- Or let Bootstrap automatically handle the layout -->
<div class="row">
<div class="col-sm-12" style="background-color:yellow;height:225px">Footer</div>
</div>
<br>
</div>
</body>
</html>
Try following,
<div class="container-fluid">
<div class="flex-row">
<div class="col" style="background-color: #5B9BD5;">Header</div>
</div>
<div class="flex-row">
<div class="col-md-4" style="background-color: #ED7D31;">Left Nav</div>
<div class="col" style="background-color: #A5A5A5;">Content</div>
</div>
<div class="flex-row" style="background-color: #70AD47;">
Footer
</div>
</div>
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'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>