I'm trying to get three equally sized columns with same margin and background color. But I get column 1 with no margin and background color, column 2 and 3 appear no problem. I'm finding this really frustrating so any help would be greatly appreciated!
Here's my html:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
<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.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
div1 {
border: 1px solid grey;
margin-top: 100px;
margin-bottom: 50px;
margin-right: 100px;
margin-left: 50px;
background-color: lightgrey;
}
div2 {
border: 1px solid grey;
margin-top: 100px;
margin-bottom: 50px;
margin-right: 100px;
margin-left: 50px;
background-color: lightgrey;
}
div3 {
border: 1px solid grey;
margin-top: 100px;
margin-bottom: 50px;
margin-right: 100px;
margin-left: 50px;
background-color: lightgrey;
}
</style>
</head>
<body>
<div class="row">
<div1 class="col-sm-4">Column 1</div1>
<div2 class="col-sm-4">Column 2</div2>
<div3 class="col-sm-4">Column 3</div3>
</div>
</body>
</html>
Here's the similar result i'm trying to get:
Here's the wrong one what I get:
As your using bootstrap you may as well use bootstrap, plus a little bit of css to pad the inner panels (to match your desired output). The HTML is all over the place (head code and div*'s).
So here is your code.
<!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.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.panel-pad-10 {
padding: 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-4 panel-pad-10">
<div class="panel panel-default">
<div class="panel-body">Column 1</div>
</div>
</div>
<div class="col-sm-4 panel-pad-10">
<div class="panel panel-default">
<div class="panel-body">Column 2</div>
</div>
</div>
<div class="col-sm-4 panel-pad-10">
<div class="panel panel-default">
<div class="panel-body">Column 3</div>
</div>
</div>
</div>
</div>
</body>
</html>
From: http://getbootstrap.com/css/#overview-container
Bootstrap requires a containing element to wrap site contents and house our grid system. You may choose one of two containers to use in your projects. Note that, due to padding and more, neither container is nestable.
So, wrap it up in a container like this:
<div class="container">
<div class="row">
<div1 class="col-sm-4">Column 1</div1>
<div2 class="col-sm-4">Column 2</div2>
<div3 class="col-sm-4">Column 3</div3>
</div>
</div>
Or use "container-fluid" if you want full width
EDIT: As Lawrence pointed out, if you're going to use custom markup, you need to be sure that it has the display:block property set, otherwise it will not work
Just use Bootstrap. You don't want to override what Bootstrap provides.
<div class="row">
<div class="col-sm-4">
<div class="well">1
</div>
</div>
<div class="col-sm-4">
<div class="well">2
</div>
</div>
<div class="col-sm-4">
<div class="well">3
</div>
</div>
</div>
http://www.codeply.com/go/lUApj2LpiJ?q=
Have you tried Flexbox ?
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: -webkit-flex;
display: flex;
width: 400px;
min-height: 800px;
background-color: lightgrey;
}
.flex-item {
background-color: cornflowerblue;
width: 100px;
height: 400px;
margin: 10px;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">flex item 1</div>
<div class="flex-item">flex item 2</div>
<div class="flex-item">flex item 3</div>
</div>
</body>
</html>
You really shouldn't "invent" your own html tags like this. <div1> is not a valid HTML tag.
Also, since div1, div2, and div3 all are supposed to be styled the same way, you can simply create a class for them like this:
.column {
border: 1px solid grey;
margin-top: 100px;
margin-bottom: 50px;
margin-right: 100px;
margin-left: 50px;
background-color: lightgrey;
}
Then, in your html, do this (combined with LordNeo's reply):
<div class="container">
<div class="row">
<div class="col-sm-4 column">Column 1 Div</div>
<div class="col-sm-4 column">Column 2 Div</div>
<div class="col-sm-4 column">Column 3 Div</div>
</div>
</div>
Related
May be a newbie question. I am trying to create 2 rows with 3 sections each. But for some reason even when i set class="col-lg-4", the sections still take up boxes like it is class="col-lg-2"
Basically I wanted to have 6 squares inside instead of 6 rectangles
From my understanding, col-lg-4 should take 33% of the container therefore creating a row of 3
I have set it up here but it seems that it does not want to work and I do not have a clue why
.bookshelf {
background-color: #564E52;
width: 1100px;
height: 700px;
display: flex;
margin: 100px auto 100px auto;
border: 20px solid #7F5822;
}
#media (max-width: 800px){
.bookshelf{
width: 900px;
height: 500px;
}
}
#section1 {
border: 20px solid #7F5822;
}
#section2 {
border: 20px solid red;
}
#section3 {
border: 20px solid purple;
}
#section4 {
border: 20px solid green;
}
#section5 {
border: 20px solid yellow;
}
#section6 {
border: 20px solid pink;
}
<!doctype html>
<html>
<head>
<meta lang="en-US">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>penpal</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div id="main" class="container-fluid">
<div class="wrapper">
<div class="bookshelf">
<span id="section1" class="col-sm-6 col-lg-4">
</span>
<span id="section2" class="col-sm-6 col-lg-4">
</span>
<span id="section3" class="col-sm-6 col-lg-4">
</span>
<span id="section4" class="col-sm-6 col-lg-4">
</span>
<span id="section5" class="col-sm-6 col-lg-4">
</span>
<span id="section6" class="col-sm-6 col-lg-4">
</span>
</div>
</div>
</div>
</body>
</html>
Use .row class with .bookshelf
All columns should be wrapped in an element with class 'row'. Change this:
<div id="main" class="container-fluid">
<div class="wrapper">
<div class="bookshelf">
Into this:
<div id="main" class="container-fluid">
<div class="wrapper">
<div class="row bookshelf">
Basically I wanted to have 6 squares inside instead of 6 rectangles
Use aspect-ratio: 1 / 1; on your columns to make them square, like this:
<span id="section1" class="col-sm-6 col-lg-4" style="aspect-ratio: 1 / 1;">
Here is what I have
And here is what I want to accomplish
<!doctype html>
<html>
<head>
<style>
.card{
background-color: aqua;
border-radius: 10px;
width: 30%;
margin: 1% 1%;
display: inline-block;
}
</style>
</head>
<body>
<div style="height:200px;" class="card">1</div>
<div style="height:240px;" class="card">2</div>
<div style="height:200px;" class="card">3</div>
<div style="height:270px;" class="card">4</div>
<div style="height:300px;" class="card">5</div>
<div style="height:250px;" class="card">6</div>
</body>
</html>
You need to try like this-
Just use this below script -
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.2/masonry.pkgd.min.js"></script>
.card{
background-color: aqua;
border-radius: 10px;
width: 30%;
margin: 1% 1%;
display:inline-flex;
vertical-align:top;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.2/masonry.pkgd.min.js"></script>
<div class=" grid js-masonry">
<div style="height:200px;" class="card grid-item">1</div>
<div style="height:240px;" class="card grid-item">2</div>
<div style="height:200px;" class="card grid-item">3</div>
<div style="height:270px;" class="card grid-item">4</div>
<div style="height:300px;" class="card grid-item">5</div>
<div style="height:250px;" class="card grid-item">6</div>
</div>
import bootstrap and format the divs using col-md- in rows. i believe you have that css.
<!doctype html>
<html>
<head>
<style>
.card{
background-color: aqua;
border-radius: 10px;
width: 30%;
margin: 1% 1%;
display: inline-block;
}
</style>
</head>
<body>
<div class="rows">
<div class="col-md-4">
<div style="height:200px;" class="card">1</div>
<div style="height:240px;" class="card">2</div></div>
<div class="col-md-4">
<div style="height:200px;" class="card">3</div>
<div style="height:270px;" class="card">4</div></div>
<div class="col-md-4">
<div style="height:300px;" class="card">5</div>
<div style="height:250px;" class="card">6</div></div>
</div>
</body>
</html>
This is not possible using plain CSS.
You can either change your HTML to have a wrapping "column" div for every two (in your case) .card elements, or alternatively there are lots of javascript plugins that you can easily achieve this layout by manipulating the HTML dynamically... Check http://masonry.desandro.com/ as one good example
This is the quick answer; but for DIVs with dynamic heights, I beleive it's better using a jQuery plugin (e.g. masonary as Ronen mentioned).
<!doctype html>
<html>
<head>
<style>
.card{
background-color: aqua;
border-radius: 10px;
width: 30%;
margin: 1% 1%;
display: inline-block;
}
</style>
</head>
<body>
<div style="height:200px;" class="card">1</div>
<div style="height:240px;" class="card">2</div>
<div style="height:200px;" class="card">3</div>
<div style="height:270px; top:-40px; position:relative;" class="card">4</div>
<div style="height:300px;" class="card">5</div>
<div style="height:250px; top:-40px; position:relative;" class="card">6</div>
</body>
</html>
I have a responsive <div> element placed in between two fixed <div> elements. I've tried the following code:
<html>
<head>
<title>Sample1</title>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css">
</head>
<body>
<div style="width: auto">
<div style="float: left; width:270px; background-color: green">Fixed div</div>
<div style="float: right; width: 120px; background-color: yellow"> Fixed div</div>
<div style="background-color: red" class="row">Responsive div</div>
</div>
</body>
</html>
Currently the responsive <div> element is taking the whole screen. When I try to checkout the width and height, it has acquired my entire main <div>. Is there any approach where I can put this responsive <div> inside 2 fixed <div>?
Check below code: Here I have altered Div sequence and change display style of the three.
<html>
<head>
<title>Sample1</title>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css">
</head>
<body>
<div style="display:table; width:100%">
<div style="display:table-cell; width:270px; background-color: green">Fixed div </div>
<div style="background-color: red; display:table-cell;"> Responsive div </div>
<div style="display:table-cell; width: 120px; background-color: yellow"> Fixed div</div>
</div>
</body>
</html>
Since you got their div widths already, we can took advantage of the calc
width: calc(100% - 390px);
The 390px value is the sum of the width of left and ride side elements.
<html>
<head>
<title>Sample1</title>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css">
</head>
<body>
<div style="width: auto">
<div style="float: left; width:270px; background-color: green">Fixed div </div>
<div style="float: right; width: 120px; background-color: yellow"> Fixed div</div>
<div style="background-color: red; width: calc(100% - 390px);margin-left: 270px;" class="row"> Responsive div </div>
</div>
</body>
</html>
Try with this:
<body style="display:table;width:100%;">
<div style="float: left; width:270px; background-color: green;display:table-cell;">Fixed div </div>
<div style="background-color: red;display:table-cell;" class="row"> Responsive div </div>
<div style="float: right; width: 120px; background-color: yellow;display:table-cell;"> Fixed div</div>
</body>
I am trying to change the background image of a jumbotron I have on one of my views and it just isnt working. I have looked at numerous posts on stack, and tried all of the suggested solutions but none of them are working for me.
HTML
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap -->
<link href="dist3/css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" type="text/css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<ul>
<li>About</li>
<li>Me</li>
</ul>
</div>
</nav>
<div class="content">
<div class="jumbotron">
<div class="container">
<h1>Allan Araujo</h1>
<p>Example paragraph</p>
</div>
</div>
<section class="pink">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12"><h3>.container-fluid</h3></div>
</div>
<div class="row">
<div class="col-xs-6">Column one</div>
<div class="col-xs-6">Column one</div>
</div>
</div>
</section>
<section class="green">
<div class="container">
<div class="row">
<div class="col-xs-12"><h3>.container</h3></div>
</div>
<div class="row">
<div class="col-xs-6">Column one</div>
<div class="col-xs-6">Column one</div>
</div>
</div>
</section>
</div> <!--END CONTENT-->
</body>
</html>
CSS:
/* ============================================= JUMBOTRON ============================================= */
.jumbotron {
background: url('/img/congruent_pentagon.png') no-repeat center center !important;
background-size: cover;
}
.nav {
text-align: center;
padding: 0;
margin: 0;
background-color: red;
height: 10%;
}
.nav li {
display: inline-block;
margin-right: 5%;
margin-left: 5%;
}
.pink {
background-color: #f99;
}
.green {
background-color: #9f9;
}
section {
padding-bottom: 20px;
}
My folders are structured as follows:
FOLDER
--css
--style.css
--dist
--img
--congruent_pentagon.png
--header.php
--index.php
I have tried to change the url to go see if that was the issue, but that did not fix the problem either. The weird part is the the background right now is grey, but not displaying the image that I want it to.
EDIT: now displaying entire html/css doc. I am using php to load in nav bars but I just combined them here to make it easier to look at.
The issue is related to the url to your image, change it to /img/congruent_pentagon.png
Online example: http://jsfiddle.net/tthLjchm/1/
Css:
.jumbotron {
background: url('http://getbootstrap.com/assets/img/sass-less.png') no-repeat center center !important;
height: 50%;
margin-top: 10px;
color: black;
}
.jumbotron p, h1 {
text-align: center;
}
The issue was that the image had to be placed within my css folder.
I'm straggling with a simple layout issue:
Basically my goal is to create a toggled side menu. When the side menu is visible the main layout is 80% width, and when it is not visible the main layout would be 100% width, like so:
I'm using bootstrap 3 and would like to use their CSS markup, so I can add rows and columns to the main div (Lt-orange in the illustration).
Any help would be appreciated :)
EDIT:
Here is my progress so far:
<div class="container">
<div id="sidebar" style="border:solid 1px;width:20%;float:left">SIDEBAR</div>
<div style="border:solid 1px;width:100%">
<div style="border:solid 1px red">
<div class="row">
<div class="col-lg-6">Some Content</div>
<div class="col-lg-6">
<div class="row">
<div class="col-lg-12">Some content</div>
</div>
</div>
</div>
</div>
</div>
<button onclick="document.getElementById('sidebar').style.display = document.getElementById('sidebar').style.display == 'none' ? 'block':'none'">TOGGLE</button>
Demo
Actually, you can't use 20% because bootstrap grid size works with 12s. Which means 100%=12/12 so 1/12 is 8,33% is the smallest unit. What is closest to you is for the sidebar to be 3/12=25%. Giving you code for this:
<div class="row">
<div class="col-xs-12 col-sm-3">
sidebar content
</div>
<div class="col-xs-12 col-sm-9">
main content here
<div class="row">
<div class="col-xs-12">
your 100% main content here
</div>
</div
</div>
I assume the bottom photo shows how it will look on a mobile device..?
I was working on a similar kind of solution, below is the snippet of code that works for me
below is the file (test.php)
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Toggle Demo</title>
<link rel="stylesheet" type="text/css" href="PATH TO/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="PATH/demo.css">
<script type="text/javascript" src="PATH/respond.min.js"></script>
</head>
<body>
<div class="container">
<div class="row" >
<div class="col-sm-3 side20" > This is side content</div>
<div class="col-sm-9 main80">This is the main content.</div>
</div>
<button class="btn btn-default" role="button">Toggle</button>
<div class="row" >
<div class="col-sm-3 side20" >n</div>
<div class="col-sm-9 main80" >This is the main content</div>
</div>
<footer class="row">
<div class="col-xs-6 copyright">
© Toggle Demo - <?php echo date('Y');?>
</div>
<div class="col-xs-6 design">
<small>Designed by Learner</small>
</div>
</footer>
</div>
<!-- JavaScript -->
<script src="PATH TO/jquery-1.11.0.js"></script>
<script src="PATH TO/bootstrap.min.js"></script>
<script type="text/javascript" src="PATH TO/custom.js"></script>
</body>
</html>
The sample css is (demo.css)
.container{
width: 100%;
background: #0081c2;
}
.side20{
background: #3e8f3e;
}
.col-sm-3{
display: block;
background: #3e8f3e;
height: 200px;
border: solid 2px #000000;
}
.main80{
background: #8D0D19;
height: 200px;
border: solid 2px #000000;
}
.col-sm-12{
background: #8D0D19;
}
footer{
min-height: 50px;
background: #010102;
border-radius: 3px;
}
.copyright{
text-align: center;
line-height: 50px;
color: #fff;
}
.design{
text-align: right;
line-height: 50px;
color: #FFF4B9;
}
And the toggle function is achieved by the below jQuery script (custom.js)
$(".btn").on("click", function(){
$(".col-sm-3").toggle();
$(".main80").toggleClass("col-sm-12");
$(".main80").toggleClass("col-sm-9");
});
Hope this helps. Happy coding!!
Found a CSS only solution , basically I'm using table display:
HTML + CSS:
<div class="container">
<div style="display:table;width:100%;border:solid 1px red;height:100px">
<div style="display:table-row">
<div id="side" style="display:table-cell;background:#CCC;width:30%">SIDE</div>
<div style="display:table-cell">
<div class="row">
<div class="col-xs-6">6 col</div>
<div class="col-xs-6">6 col</div>
</div>
</div>
</div>
</div>
<button class="btn btn-primary" onclick="toggle()">TOGGLE</button>
here is a JS fiddle, that toggles the display of the cell