Bootstrap Grid with HTML5 Sections and Aside - html

I am using the Bootstrap 4 grid system, and want to float an aside down the right hand side of the screen.
Currently my MAIN content is wrapped in col-xl-3, I want the ASIDE to also use col-xl-3, but I want it to run the height of the page, not just the height of the row it is in, as it is currently pushing the height of the row out...
As you can see from the image, my aside is pushing the top row higher than the bottom...
All I have done code wise is this;
section.body article, section.body aside { float: left; clear: both; }
Any help would be greatly appreciated.

I used "col-sm" but the principle is still the same. It's all about the nesting.
View in full page to see columns.
<html>
<head>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
</head>
<body>
<div class="container" role="main">
<div class="row">
<div class="col-sm-8">
<div class="row">
<div class="col-sm-4">1</div>
<div class="col-sm-4">2</div>
<div class="col-sm-4">3</div>
<div class="col-sm-4">4</div>
<div class="col-sm-4">5</div>
<div class="col-sm-4">6</div>
</div>
</div>
<div class="col-sm-4">
<div class="row">Nav</div>
<div class="row">Nav</div>
<div class="row">Nav</div>
<div class="row">Nav</div>
<div class="row">Nav</div>
</div>
</div>
</div>
</body>
</html>

Related

Space left in bootstrap

The HTML of the website
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row" >
<div class="col-md-3"><div class="float-left" style="background-color:grey;">
<h2 style="background-color:yellow;">Notifications</h2>
<div>You have a new follow </div>
<div>Your previous request was approved</div>
<div></div>
</div>
</div>
<div class="col-md-9">Hiiiii</div>
</div>
</div>
<script src="jquery.slim.min.js"></script>
<script src="popper.min.js"></script>
<script src="bootstrap.min.js"></script>
</body>
</html>
The output leaves a space as such on the left:
I have tried to replace the padding and tried various float options, but none of them seem to work. Any solutions?
You are using .container class, this is to create a centered container.
If you don't want this use .container-fluid class as detailed in the documentation:
Use .container-fluid for a full width container, spanning the entire width of the viewport.
If you don't want to use a container, then don't use a container at all.
.navbar-pink {
background-color: pink
}
.title-yellow {
background-color: yellow
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<header class="navbar navbar-expand navbar-pink">
<h1> NAVBAR </h1>
</header>
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<h2 class="title-yellow">Notifications</h2>
<div>You have a new follow </div>
<div>Your previous request was approved</div>
</div>
<div class="col-md-9">Hiiiii</div>
</div>
</div>
If i got correctly, you are trying to remove spacing from this portion
see the arrow in the image
If this is the case, you can simply use bootstrap's css class "container-fluid" instead of "container".
The "container" class leaves paddings/spaces to left and right whereas,
the "container-fluid" class utilizes full width of the screen.
Here is the full code--
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<div class="float-left" style="background-color:grey;">
<h2 style="background-color:yellow;">Notifications</h2>
<div>You have a new follow </div>
<div>Your previous request was approved</div>
<div></div>
</div>
</div>
<div class="col-md-9">Hiiiii</div>
</div>
</div>
<script src="jquery.slim.min.js"></script>
<script src="popper.min.js"></script>
<script src="bootstrap.min.js"></script>
</body>
</html>
Please note, i have used bootstrap cdn.

MDC: How to center a cell?

It is written in document that "The grid is by default center aligned.".
However, the following code does not center the cell:
<html>
<head>
<link href="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.css" rel="stylesheet">
<script src="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<div class="mdc-layout-grid">
<div class="mdc-layout-grid__inner">
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-4">
<div class="mdc-card my-card">
<div class="my-card__media mdc-card__media mdc-card__media--16-9" style="background-image: url('image.png');">
</div>
</div>
</div>
</div>
</div>
</body>
</html>
The grid is by default center aligned
Yes, it is. The grid itself is centered (the red border), check below example. I think it is what a grid suppose to be. It define tiles and let you put component on it, so it is called grid.
<html>
<head>
<link href="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.css" rel="stylesheet">
<script src="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<div class="mdc-layout-grid" style="width: 512px; border:2px solid red;">
<div class="mdc-layout-grid__inner">
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-8">
<div class="mdc-card my-card">
<div class="my-card__media mdc-card__media mdc-card__media--16-9" style="background-color: green">
</div>
</div>
</div>
</div>
</div>
</body>
</html>
If you really want a cell center aligned inside a grid layout, let the cell span across all columns.
We are not sure what is going to be put on the grid, or how you want to organize the content, otherwise we may suggest other component that might fit your needs.

Bootstrap layout for multiple divs with offset

I want to create a html page with first row which has a sidebar menu and div for showing the KPI metrics. I would like to make this KPI metrics div fixed.
Below this KPI metrics is a div for tables. Now when the user scrolls through the table the KPI metrics div should always be fixed. I would also like to know how to align the KPI metrics div and the table div aligned on the right side. I have figured that I could add position : fixed for the KPI div. But not sure how to align the table div on the right side.
<!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.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="container-fluid">
<p>KPI DIV TO BE FIXED</p>
<div class="row row-no-gutters">
<div class="col-sm-4" style="background-color:lavender;">SIDEBAR</div>
<div class="col-sm-8" style="background-color:lavenderblush;">KPI DIV</div>
</div>
<br>
<p>TABLE DIV BELOW KPI DIV</p>
<div class="row">
<div class=" offset-md-4 col-md-8" style="background-color:lavenderblush;">TABLE DIV</div>
</div>
</div>
</body>
</html>
Here's a start for you:
https://codepen.io/panchroma/pen/zXBVRp
I'm not clear where you need to go from here though. Let me know if you need more help.
The HTML is very close to what you posted, my only changes are on lines 21 and 23 where I modified the classes.
<div class="row row-no-gutters">
<div class=" col-md-offset-4 col-md-8" style="background-color:lavenderblush;">TABLE DIV</div>
Good luck!

Two divs to be placed in a single bootstrap row

I have the following html code, I am not able to place the divs in a single row. Not sure what I am doing wrong here.
<!DOCTYPE html>
<html>
<head>
<title>Hey there!</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class=".col-md-4">Hello</div>
<div class=".col-md-8"><h1>How are you?</h1></div>
</div>
</div>
</body>
</html>
Try
<div class="row">
<div class="col-md-4">Hello</div>
<div class="col-md-8"><h1>How are you?</h1>
</div>
The "." is used for a selector, not when writing the class name

Zurb Foundation columns getting stacked

I have two columns in a row. But the two columns are being stacked vertically.
Here's my code:
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Foundation | Welcome</title>
<link rel="stylesheet" href="css/foundation.css" />
<script src="js/vendor/modernizr.js"></script>
</head>
<body>
<div class="row">
<div class="small-2 columns"><p>2 columns</p>
</div>
<div class="small-4 columns"><p>10 columns</p>
</div>
</div>
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
The 2 column div and the 4 column div should appear side by side but are instead stacked on below the other.
What your telling your code is to set a column of 2 (blocks) width and then 4 (blocks) width, which adds up to 6.
Whereas you need to have the whole row (its parts thereof) add up to 12. There are various number combinations you could use to get to 12, but for simplicity we'll use your commented values.
<div class="row">
<div class="small-2 columns"><p>2 columns</p> </div>
<div class="small-10 columns"><p>10 columns</p> </div>
</div>
Or we can use your ratio sizes to give the look of what I think you were trying to achieve.
<div class="row">
<div class="small-4 columns"><p>1/3 width in columns</p> </div>
<div class="small-8 columns"><p>2/3 with columns</p> </div>
</div>
I hope this helps you with your question.