I'm completely new to learn bootstrap grid and my guide has mainly been using website guides and tailoring them to this example.
The expected output is supposed to look like this when fullscreen:
Expected-FullSize
and like this when collapsed to a smaller size:
Expected-Collapse
My main problem is trying to get the "Aside" and "Section" parts to stack on top of each other inside the "Article" part. I can't even get it to line up in a row with the "article" part anymore. The other details I'll work out on my own, but this part I've been struggling with for awhile.
CSS:
body {
background-color: black;
font-size: 2em;
text-align: center;
}
.header {
background-color: cornflowerblue;
height: 60px;
text-align: center;
}
.nav {
background-color: khaki;
height: 50px;
text-align: center;
}
.article {
background-color: darkseagreen;
height: 180px;
text-align: center;
}
.aside {
background-color: goldenrod;
height: 90px;
text-align: center;
}
.section {
background-color: lightsteelblue;
height: 90px;
text-align: center;
}
.footer {
background-color: lemonchiffon;
height: 40px;
text-align: center;
}
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="mystyle-Test2.css"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/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-12 col-sm-12">
<div class="header">Header</div>
</div>
<div class="col-md-12 col-sm-12">
<div class="nav">Nav</div>
</div>
<div class="col-md-8 col-sm-12">
<div class="article">Article</div>
<div class="col-md-2 col-sm-12">
<div class="aside">Aside</div>
<div class="col-md-2 col-sm-12">
<div class="section">Section</div>
</div>
<div class="col-md-12 col-sm-12">
<div class="footer">Footer</div>
</div>
</div>
</div>
So, I did quite a bit with your code and I'll just post it back to you and I'll try to explain as many changes as I can remember :)
I wouldn't call myself an expert with bootstrap either. So these are fun to do.
First, I noticed that <link href= wasn't working in the head.
So, I changed that to bootstrap CDN and the latest version
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
Be sure to match the Javascript from the same source if you want to use collapsable navigation or carousels or something like that later on...
Next, I changed the grid to look more like this:
<div class="container-fluid">
<div class="row">
<div class="header">Header</div>
</div>
<div class="row">
<div class="navigation-bar">Nav</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-sm mbody">
<div class="article">Article</div>
</div>
<div class="col-sm mbody">
<div class="row">
<div class="aside">Aside</div>
</div>
<div class="row">
<div class="section">Section</div>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="footer">Footer</div>
</div>
</div>
Really, what we're wanting is two rows inside of a single column
These changes got us close to what we want.
The next thing was to give all of your inner div's 100% width
body {
background-color: black;
font-size: 2em;
text-align: center;
}
.mbody {
margin: 0;
padding: 0;
}
.header {
background-color: cornflowerblue;
height: 60px;
text-align: center;
width: 100%;
}
.navigation-bar {
background-color: khaki;
height: 50px;
text-align: center;
width: 100%;
}
.article {
background-color: darkseagreen;
height: 180px;
text-align: center;
width: 100%;
}
.aside {
background-color: goldenrod;
height: 90px;
text-align: center;
width: 100%;
}
.section {
background-color: lightsteelblue;
height: 90px;
text-align: center;
width: 100%;
}
.footer {
background-color: lemonchiffon;
height: 40px;
text-align: center;
width: 100%;
}
Notice that finally, I changed the "nav" class to "navigation-bar" so your styling will apply, since "nav" is a predefined class in bootstrap already and overrides your styling.
Then I added the "mbody" class to the two columns and set the margins and padding to 0 to make everything fit together with no space on the left or right.
My result is looking like what you posted in the two pictures above. Hope this is helpful. :)
Bootstrap's grid works in such a way that if you don't need it to change when resizing your browser, you can set just one size and will take care of the rest. col-md-12 should work just fine for you all the way down.
To solve your primary question, check out nested items: https://getbootstrap.com/docs/4.0/layout/grid/#nesting
Related
My h1 tag shifts the entire div down when I have 2 or more divs next to each other enclosed in another div.
How do I make it so that I can add my text without the divs shifting.
I tried to add text onto a single div enclosed by another div and it only seems to be wrong when there are 2 or more divs next to each other inside a div. Any help is appreciated. This is how it looks like right now but
This is how I want it to look but with the text
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link href="positioningTrial.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div id="seperate">
<div class="inside">
<h1>hello</h1>
</div>
<div class="inside">
</div>
</div>
<!-- ------------------------------------------------------------------------------------------- -->
<div id="main-cont">
<div class="row">
<div class="left">
<h1>hello</h1>
</div>
<div class="middle"></div>
<div class="right"></div>
</div>
<div class="row">
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
</div>
<div class="row">
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
</div>
<div class="row">
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
</div>
</div>
</body>
</html>
h1,
p {
padding: 0;
margin: 0;
}
#seperate {
border: 1px solid red;
height: 10vw;
width: 400px;
text-align: center;
margin-bottom: 5px;
}
.inside {
display: inline-block;
border: 1px solid red;
height: 100%;
width: 40%;
}
/* ---------------------------------------------- */
#main-cont {
width: 100vw;
height: 100vh;
border: 3px solid blue;
text-align: center;
}
.row {
width: 100%;
height: 20%;
border: 3px solid #ff0000;
}
.left,
.middle,
.right {
display: inline-block;
width: 20%;
height: 100%;
border: 2px solid black;
}
.left {
}
.middle {
width: 40%;
}
.right {
}
/* --------------------------------------------- */
[1]: https://i.stack.imgur.com/nGHtm.jpg
I think there might be some crossed wires with how the page layout works.
Can you make a simplified version in jsFiddle like this: https://jsfiddle.net/sheriffderek/hupdmg3q/ or something?
It's hard to tell what you want to happen from the image you provide.
How do I make it so that I can add my text without the divs shifting
All of the block-level elements are just full-width boxes:
<header>
<h1>Heading example</h1>
<div>Example div</div>
</header>
So, their existence takes up space - and pushes each other down the page.
Your CSS looks like you are kinda fighting the nature of how the pages work.
Here's some other things to think about: https://jsfiddle.net/sheriffderek/7j3f2chw/
I have some simple HTML and CSS written. I'd like to get a list of buttons to the right side of an image.
I've tried using float and display: inline
<html>
<head>
<title>title</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<section class="main">
<div class="container">
<div id="image">
<img src="img/placeholder.png" />
</div>
<div id="controls-container">
<div class="controls">Start</div>
<div class="controls">Right</div>
<div class="controls">Back</div>
<div class="controls">Down</div>
</div>
</div>
</section>
<div class="footer-container">
<footer>
<h5>footer</h5>
</footer>
</div>
</body>
</html>
.main{
background: yellow;
}
#image img {
width: 1000px;
height: 600px;
}
#controls-container{
background: pink;
}
.footer-container {
clear: both;
text-align: center;
margin-top: 5em;
margin-bottom: 2em;
}
I've highlighted the container for everything but the footer as yellow. The container holding the buttons are pink. I've done this to help me understand what's happening to the containers as I test things out.
For float, I've tried floating the buttons-container to the right. This results in the buttons going to the right of the page, and it seems to somehow disassociate itself from the main container as it is no longer highlighted in yellow.
I've also tried floating the img to the left. This seems to be the best help so far, except that the yellow background has disappeared. What happened to the rest of my container? I've tried using margin-top to move the buttons down towards the middle of the image but both the image and the button's margins seem to be altered.
Is there a better way to do this? Thank you.
I suggest you use display: flex; to do this. It's much easier to get alignment done with flex This is a sample code.
I have added align-items: flex-start to your controls-container so that it will only take up the space from the top. If you want the container to take the full height along with your image-container feel free to remove that code. Also I have removed your ids and used classes to reference the styles and I would advise you to do the same. Hope it helps you.
HTML
<div class="d-flex flex-column">
<div class="container main">
<div class="image-container">
<img src="img/placeholder.png" />
</div>
<div class="controls-container">
<div class="controls">Start</div>
<div class="controls">Right</div>
<div class="controls">Back</div>
<div class="controls">Down</div>
</div>
</div>
<div class="footer">
<h5>
Footer
</h5>
</div>
</div>
CSS
.d-flex {
display: flex;
}
.flex-column {
flex-direction: column;
}
.container {
display: flex;
flex-direction: row;
align-items: flex-start;
}
.main {
background: yellow;
}
.image-container {
width: 1000px;
height: 600px;
}
.controls-container {
display: flex;
flex-direction: row;
background: pink;
}
.footer {
clear: both;
text-align: center;
margin-top: 5em;
margin-bottom: 2em;
}
JS Fiddle Link: https://jsfiddle.net/SJ_KIllshot/fq8t3ndw/
The other way around is to use position.I have just tweaked your code, below is the snippet please have a look at it.
.main {
background: yellow;
position: relative
}
#image img {
width: 1000px;
height: 600px;
}
#controls-container {
background: pink;
position: absolute;
right: 0px;
top: 0px;
}
.controls {
display: inline;
}
.footer-container {
clear: both;
text-align: center;
margin-top: 5em;
margin-bottom: 2em;
}
<html>
<head>
<title>title</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<section class="main">
<div class="container">
<div id="image">
<img src="img/placeholder.png" />
</div>
<div id="controls-container">
<div class="controls">Start</div>
<div class="controls">Right</div>
<div class="controls">Back</div>
<div class="controls">Down</div>
</div>
</div>
</section>
<div class="footer-container">
<footer>
<h5>footer</h5>
</footer>
</div>
</body>
</html>
I have a a webpage that currently has a navigation bar on the top. I have been trying to create a layout underneath the navigation bar such as this:
Now left will be a "button" but really just a DIV that will be used to do something. Only one of the "Right" placeholders will actually contain text and the rest will be blank.
My issue is that I am not able to create this layout as I have in the picture. The closest I get is each "row" of left and right with now spacing between them.
Currently I have this for my code:
<!doctype html>
<html lang=''>
<head>
<meta charset='utf-8'>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Josh Schweigert - Contact</title>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="https://s3.amazonaws.com/menumaker/menumaker.min.js" type="text/javascript"></script>
<script src="script.js"></script>
<script src="contact.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="contact.css">
</head>
<body>
<div id="cssmenu">
<ul>
<li>Home
</li>
<li>Embedded Systems
</li>
<li class="active">Contact
</li>
</ul>
</div>
</body>
</html>
Note that the formatting will be screwed up as I did not include the CSS code.
I have tried making an "outter" div and inside that div have "container" div's which then hold a div for "left" and a div for "right" sort of like this:
#outter {
Position: Relative;
}
.container {
position: relative;
}
.left {
float: left;
width: 30%;
}
.right {
float: left;
width: 70%;
}
<div id="outter">
<div class="container">
<div class="left">
left
</div>
<div class="right">
right
</div>
</div>
<div class="container">
<div class="left">
left
</div>
<div class="right">
right
</div>
</div>
<div class="container">
<div class="left">
left
</div>
<div class="right">
right
</div>
</div>
</div>
But I am still not getting the result I want and I am thoroughly confused on how to achieve this layout. I appreciate any help!
I achieved this by making the following changes to your code:
Removed unnecessary position: relative; statements. They weren't doing anything in this context.
Removed floats
Changed .left and .right to display: inline-block;
Removed whitespace between divs as inline block is whitespace sensitive.
However this mightn't be the best solution because it's very unclear what your end goal is. If the idea is for the left column to be a vertical navbar then you would want that contained in its own element, and the main content in another. But again, it's not clear what the intent of the design is so I did it in as few changes as possible.
The box-sizing and other styles are just prettification so you can see that the code does lay out as specified in your image.
div {
box-sizing: border-box;
}
.left
{
width: 30%;
display: inline-block;
background-color: purple;
color: #fff;
padding: 15px;
}
.right
{
width: 70%;
display: inline-block;
background-color: red;
color: #fff;
padding: 15px;
}
<div id="outter">
<div class="container">
<div class="left">
left
</div><div class="right">
right
</div>
</div>
<div class="container">
<div class="left">
left
</div><div class="right">
right
</div>
</div>
<div class="container">
<div class="left">
left
</div><div class="right">
right
</div>
</div>
</div>
Please get your HTML structure correct to begin with. Also I made changes to your code to get the alignment you require here.
You need something like this:
.navbar {
background-color: #5983ff;
height: 35px;
width: 100%;
text-align: center;
margin-bottom: 15px;
}
.navbar-child {
width: 30%;
display: inline-block;
color: #fff;
font-size: 16px;
line-height: 35px;
}
.container {
margin-bottom: 15px;
height: 30px;
line-height: 30px;
border:2px solid #dd00ff;
}
.left {
float: left;
padding-left: 20px;
width: 15%;
color: #fff;
background-color: #dd00ff;
box-sizing: border-box;
}
.right {
float: left;
padding-left: 50px;
width: 85%;
color: #fff;
background-color: #ff0000;
box-sizing: border-box;
}
<div class="navbar">
<div class="navbar-child">
Home
</div>
<div class="navbar-child">
About
</div>
<div class="navbar-child">
Contact
</div>
</div>
<div class="body-section">
<div class="container">
<div class="left">
Left
</div>
<div class="right">
Right
</div>
</div>
<div class="container">
<div class="left">
Left
</div>
<div class="right">
Right
</div>
</div>
<div class="container">
<div class="left">
Left
</div>
<div class="right">
Right
</div>
</div>
<div class="container">
<div class="left">
Left
</div>
<div class="right">
Right
</div>
</div>
</div>
You could use flex with box-sizing: border-box:
.wrap{
display: flex;
flex-wrap: wrap;
}
nav, section, aside{
padding: 0.5rem;
}
nav{
width: 100%;
background: yellowgreen;
display:flex;
justify-content: space-around;
}
aside{
width: 30%;
background: blueviolet;
box-sizing: border-box;
}
section{
min-width: 70%;
background: pink;
box-sizing: border-box;
}
<div class="wrap">
<nav>
<div>Home</div>
<div>Forum</div>
<div>Contact</div>
</nav>
<aside>left</aside>
<section>right</section>
<aside>left</aside>
<section>right</section>
<aside>left</aside>
<section>right</section>
</div>
width: 100% gives the nav full width, flex warp let other items under it, box-sizing lets you give the exact width for left and right
You can read more on flex here.
Also a post of mine that might help you understand
Try this:
<div class="container">
<div class="left">
left
</div>
<!--Remove this space -->
<div class="right">
right
</div>
</div>
So I am using a template from DivTag Templates for Weebly. And I have gone to them for help and they said they can not help me because it is not an issue it is simply a customization. :( My client asked if the sidebar on the template can be moved from the right side to the left side. I said I believe so but will check.
The only CSS HTML I can find for the sidebar page is:
I can not find anywhere where it says that currently the sidebar is on the right.
The issue I have with weebly is they have their drag and drop areas on the pages, and I noticed that the sidebar has a separate drag and drop area.
HTML for that specific page:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=1024">
<!-- Fonts -->
<link href='http://fonts.googleapis.com/css?family=Crimson+Text:400,400italic,700,700italic' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700' rel='stylesheet' type='text/css'>
<!-- JS -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body class='no-header wsite-theme-light'>
<div class="note" style="text-align: center;"><p>This gap is here to allow you to see the text tool bar for the header bar below. When site is published, the gap will disappear</p></div>
<div id="wrapper">
<div id="bar">
<div class="frame clearfix">
<div class="bar-text"><p>{call:text}</p></div>
<div id="search-button"><i class="af-search"></i></div>
<div class="social-frame">{social}</div>
<div class="search-bar">{search}</div>
</div>
</div>
<header id="header">
<div class="navContainer clearfix">
<div class="logo med-padding">{logo}</div>
<nav><div id="navigation">{menu}</div></nav>
</div>
</header>
<div id="main" role="main">
<div class="frame">
<div class="content table">
<div class="column32 table-content large-padding">{content} </div>
<div class="column3 table-content large-padding sidebar-content">{side:content}</div>
</div>
</div>
</div>
<footer>
<div id="footer" class="large-padding clearfix">
<div class="frame">
<div class="note" style="text-align: center;"><p>Drag & drop footer content here</p></div>
<div id="footer-content" class="med-padding">{bottom:content} </div>
<div id="footer-content" class="med-padding" style="display:none;">{footer}</div>
</div>
</div>
<div id="footer-bottom" class="feature small-padding">
<div class="frame">
<div class="copyright"><p>{copyright:text}</p></div>
</div>
</div>
</footer>
</div>
<script type="text/javascript" src="/files/theme/basic-header.js"></script>
</body>
</html>
CSS:
/* --------------------------------------------------------------
LAYOUT
--------------------------------------------------------------- */
/* GENERAL */
.text-box-dark{
padding: 30px !important;
background: rgba(0,0,0,0.8) !important;
}
.text-box-light {
padding: 30px !important;
background: rgba(255,255,255,0.8) !important;
}
.xsmall-padding {
padding: 10px 0;
}
.small-padding {
padding: 20px 0;
}
.med-padding {
padding: 30px 0;
}
.large-padding {
padding: 45px 0;
}
.xlarge-padding {
padding: 65px 0;
}
.aligncenter {
text-align: center;
}
.sidebar-page div#content {
background: none;
width: 100%;
padding: 0;
}
.column2{
width: 50%;
min-width: 500px;
float: left;
}
.column3 {
width: 200px;
min-width: 200px;
min-height: 300px;
padding: 25px 20px;
background: url('sidebarbg.jpg');
border-left: 1px solid #eee;
vertical-align: top;
}
.column3 .weebly-area {
min-width: 200px;
min-height: 300px;
}
.column32 {
min-height: 300px;
min-width: 730px;
padding-right: 30px;
vertical-align: top;
}
div.sidebar-content {
min-height: 200px;
padding: 25px 45px;
}
.table{display: table;}
.table-content{display: table-cell;}
.center-content.table { height: 100%; margin: 0 auto;}
.center-content.table .table-content {vertical-align: middle;}
.overflow-hidden{overflow: hidden;}
.overflow-visible{overflow: visible;}
And when you find a solution. Can you explain to me why it needs to be a the way you are saying. I am trying to learn and the more knowledge I can soak up the better.
Thanks so much.
Yay got some good advice and figured I would share it with others
Move Column 3 above Column 32 on HTML
<div id="main" role="main">
<div class="frame">
<div class="content table">
<div class="column32 table-content large-padding">{content} </div>
<div class="column3 table-content large-padding sidebar-content">{side:content}</div>
</div>
I have a fixed header and right aside of 260px. I have three columns with height 100%.The content area to be a fluid-container that is 12 column wide.
<div class="header"></div>
<div class="secondary-aside"></div>
<div class="container">
<div class="row">
<div class="col-sm-4"></div>
<div class="col-sm-4"></div>
<div class="col-sm-4"></div>
</div>
</div>
Below is the fiddle i am working on. The width of the cols are breaking with the layout.
http://codepen.io/anon/pen/qxusJ
Not really clear what you mean by The width of the cols are breaking with the layout.
Try it this way :
html, body, .container {
height:100%;
width:100%; /*keep html and body 100% */
margin:0;
background:lightgray
}
.container {
display:table;
width:calc(100% - 260px);/*keep container 100% - 260px */
border-spacing:0.5em;
}
I don't quite understand; you want the container to be fluid, but then you have columns within it that have a fixed width?
How you could do it is:
<div class="header"></div>
<div class="container">
<div class="secondary-aside"></div>
<div class="content">
<div class="col-sm-4"></div>
<div class="col-sm-4"></div>
<div class="col-sm-4"></div>
</div>
</div>
With the following CSS:
html, body {
height: 100%;
}
.header {
height: 60px;
background: blue;
width: 100%;
}
.container {
overflow: auto;
height: 100%;
}
.secondary-aside {
width: 25%;
float: right;
background: red;
height: 100%;
}
.content {
width: 75%;
float: left;
background: #777;
overflow: auto;
height: 100%;
}
.col-sm-4 {
height: 100%;
background: yellow;
width: 33.3333%;
float: left;
}
Would that help?
I don't understand why you use so much of custom styles in BS.
Check the responsiveness of the page in http://www.responsinator.com/
Check this out.
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<style>
.secondary-aside {
width: 25%;
float: right;
background: #000000;
height: 100%;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="header">i am the header</div>
<div class="secondary-aside col-sm-4">ff</div>
<div class="col-sm-8">
<div class="col-sm-4" style="background-color: red">r</div>
<div class="col-sm-4"style="background-color: green">g</div>
<div class="col-sm-4"style="background-color: blue">b</div>
</div>
</div>
</body>
</html>