I'm trying to make two full height bootstrap columns like the example here : Twitter bootstrap 3 two columns full height
But the problem is that it show me the first column content (col-md-2) after the second one content (col-md-10).
<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<style type="text/css">
html,body,.m-container
{
height:100%;
}
.m-container
{
display:table;
width: 100%;
margin-top: 50px;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.row
{
height: 100%;
display: table-row;
}
.col-md-2 .no-float, .col-md-10 .no-float {
float: none;
}
.col-md-2
{
float: none;
display: table-cell;
background: pink;
}
.col-md-10
{
display: table-cell;
background: yellow;
float: none;
}
</style>
</head>
<body>
<header>Header</header>
<div class="m-container">
<div class="row">
<!-- Data sources accordion -->
<div class="col-md-2">
<div class="well">I'm another well</div>
</div><!-- /end of col -->
<!--
Wall of panels
-->
<div class="col-md-10">
<div class="col-md-6">
<div class="well">I'm the first well</div>
</div>
<div class="col-md-6">
<div class="well">I'm the second well</div>
</div>
<div class="col-md-6">
<div class="well">I'm the third well</div>
</div>
</div>
</body>
</html>
I'm trying without using col-md-6 in the col-md-10 part and it works, but i should use col-md-6
Someone have an idea why i have this problem?
Above the JSFiddle link to my code
JSFIDDLE Code
Related
I want to achieve the following layout on desktop:
[1][2]
[3][2]
I need column 2 to be the height of 1 and 3 on desktop.
Then on mobile I want it to look like:
[1]
[2]
[3]
I tried 2 options:
Option 1:
<div class="row">
<div class="col-md-7">
<span>1</span>
</div>
<div class="col-md-5">
<span>2</span>
</div>
<div class="col-md-7">
<span>3</span>
</div>
</div>
The problem is that block 2 is the height of block 1 only.
Option 2:
I thought about using column ordering to insert block 2 between block 1 and block 3:
<div class="row">
<div class="col-md-7">
<div>
<span>1</span>
</div>
<div>
<span>3</span>
</div>
</div>
<div class="col-md-5">
<span>2</span>
</div>
</div>
But I don't think it's possible this way.
Is there another method I didn't think about? or is it possible using one of the methods above?
Thanks.
try something like this
#flex_box1 div
{
width:100%;
height:150px;
border: 2px solid #555;
margin-bottom:15px;
}
#flex_box1 div:last-child{ margin:0; }
#flex_box2 div
{
width:100%;
height:100%;
background-color: #555;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<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">
<title>Hello, world!</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-4 d-flex flex-column" id="flex_box1">
<div></div>
<div></div>
</div>
<div class="col-8 " id="flex_box2">
<div></div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<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>
</body>
</html>
I can suggest you to use library called Masonry. It is quick and easy to implement. Link: https://masonry.desandro.com/
With this you can get desired result for both desktop and mobile version as you mentioned.
Demo:
https://codepen.io/Bibeva/pen/qBExWjj
HTML:
<!-- bootstrap 4 css -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="row grid">
<div class="col-md-6 grid-item">
<span>1</span>
</div>
<div class="col-md-6 grid-item grid-item-box">
<span>2</span>
</div>
<div class="col-md-6 grid-item">
<span>3</span>
</div>
</div>
<!-- jquery cdn -->
<script src="https://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<!-- masonry js cdn-->
<script src="https://unpkg.com/masonry-layout#4/dist/masonry.pkgd.js"></script>
<!-- custom js -->
<script>
$('.grid').masonry({
// options
itemSelector: '.grid-item'
});
</script>
CSS:
.grid-item {
background: #000;
color: #fff;
height: 100px;
}
.grid-item-box {
height: 200px;
background: #333;
}
.container1{
display:inline-flex;
align-items: flex-start;
justify-content: flex-start;
flex-direction: row;
flex-wrap: wrap;
position: relative;
}
.container1 div {
height: 50vh;
width: 200px;
margin: 0;
border: 1px solid black;
color: #fff;
text-align: center;
align-items: center;
display: inline-flex;
justify-content: center;
font-size: 50px;
font-weight: bold;
}
.div1 {
background: #f60;
}
.div2 {
background: #f55;
height: 100vh!important;
}
.div3 {
position: absolute;
bottom: 0;
left:0;
background: #0ae4dd;
}
<div class="container1">
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
</div>
<pre>
**For Mobile View**
#media(max-width: 992px){
.container1{
flex-wrap: wrap;
width: 100%;
max-width: 100%;
}
.container1 div {
width:100%;
height: auto;
}
.div2 {
height: auto!important;
}
.div3{
position:inherit;
}
}
</pre>
If someone will need a solution in the future, I ended up using flex-direction: column and put height on the container:
HTML:
<div id="flex-container" class="row flex-lg-column">
<div class="col-12 col-lg-6 order-1">
<span>1</span>
</div>
<div class="col-12 col-lg-6 order-3">
<span>2</span>
</div>
<div class="col-12 col-lg-6 order-2">
<span>3</span>
</div>
</div>
CSS:
#media (min-width: 992px) {
#flex-container {
max-height: 40rem;
}
#flex-container .order-1,
#flex-container .order-2,
#flex-container .order-3 { order: initial; }
}
And becuase Bootstrap 4 .row has flex-wrap: wrap, block 3 will wrap to the right side of the two blocks on lg screens.
I'm still so stuck on this issue with my CMS and how to make it so that a user can drag an image of any size into a column/row (bootstrap) and it will responsively scale to fit.
First of all, this isn't for a website but it's a CMS where users create static pages that will show on digital displays so there is no scrolling at all. There is a banner (header) and a ticker/footer as the top and bottom rows, then the middle row has the main column where the images will sit. So no matter what, the images dragged into that area need to scale to fit so that the image remains in the column area which remains between the header and footer.
Currently, I can drag an image of reasonable size in and it sits fine but if I put a huge image in there it totally breaks the middle row/column AND breaks past the footer as well, as opposed to scaling down to fit. it should be responsive as much as possible while fitting in the bounds. Examples of those two:
Large placeholder image breaking the column
So in the images, the red area is the bootstrap column/row in question that the image is breaking. The 2nd image shows a 2000x2000 placeholder breaking out of the area and beyond the bottom row with the ticker. IN both images, the dark grey bars are the top and bottom rows.
Again, no matter what size image the user drags into this area and saves, regardless of what display it shows on it should always show the top and bottom rows, with a column in the middle of them with a scaled image.
My code is below
How exactly can I rectify this so that I don't have to worry about users dragging massive images into an area and they won't display properly once saved?
<style type="text/css">
#import "style.css";
html,
body {
height: 100%;
width:100%;
overflow: hidden;
}
.middle iframe{
height:100% !important;
width:100% !important;
}
.middle p{
max-height:100%;
}
img{
max-width: 100%;
height: auto;
}
.fullContent > img{
max-width: 100%;
height: auto;
}
.topLeftContent > img{
max-width: 100%;
height: auto;
}
.bottomLeftContent > img{
max-width: 100%;
height: auto;
}
.rightContent > img{
max-width: 100%;
height: auto;
}
.leftContent > img{
max-width: 100%;
height: auto;
}
.topRightContent > img{
max-width: 100%;
height: auto;
}
.bottomRightContent > img{
max-width: 100%;
height: auto;
}
.modal-lg {
max-width: 80% !important;
}
.my-container {
display: flex;
flex-direction: column;
height: 100vh;
width:100%;
}
.my-container>.top [class^="col-"],
.my-container>.bottom [class^="col-"] {
background-color: #778899 ;
color: white;
text-align: center;
}
.my-container>.middle {
flex-grow: 1;
padding:30px;
background-image: url('images/bg6.jpg');
background-size: cover;
}
</style>
<div class="row top">
<div class="row">
<div class="col-lg-12" style="background-color:grey">
<div class="row" style="background-color: #929292;">
TOP
</div>
</div>
</div>
</div>
<div style="text-align: center; margin-top: 15px;">
<p>(Content must fit within bounds of dotted border)</p>
</div>
<div class="row middle" id="background">
<form><input type="hidden" name="panel" value="background"></form>
<div class="col-lg-12 fullWidth" id="full">
<form><input type="hidden" name="panelFull" value="full"></form>
<div class="fullContent" style="background-color: red; height: 100%; border: dotted 1px black;">
<img src="https://via.placeholder.com/2000">
</div>
</div>
</div>
<div class="row bottom">
<div class="col-lg-12" style="background-color:grey">
<div class="marquee"><h2>Ticker</h2></div>
</div>
</div>
if you are using bootstrap, its so easy
<div class="row">
<div class="col-12">
<img class="img-fluid" src="YOUR_IMG_SRC">
</div>
</div>
Here is the template, you can use and edit as per your requirements
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<style type="text/css">
body{background-color: #e8eef0;}
</style>
<title>Main</title>
</head>
<body>
<header class="bg-light">
<div class="container">
<h3 class="text-center py-3">Header Section</h3>
</div>
</header>
<div class="row w-100">
<div class="container">
<div class="border border-danger p-5">
<h6 class="text-center">Main Image Section</h6>
</div>
</div>
</div>
<footer class="bg-dark">
<div class="container">
<h5 class="text-center py-3 text-white">Footer Section</h5>
</div>
</footer>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<!-- CDN Link for jquery -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<!-- CDN Link for popperjs -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<!-- CDN Link for Bootstrapjs -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
</body>
</html>
I am newbie with CSS; so, I do not want to use CSS frameworks.
After reading some questions about fixed header and footer with CSS (on StackOverflow), I tried to create a HTML layout, as this:
In this layout, both header and menu are fixed.
I have created an HTML file with 2 column: left for menu, right for content. But, it comes with an scrolled-menu:
#menu {
width: 33%;
height: 100%;
float: left;
}
#page {
width: 66%;
height: 100%;
float: left;
}
#header {
width: 100%;
height: 100px;
position: fixed;
}
#content {
width: 100%;
position: absolute;
top: 100px;
}
#footer {
width: 100%;
height: 100px;
position: fixed;
bottom: 0;
}
<div id="menu">
MENU
</div>
<div id="page">
<div id="header">Header</div>
<div id="content">
<p>Some content...</p>
</div>
<div id="footer">Footer</div>
</div>
When I add this line: position: fixed; in #menu, the layout will be broken. Could help help me to fix it?
Currently you could use the Tag directly as <header> <body> <footer> you need to establish position : block. I would like to recommend that you uses a Framework like Bootstrap, today is commonly uses for design webpages, if you are new un webpages it Will be useful for you
http://getbootstrap.com/
<!DOCTYPE html>
<html lang="en">
<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>Example of Bootstrap 2 Unequal Column Layout for Tablets and Desktops</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<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" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<style type="text/css">
.row > div{
margin-bottom: 15px;
}
.header{
min-height: 90px;
}
.footer{
min-height: 60px;
}
.header, .footer{
background: #2f2f2f;
}
.sidebar{
background: #dbdfe5;
}
.content{
background: #b4bac0;
}
.sidebar, .content{
min-height: 300px;
}
</style>
</head>
<body>
<!-- Open the output in a new blank tab (Click the arrow next to "Show Output" button) and resize the browser window to understand how the Bootstrap responsive grid system works. -->
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="header"></div>
</div>
</div>
<div class="row">
<div class="col-sm-3">
<div class="sidebar"></div>
</div>
<div class="col-sm-9">
<div class="content"></div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="footer"></div>
</div>
</div>
</div>
</body>
</html>
I am trying to build a layout of buttons. I have worked at it for a while now, but I doubt my code would be helpful in understanding my problem. I have included the specs of the buttons on the image below. If you guys could show me how to make this layout it would be greatly appreciated.
Start with creating container and appropriate divs inside.
<div class="container">
<div class="blue"></div>
<div class="center">
<div class="red"></div>
<div class="yellow"></div>
</div>
<div class="green"></div>
</div>
then you have to position them and set particular width.
body, html { height: 100%; }
.container { height: 100%; }
.container > div { float: left; }
.center { height: 100%; width: 33%; }
.blue { background: blue; width: 33%; min-height: 100%; }
.red { background: red; height: 50% }
.yellow { background: yellow; height: 50% }
.green { background: green; width: 33%; height: 100% }
you can alternativly use flex box to get rid of float: left
.container { height: 100%; display: flex; }
Demo: http://jsfiddle.net/eLq0770h/
The way I would approach this is to make three DIV's side by side to make the three columns of your design. (the blue column, the red-and-yellow collumn and the green collumn)
You can then use two more DIV's to split the middle column in to two rows.
Your code would then be structured as follows
<div id="site">
<div id="leftcolumn">
CONTENT
</div>
<div id="middlecolumn">
<div id="middletop">
CONTENT
</div>
<div id="middlebottom">
CONTENT
</div>
</div>
<div id="rightcolumn">
CONTENT
</div>
</div>
You can then use CSS to set the widths and heights of these DIV's.
I don't know if this is the right way to do this, but this is how I do it.
Your code looks great. Here's how I would approach the project http://codepen.io/dfrierson2/pen/RNoWZe.
First I set the wrapper to 100% width then i centered the container with margin: 0 auto; I add a width to the container of 600px and set the height to auto and gave it a css selector class of overflow: hidden so that the container will expand with the content of the divs. I would use Bootstrap as a frame work because it is a responsive frame work with great starter code.
http://getbootstrap.com/getting-started/#template
It also has great pre style navs and buttons http://getbootstrap.com/components/#btn-groups
<!DOCTYPE html>
<html lang="en">
<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>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<style>
.wrapper {
width: 100%;
height: auto;
}
.container {
margin: 0 auto;
border: 1px solid red;
overflow: hidden;
width: 600px;
height: auto;
background: yellow;
}
.col-md-4 {
border: 1px solid green;
float: left;
width: 198px;
height: 700px;
}
.blue {
background: blue;
}
.red {
background: red;
height: 350px;
}
.green {
background: green;
}
.one {
border: 1px solid black;
height: 350px;
}
.two {
border: 1px solid black;
height: 350px;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="container">
<div class="row">
<div class="col-md-4 blue">33%</div>
<div class="col-md-4 red">33%</div>
<div class="col-md-4 green">
<div class="col-md-6 one">50%</div>
<div class="col-md-6 two">50%</div>
</div>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
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>