I have some code for a project I'm making and I'm having trouble on the bootstrap layout. I want to make these columns add up to be the full screen height. Here is a jsfiddle of what I have now. I have all the rows nested in the columns set to
height:100%
because this was the closest I could get to what I want. I want to make something that looks like this (excuse my poor MS paint drawing skills):
Here is my code in case the link doesn't work:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Link to css file -->
<link rel="stylesheet" type="text/css" href="/static/main.css" mesdia="screen"/>
<!-- Bootstrap CDN-->
<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>
<meta charset="UTF-8">
<title>Layout</title>
<!--<h1>Welcome to the layout</h1>
<p>Where would you like to navigate to?</p>-->
</head>
<body>
<div class="container-fluid">
<div class="row" id="navcols">
<div class="col layoutcol">
<div class="row layoutrow" id="LeftCol1">Row</div>
<div class="row layoutrow" id="LeftCol2">Row</div>
</div>
<div class="col-sm-6 layoutcol">
<div class="row MidCol layoutrow">Row</div>
<div class="row MidCol layoutrow">Row</div>
<div class="row MidCol layoutrow">Row</div>
<div class="row MidCol layoutrow">Row</div>
<div class="row MidCol layoutrow">Row</div>
</div>
<div class="col layoutcol">
<div class="row layoutrow" id="RightCol">Row</div>
</div>
</div>
</div>
<!--
<div class="container-fluid">
<h1 id="test">Welcome to my page! Where do you want to navigate to?</h1>
</div>-->
And here is the CSS
html,body {
height: 100%;
width: 100%;
}
.col {
background-color:lime;
}
#LeftCol1 {
background-color:blue;
height: 100%;
}
#LeftCol2 {
background-color:red;
height: 100%
}
.layoutrow{
border:solid 1px black;
}
.MidCol{
height: 100%;
}
#RightCol {
height: 100%;
}
How can I go about making this change? Thanks!
What you are seeking can be possible with css and bootstrap combination.
Here What I have done.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Grid </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>
<style>
.first .first_row{
background-color: #ff0000;
height: 50vh;
border:2px solid black;
}
.first .second_row{
background-color: #ffff00;
height: 50vh;
border:2px solid black;
}
.second .first_row{
background-color: #cc99ff;
height: 20vh;
border:2px solid black;
}
.second .second_row{
background-color: #ff0066;
height: 20vh;
border:2px solid black;
}
.second .third_row{
background-color: #0099ff;
height: 20vh;
border:2px solid black;
}
.second .fourth_row{
background-color: #006666;
height: 20vh;
border:2px solid black;
}
.second .fifth_row{
background-color: #000099;
height: 20vh;
border:2px solid black;
}
.third .first_row{
background-color: #006600;
height: 100vh;
border:2px solid black;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-3 first">
<div class="row first_row">
</div>
<div class="row second_row">
</div>
</div>
<div class="col-md-6 second">
<div class="row first_row">
</div>
<div class="row second_row">
</div>
<div class="row third_row">
</div>
<div class="row fourth_row">
</div>
<div class="row fifth_row">
</div>
</div>
<div class="col-md-3 third">
<div class="row first_row">
</div>
</div>
</div>
</div>
</body>
</html>
I hope it will help you.
P.S. Don't mind the colors.
Try to put the inner rows inside a container like so:
<div class="col-sm-6 layoutcol">
<div class="container-fluid">
<div class="row MidCol layoutrow">Row</div>
<div class="row MidCol layoutrow">Row</div>
<div class="row MidCol layoutrow">Row</div>
<div class="row MidCol layoutrow">Row</div>
<div class="row MidCol layoutrow">Row</div>
</div>
</div>
Related
I want to make this card x-scrollable. But after three blocks, the fourth block is rendering in the new line.
I want to scroll horizontally. I tried everything from past 5 days.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="ie=edge" http-equiv="x-ua-compatible">
<title></title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="wrapper d-flex">
<div class="p-4 pt-5" id='content' style="width:100%">
<div class="container-fluid">
<div class="container-fluid">
<h2><strong>Please make this scrollable horizonally</strong></h2>
<div class="card card-section">
<div class="card-header">
Heading
</div>
<div class="card-body">
<form method="post">
<div class='container-fluid'>
<div class='row customClass'>
<div class='col-md-4'>
<div style='width:300px;background-color:green;height: 500px; margin: 10px;'></div>
</div>
<div class='col-md-4'>
<div style='width:300px;background-color:green;height: 500px; margin: 10px;'></div>
</div>
<div class='col-md-4'>
<div style='width:300px;background-color:green;height: 500px; margin: 10px;'></div>
</div>
<div class='col-md-4'>
<div style='width:300px;background-color:green;height: 500px; margin: 10px;'></div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
</script>
</body>
</html>
css:
.customClass {
overflow-x: auto;
white-space: nowrap;
}
.customClass .col-md-4 {
display: inline-block;
float: none;
}
Codepen link: https://codepen.io/maharshi9999/pen/qBddebG
just remove the row class. Use what you have just remove that class as boom done!
<div class='customClass'>
<div class='col-md-4'>
if want something different to your approach, let me know.
Good luck!
Bootstrap 4 uses flex. In case if you want override the wrapping sytle of Bootstrap row you have to use flex-wrap:nowrap; for row.
https://codepen.io/rohinikumar4073/pen/Exjjqzx
.row.customClass {
overflow-x: auto;
flex-wrap: nowrap;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="ie=edge" http-equiv="x-ua-compatible">
<title></title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="wrapper d-flex">
<div class="p-4 pt-5" id='content' style="width:100%">
<div class="container-fluid">
<div class="container-fluid">
<h2><strong>Please make this scrollable horizonally</strong></h2>
<div class="card card-section">
<div class="card-header">
Heading
</div>
<div class="card-body">
<form method="post">
<div class='container-fluid'>
<div class='row customClass'>
<div class='col-md-4'>
<div style='width:300px;background-color:green;height: 500px; margin: 10px;'></div>
</div>
<div class='col-md-4'>
<div style='width:300px;background-color:green;height: 500px; margin: 10px;'></div>
</div>
<div class='col-md-4'>
<div style='width:300px;background-color:green;height: 500px; margin: 10px;'></div>
</div>
<div class='col-md-4'>
<div style='width:300px;background-color:green;height: 500px; margin: 10px;'></div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I removed col-md-4 classes as well as set the width to customClass.
.card-body {
overflow-x: scroll;
}
.customClass {
width: 1500px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="ie=edge" http-equiv="x-ua-compatible">
<title></title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="wrapper d-flex">
<div class="p-4 pt-5" id='content' style="width:100%">
<div class="container-fluid">
<div class="container-fluid">
<h2><strong>Please make this scrollable horizonally</strong></h2>
<div class="card card-section">
<div class="card-header">
Heading
</div>
<div class="card-body">
<form method="post">
<div class='container-fluid'>
<div class='row customClass'>
<div class='col'>
<div style='background-color:green;height: 500px; margin: 10px;'></div>
</div>
<div class='col'>
<div style='background-color:green;height: 500px; margin: 10px;'></div>
</div>
<div class='col'>
<div style='background-color:green;height: 500px; margin: 10px;'></div>
</div>
<di class='col'>
<div style='background-color:green;height: 500px; margin: 10px;'></div>
</di>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<!--<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
</script>-->
</body>
</html>
I'm new on bootstrap trying to improve my skills, i just got stuck, i have 6 boxes, three left side and three right side, my question is why there is space between box number '4' and '5' when i'm on 'sm, md,lg' sizes ? how can i put box number 5 under box number 4 without blank space ? and is there away to take away those 'white space' and still make this work like this ?
<!DOCTYPE html>
<html lang="en">
<head>
<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.3.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>
<style>
.box{
width:30%;
height:250px;
border: solid black 1px;
}
.boxx{
width:100px;
height:100px;
border: solid white 1px;
}
.bo{
width:50%;
height:550px;
border: solid black 1px;
}
* {
box-sizing: border-box;
box-sizing: border-box;
-webkit-box-sizing -moz-box-sizing: border-box;
}
</style>
</head>
<body>
<body>
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div class="boxx mx-auto">
white space
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div class="box mx-auto">
2
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div class="bo mx-auto">
3
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div class="box mx-auto">
4
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div class="boxx mx-auto">
white space
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div class="box mx-auto">
5
</div>
</div>
</div>
</body>
</html>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<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.3.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>
<style>
.box{
width:30%;
height:250px;
border: solid black 1px;
}
.bo{
width:50%;
height:550px;
border: solid black 1px;
}
* {
box-sizing: border-box;
box-sizing: border-box;
-webkit-box-sizing -moz-box-sizing: border-box;
}
</style>
</head>
<body>
<div class="row">
<div class="col-md-6">
</div>
<div class="col-md-6">
<div class="box mx-auto">
2
</div>
</div>
<div class="col-md-6">
<div class="bo mx-auto">
3
</div>
</div>
<div class="col-md-6">
<div class="box mx-auto">
4
</div>
<div class="box mx-auto">
5
</div>
</div>
</div>
</body>
</html>
I'm new on bootstrap trying to improve my skills, i have made 5 boxes as you can see( two in left side and 3 right side), my questions are why box number '5' appears differently like not accordingly is not on the same line as number 2 and 4 it looks like it has margin-left... but has not, second question is when i'm using 'col-xs-12' i want those boxes to be in the middle like 'center', third question is when i change my phone to 'landscape' these boxes should be (same places) exactly like it is working now on large sizes 'col-lg-6 col-md-6 col-sm-6', fourth question is, i have one box 'white space' is it somehow possible to replace that with 'Display: none; or visibility: hidden;' and still work ?
sorry english is not my mother language.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<style>
.box{
width:100px;
height:100px;
border: solid black 1px;
}
.boxx{
width:100px;
height:100px;
border: solid white 1px;
}
* {
box-sizing: border-box;
box-sizing: border-box;
-webkit-box-sizing -moz-box-sizing: border-box;
}
</style>
</head>
<body>
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div class="boxx">
white space
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div class="box">
2
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div class="box">
3
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div class="box">
4
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div class="box">
5
</div>
</div>
</div>
</div>
</div>
</body>
</html>
There are DIV structure related issues. please check below updated code. Hope this helps
.box{
width:100px;
height:100px;
border: solid black 1px;
}
.boxx{
width:100px;
height:100px;
border: solid white 1px;
}
* {
box-sizing: border-box;
box-sizing: border-box;
-webkit-box-sizing -moz-box-sizing: border-box;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div class="boxx">
white space
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div class="box">
2
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div class="box">
3
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div class="box">
4
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div class="box">
5
</div>
</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<style>
.box{
width:100px;
height:100px;
border: solid black 1px;
margin-left: auto;
margin-right: auto;
}
.boxx{
width:100px;
height:100px;
border: solid white 1px;
margin-left: auto;
margin-right: auto;
}
* {
box-sizing: border-box;
box-sizing: border-box;
-webkit-box-sizing -moz-box-sizing: border-box;
}
</style>
</head>
<body>
<div class="row">
<div class="col-sm-6">
<div class="boxx">
white space
</div>
</div>
<div class="col-sm-6">
<div class="box">
2
</div>
</div>
<div class="col-sm-6">
<div class="box">
3
</div>
</div>
<div class="col-sm-6">
<div class="box">
4
</div>
</div>
<div class="col-sm-6 col-sm-offset-6">
<div class="box">
5
</div>
</div>
</div>
</body>
</html>
Hi, the issues you are facing are due to the div structure and improper grid layout. I have structured it properly. Let me know if this is what you require or need further changes/explanation.
I have this Bootstrap design,two rows, their columns are class="col-sm-2" and class="col-sm-10".
How can I make the rowspan like in the img below?
Please see this. I have used bootstrap-4.
/*this css is only for identifying row*/
.row > [class^="col-"] {
background-color: rgba(86, 61, 124, 0.15);
border: 1px solid rgba(86, 61, 124, 0.2);
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-2">
1 of 2
</div>
<div class="col-10">
<div class="row">
<div class="col-12">
Level 2
</div>
<div class="col-12">
Level 2
</div>
</div>
</div>
</div>
</div>
yes just easly use bootstrap classe
<!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.1/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-md-2 col-lg-2" style="background-color: red">
hello
</div>
<div class="col-md-10 col-lg-10" style="background-color: red">
<div class="row">
<div class="col-md-12" style="background-color: black">
<p>a</p>
</div>
<div class="col-md-12" style="background-color: yello">
<p>test</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I came up with something like this...
<div class="row">
<div class="col-sm-2 left"></div>
<div class="col-sm-10 col-sm-push-2">
<div class="col-sm-12 rightTop"></div>
<div class="col-sm-12 rightBottom"></div>
</div>
</div>
.row {
position: relative;
width: 500px;
margin: 15px auto;
}
.left {
position: absolute;
//left is 15px to negate .row's negative mrgins
left: 15px;
height: 100%;
padding: 0;
background-color: #ff0000;
}
.rightTop, .rightBottom {
height: 50px;
padding: 0;
}
.rightTop {
background-color: #00ff00;
}
.rightBottom {
background-color: #0000ff;
}
codepen example here.
<table width="300" border="1">
<tbody>
<tr>
<td rowspan="2">Merged</td>
<td>Table First Row</td>
</tr>
<tr>
<td>Table Second Row</td>
</tr>
</tbody>
I want to create a dashboard from scratch for learning purposes using Bootstrap 3.3.7. I have problem with the left hand menu. I want it to occupy the whole area it gets (col-lg-1 column and 100% height). My problem is that the min-height:100% with height: auto doesn't work, but min-height:xxx px works well.
I saw other posts here saying that min-height:100% should work.
What I'm doing wrong?
Here is the plunker.
<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap#3.3.7" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script data-require="bootstrap#3.3.7" data-semver="3.3.7" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<main style="margin-top: 0px; padding-top: 0px; padding-bottom: 0px;">
<div class="container-fluid padding-left-zero padding-right-zero">
<div class="container-fluid padding-left-zero padding-right-zero">
<div style="margin-bottom: -20px;">
<nav class="navbar navbar-default navbar-inverse navbar-fixed-top">
<div class=" container-fluid row">
<div class="pull-left">
<a class="navbar-brand" href="/">Dashboard</a>
</div>
<div style="height: 50px; padding: 15px;" class="pull-right">
<select>
<option value="module">value</option>
</select>
</div>
</div>
</nav>
</div>
</div>
<div class="row container-fluid padding-left-zero padding-right-zero">
<!-- code of lenfthandmenu -->
<!-- <div class="col-lg-1 pull-left navbar-inverse fill">
<div ui-view="leftHandMenu"></div>
</div>-->
<div class="col-lg-1 pull-left navbar-inverse fill2">
<div ui-view="leftHandMenu"></div>
</div>
<div class="col-lg-11 pull-right">
<div ui-view="mainContent"></div>
</div>
</div>
<div>
<div class="navbar navbar-inverse navbar-fixed-bottom">Navbar bottom</div>
</div>
</div>
</main>
</body>
</html>
Css:
/* Styles go here */
body {
padding-top: 50px;
}
.padding-left-zero {
padding-left: 0px;
}
.padding-right-zero {
padding-right: 0px;
}
li {
list-style: none;
}
.silver-text {
color: silver;
}
.min-width-100-percent {
min-width: 100%;
}
.fill {
min-height: 100%;
height: auto;
}
.fill2 {
min-height: 300px;
height: auto;
}
Apply absolute position property and height as 100% like below.
.fill2 {
position:absolute;
height: 100%;
}
DEMO