I found a tricky problem when using Sticky on Foundation 6.4.3. The sticky container will drop way down the page, and making a big gap between it and the anchor container. Anyone have this problem also?
Screen Capture
Foundation 6 Sticky layout broken in mobile
$(document).foundation();
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/css/foundation.min.css"/>
<div class="grid-container">
<div class="grid-x grid-margin-x">
<div class="small-12 large-9 cell" id="sidebar-anchor">
<div style="height: 900px; background-color: purple; ">
main column
</div>
</div>
<div class="small-12 large-3 cell">
<div data-sticky-container>
<div class="sticky" data-sticky data-margin-top="1" data-sticky-on="large" data-anchor="sidebar-anchor">
<div style="height: 500px; background-color: yellow; ">
sidebar
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/what-input/5.0.5/what-input.min.js"></script>
<!-- Compressed JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/js/foundation.min.js"></script>
You should try position:sticky on the yellow background div.
$(document).foundation();
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/css/foundation.min.css"/>
<div class="grid-container">
<div class="grid-x grid-margin-x">
<div class="small-12 large-9 cell" id="sidebar-anchor">
<div style="height: 900px; background-color: purple; ">
main column
</div>
</div>
<div class="small-12 large-3 cell">
<div data-sticky-container>
<div class="sticky" data-sticky data-margin-top="1" data-sticky-on="large" data-anchor="sidebar-anchor" style="position:sticky">
<div style="height: 500px; background-color: yellow; ">
sidebar
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/what-input/5.0.5/what-input.min.js"></script>
<!-- Compressed JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/js/foundation.min.js"></script>
Related
right now I'm working with materializeccs cards, but I have an issue with these. The thing here is that I want the card to be the same size as the image height is, so there will not be a white space under the image when resizing the screen. This is the code I have right now, If the screen goes smaller the image starts to make smaller too(cause the responsive-img class), leaving more and more white space under it.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
<div class="col s12 m7">
<div class="card horizontal">
<div class="card-image">
<img src="https://lorempixel.com/190/100/nature/6">
</div>
<div class="card-stacked">
<div class="card-content">
<p>I am a very simple card. I am good at containing small bits of information.</p>
</div>
<div class="card-action">
This is a link
</div>
</div>
</div>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
And this is how I need it, no matter what the screen size is, the card height must be the same as the image. Please help. Thank you all.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
<div class="col s12 m7">
<div class="card horizontal">
<div class="card-image">
<img src="https://lorempixel.com/100/190/nature/6">
</div>
<div class="card-stacked">
<div class="card-content">
<p>I am a very simple card. I am good at containing small bits of information.</p>
</div>
<div class="card-action">
This is a link
</div>
</div>
</div>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
try adding this css to customize you output :
.card-stacked {
max-height: 100px;
display: inline-block;
}
.card .card-content {
padding: 15px 25px !important;
}
.card-action {
padding: 5px 25px !important;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
<div class="col s12 m7">
<div class="card horizontal">
<div class="card-image">
<img src="https://lorempixel.com/190/100/nature/6">
</div>
<div class="card-stacked">
<div class="card-content">
<p>I am a very simple card. I am good at containing small bits of information.</p>
</div>
<div class="card-action">
This is a link
</div>
</div>
</div>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
try to add classes/styles:
.card-image: {
overflow: hidden;
max-width: 50%;
}
.card-image img {
height: 100%;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
<div class="col s12 m7">
<div class="card horizontal">
<div class="card-image">
<img src="https://lorempixel.com/100/190/nature/6">
</div>
<div class="card-stacked">
<div class="card-content">
<p>I am a very simple card. I am good at containing small bits of information.</p>
</div>
<div class="card-action">
This is a link
</div>
</div>
</div>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
I am using boostrap to make a masonry layout. But I am having a problem. As you can see in my code, I have 5 divs. I want Div 4 and 5 to move up(check the attached image) but I have no idea how to do it. I can do it with margin-top but it will break the responsive layout. So, what's the possible solution for this? I am a newbie, it will be a great help. Thanks in advance.
<html>
<head>
<!-- Latest compiled and minified CSS -->
<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" type="text/css" href="css/font-awesome.min.css">
<style>
.div1{
border: 2px solid;
}
.div2{
border: 2px solid;
}
.div3{
border: 2px solid;
height: 100px;
}
.div4{
border: 2px solid;
}
.div5{
border: 2px solid;
height: 40px;
}
</style>
</head>
<body>
<div class="col-md-12">
<div class="col-md-4 div1">Div1</div>
<div class="col-md-4 div2">Div2</div>
<div class="col-md-4 div3">Div3</div>
<div class="col-md-8 div4">Div4</div>
<div class="col-md-8 div5">Div5</div>
</div>
<!-- Loading minified js. jQuery and Bootstrap -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
The current layout is:
But I want it like this:
In this specific case you can use nesting..
<div class="col-md-12">
<div class="row">
<div class="col-md-8">
<div class="row">
<div class="col-md-6 div1">Div1</div>
<div class="col-md-6 div2">Div2</div>
<div class="col-md-12 div4">Div4</div>
<div class="col-md-12 div5">Div5</div>
</div>
</div>
<div class="col-md-4">
<div class="row">
<div class="col-md-12 div3">Div3</div>
</div>
</div>
</div>
</div>
Or, use pull-right on div3...
<div class="col-md-12">
<div class="row">
<div class="col-md-4 div1">Div1</div>
<div class="col-md-4 div2">Div2</div>
<div class="col-md-4 div3 pull-right">Div3</div>
<div class="col-md-8 div4">Div4</div>
<div class="col-md-8 div5">Div5</div>
</div>
</div>
Demo of both solutions
If you want to use Masonry, see my answer for Bootstrap Masonry solutions.
It wouldn't be masonry, per say, but from your image what you want is
<div class='row'>
<div class='col-md-8'>
<div class='row'>
<div class='col-md-6 div1'>Div1</div>
<div class='col-md-6 div2'>Div2</div>
<div class='col-md-12 div4'>Div4</div>
<div class='col-md-12 div5'>Div5</div>
</div>
</div>
<div class='col-md-4 div3'>Div3</div>
</div>
you can do it this way:
// external js: masonry.pkgd.js
$('.grid').masonry({
itemSelector: '.grid-item',
columnWidth: '.grid-sizer',
percentPosition: true
});
<html>
<head>
<!-- Latest compiled and minified CSS -->
<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" type="text/css" href="css/font-awesome.min.css">
<style>
.div1{
border: 2px solid;
height: 40px;
}
.div2{
border: 2px solid;
height: 40px;
}
.div3{
border: 2px solid;
height: 100px;
}
.div4{
border: 2px solid;
height: 40px;
}
.div5{
border: 2px solid;
height: 40px;
}
</style>
</head>
<body>
<div class="col-md-12">
<div class="container-fluid">
<!-- add extra container element for Masonry -->
<div class="grid">
<div class="grid-sizer col-xs-4"></div>
<div class="grid-item col-xs-4 div1"></div>
<div class="grid-item col-xs-4 div2"></div>
<div class="grid-item col-xs-4 div3"></div>
<div class="grid-item col-xs-8 div4"></div>
<div class="grid-item col-xs-8 div5"></div>
</div>
</div>
</div>
<!-- Loading minified js. jQuery and Bootstrap -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="http://masonry.desandro.com/masonry.pkgd.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
How to place a container (two rows) with two containers (in two different rows) in bootstrap?enter image description here
i want containers arranged like this
You can use grid to do these kind of things.
Can you Illustrate what should it look like?(I could help you more then)
EDIT:
For this you actually need just a row with two columns.
And it will look like this:
<div class="row">
<div class="col-md-8"> <!-- 8 is the width of the left side -->
You content here
</div>
<div class="col-md-4"> <!-- 4 is the width of the right side -->
Your content here
</div>
</div>
If you need so that the content inside of those columns is also a grid, then it will be a bit different:
<div class="row">
<div class="col-md-8"> <!-- 8 is the width of the left side -->
<div class="row">
<div class="col-md-12"></div>
<!-- You just add your columns here -->
</div>
<div class="row">
<div class="col-md-12"></div>
<!-- You just add your columns here -->
</div>
</div>
<div class="col-md-4"> <!-- 4 is the width of the right side -->
<div class="row">
<div class="col-md-12"></div>
<!-- You just add your columns here -->
</div>
<div class="row">
<div class="col-md-12"></div>
<!-- You just add your columns here -->
</div>
</div>
</div>
Use this code:
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<style type="text/css">
.gray{border:5px solid gray;
height: 100px;
}
.green{border: 5px solid green;
height: 300px;
}
.orange{
border: 5px solid orange;
height: 350px;
}
.greenplus{border: 5px solid green;
height: 50px;
}
</style>
<body>
<div class="container" style="margin-top: 50px;">
<div class="row" >
<div class="col-lg-8 col-sm-8 col-md-8">
<div class="row" style="padding-left: 20px; padding-right: 20px;">
<div class="gray"></div>
<br>
<div class="green"></div>
</div>
</div>
<div class="col-lg-4 col-sm-4 col-md-4">
<div class="row" style="padding-left: 20px; padding-right: 20px;">
<div class="orange"></div>
<br>
<div class="greenplus"></div>
</div>
</div>
</div>
</div>
</body>
</html>
I want to have image on jumbotron and on this image some buttons from bootstrap and some other divs of course with bootstrap(my calendar). I want to create page full responsive so after version for computers I'm going to create version for mobiles. I wan't it to be something like this http://postimg.org/image/nmdsbws6d/ Thank for all responses
<html>
<head>
<title>calendar</title>
<!--STYLES-->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.js"></script>
<link rel="shortcut icon" type="images/ico" href="media/img/favicon.ico"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
.col-centered {
display:inline-block;
float:none;
/* reset the text-align */
text-align:left;
/* inline-block space fix */
margin-right:-4px;
}
</style>
</head>
<body>
<br><br><br><br>
<center>
<div class="jumbotron" style="background:url() no-repeat scroll center center / cover;">
<div class="container transparent" style="background-color: rgba(255, 255, 255, 0.6); padding:60px;">
<div class="row" style="background:url(<?php echo asset_url();?>media/img/tro.jpg) no-repeat center; height: 100%; width: 100%;">
<!-- now this row is outside img-->
<div class ="col-md-2 calendarbox1">
</div>
<div class ="col-md-1 " >
<img src="<?php echo asset_url();?>media/img/kalendarz/pon.png" style="height: 60px;">
</div>
<div class ="col-md-1 ">
<img src="<?php echo asset_url();?>media/img/kalendarz/wto.png" style="height: 60px">
</div>
<div class ="col-md-1 ">
<img src="<?php echo asset_url();?>media/img/kalendarz/sro.png" style="height: 60px">
</div>
<div class ="col-md-1 ">
<img src="<?php echo asset_url();?>media/img/kalendarz/czw.png" style="height: 60px">
</div>
<div class ="col-md-1 ">
<img src="<?php echo asset_url();?>media/img/kalendarz/pia.png" style="height: 60px">
</div>
<div class ="col-md-1 ">
<img src="<?php echo asset_url();?>media/img/kalendarz/sob.png" style="height: 60px">
</div>
<div class ="col-md-1 col-centered">
<img src="<?php echo asset_url();?>media/img/kalendarz/niedz.png" style="height: 60px">
</div>
<div class ="col-md-3 col-centered calendarbox1">
</div>
<!--
<div class="button-container">
<div class="btn btn-default" >Button</div>
<div class="btn btn-default">Button</div>
</div> -->
</div>
</div>
</div>
</body>
</html>
If your just trying to figure out how to get the image as the background. You can add it as a background to the jumbotron itself.
<div class="jumbotron container" style="background:url(http://www.keenthemes.com/preview/conquer/assets/plugins/jcrop/demos/demo_files/image1.jpg) no-repeat scroll center center / cover; height:600px;'">
I edited your code below. The styles aren't exact to the image you posted. But I believe this answers what you asked.
EDIT: Based on your comment below, I have edited the code, this seems closer to what you want.
<html>
<head>
<title>calendar</title>
<!--STYLES-->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.js"></script>
<link rel="shortcut icon" type="images/ico" href="media/img/favicon.ico"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
.calendarbox{
border: 2px solid gray;
width: 70px;
height: 60px;
}
.calendarbox1{
border: 3px solid ;
display: none;
}
</style>
</head>
<body>
<br><br><br><br>
<center>
<div class="jumbotron" style="background:url(http://www.nasa.gov/images/content/133202main_d_reichart_image2.jpg) no-repeat scroll center center / cover;">
<div class="container transparent" style="background-color: rgba(255, 255, 255, 0.6); padding:60px;">
<div class="myimage" style="background:url(http://www.keenthemes.com/preview/conquer/assets/plugins/jcrop/demos/demo_files/image1.jpg) no-repeat scroll center center / cover; height:600px;">
<div class="row">
<div class ="col-md-1 col-centered ">
<div class="calendarbox1"></div>
</div>
<div class ="col-md-1 col-centered">
<div class="calendarbox1"></div>
</div>
<div class ="col-md-1 col-centered">
<div class="calendarbox"></div>
</div>
<div class ="col-md-1 col-centered">
<div class="calendarbox"></div>
</div>
<div class ="col-md-1 col-centered">
<div class="calendarbox"></div>
</div>
<div class ="col-md-1 col-centered">
<div class="calendarbox"></div>
</div>
<div class="col-md-1 col-centered ">
<div class="calendarbox"></div>
</div>
<div class ="col-md-1 col-centered">
<div class="calendarbox"></div>
</div>
<div class ="col-md-1 col-centered">
<div class="calendarbox"></div>
</div>
<div class ="col-md-1 col-centered">
<div class="calendarbox1"></div>
</div>
<div class ="col-md-1 col-centered">
<div class="calendarbox1"></div>
</div>
<div class ="col-md-1 col-centered">
<div class="calendarbox1"></div>
</div>
</div>
<div class="button-container">
<div class="btn btn-default" >Button</div>
<div class="btn btn-default">Button</div>
</div>
</div>
</div>
</div>
</body>
</html>
Using bootstrap, I want to put a button next to a progress-bar in a a row-fluid div. I cannot figure out why it doesn't work. Here is my code. Any thought?
<!DOCTYPE html>
<html>
<head>
<!-- Bootstrap -->
<link href="/static/bootstrap/css/bootstrap.css" rel="stylesheet" media="screen">
</head>
<body>
<div class="row-fluid">
<div class="span2">button</div>
<div class="span10 progress">
<div class="bar bar-info" style="width: 50%;">
bar10
</div>
</div>
</div>
</body>
</html>
You need to wrap your progress div in a span10 div like this:
<div class="row-fluid">
<div class="span2">button</div>
<div class="span10">
<div class="progress">
<div class="bar bar-info" style="width: 50%;">
bar10
</div>
</div>
</div>
</div>