Please check this two photos
I don't know how to get ".myDivInTheGrid" in boxed bootstrap div. Any suggestions?
I have something like this...
<div class="fluid-container">
<div class="col-md-6"></div><!-- Div with image -->
<div class="col-md-6">
<div class="myDivInTheGrid"></div>
</div><!-- div with content -->
</div>
I have created a working example with a picture in the div you showed in the picture. I made it for col-md-* but you can do the same for larger grid system. If your screen is small, stretch the browser. Check it out HERE
The code is like this:
HTML:
body
<div class="container-fluid">
.fluid-container
<div class="row">
<div class="col-md-6">
.col-md-6
</div>
<div class="col-md-6">
<div class="row">
.col-md-6
</div>
<img class="row" src="http://s22.postimg.org/8z6hs0mch/Chrysanthemum.jpg"/>
</div>
</div>
</div>
CSS:
body{
background:#8EC34D;
color: white;
}
.container-fluid {
background: #81AD4B;
position: relative;
top: 40px;
padding-bottom: 40px;
}
.col-md-6 {
background:#769C47;
height: 300px;
}
img {
width: 256px;
height: 192px;
}
Related
I'm trying to make a layout that has 4 columns in a row with different width, but also should only take around 70-80% of the page. But once I set the width of the parent-container or add margins to the container, the content inside the grid rows starts to overlap other columns, how do I prevent it?
<style>
.instructions-wrapper {
text-align: center;
margin: 0 5%; /*if I delete this row, it all works as expected. I tried width: 80%, same things happens.*/
}
.one {
background-color: red;
}
.two {
background-color: yellow;
}
.three {
background-color: blue;
}
.four {
background-color: purple;
}
</style>
<div class="instructions-wrapper">
<h1>text</h1>
<div class="container">
<div class="row">
<div class="col-lg-1 one">
2019
</div>
<div class="col-lg-2 two">
<img src="https://via.placeholder.com/100">
</div>
<div class="col-lg-7 three">
text
</div>
<div class="col-lg-2 four">
text
</div>
</div>
</div>
</div>
The margin is making the container smaller and it makes the columns too small for the content so it has to overlap.
For example you give column "two" 2 parts of the grid and your image is 100px.
If your container is 1200px. then 2 parts is 200px including padding which is 30px.
If the container is 780px wide then 2 parts is 130px - this is the full width of your image and padding
so if your container gets smaller than 780px then this grid cell will start overlapping.
This is your code using width:80% and when you look at it in full page it still works. So your container is just getting too small.
.instructions-wrapper {
text-align: center;
width:80%;
}
.one {
background-color: red;
}
.two {
background-color: yellow;
}
.three {
background-color: blue;
}
.four {
background-color: purple;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<div class="instructions-wrapper">
<h1>text</h1>
<div class="container">
<div class="row">
<div class="col-lg-1 one">
2019
</div>
<div class="col-lg-2 two">
<img src="https://via.placeholder.com/100">
</div>
<div class="col-lg-7 three">
text
</div>
<div class="col-lg-2 four">
text
</div>
</div>
</div>
</div>
I want to position a div according to the picture:
I'm successful so far by using Bootstrap's row class and using z-index in my CSS. But when I resize the browser, it's not responsive, it just floats off the right side of the page. By the way, I'm using position: absolute (I read online that I have to use this in order to make use of z-index). Is there any other more elegant way to do this? I want it to be responsive but can't seem to find any other workaround than the wonky one I implemented.
Code:
#div2 {
float: inherit;
position: absolute;
top: inherit;
left: 60%;
width: 320px;
height: 1290px;
z-index: 5;
}
<div class="container">
<div class="div-container">
<div class="row">
<div id="div1">
<p>Div 1</p>
</div>
<div id="div2" align='center'>
<p>Div 2</p>
</div>
</div>
<div class="row">
<div id="div3">
<p>Div 3</p>
</div>
</div>
</div>
</div>
You need to make use of the nested rows inside a column. See here - Bootstrap Nesting. Ignore the CSS here as it is for snippet styling and height is used for ignoring the content.
.B {
min-height: 130px;
background: #393276;
margin-bottom: 20px;
}
.A {
min-height: 100px;
margin-bottom: 20px;
background: #393276;
}
.C {
min-height: 250px;
background: #393276;
}
div {
text-align: center;
color: #fff;
font-size: 32px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="container mt-4">
<div class="row">
<!-- First Column -->
<div class="col-sm-6">
<!--Rows nested inside a column-->
<div class="row">
<div class="col-12">
<div class="A">A</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="B">B</div>
</div>
</div>
</div>
<!-- Second Column -->
<div class="col-sm-6">
<div class="C">C</div>
</div>
</div>
</div>
I have used flexbox to keep responsive design and some margin positioning to keep the formation together.
.container{
display: flex;
flex-wrap: wrap;
width: 150px;
}
.div1, .div3{
margin-right: 5px;
width: 50px;
height: 50px;
}
.div2{
margin-right: 5px;
width: 50px;
height: 110px;
}
<div class="container">
<div class="div1"> div1 </div>
<div class="div2"> div2 </div>
<br/>
<div class="div3" style="margin-top: -55px;"> div 3 </div>
</div>
I would like to have a collapsible sidebar in bootstrap.
For this I' d like to have a slim element between the content and the sidebar toggles the visibility of the sidebar (display property). See the example below:
https://jsfiddle.net/zaao8Lqb/1/
Instead of the border (as in the fiddle), I' d like to have an element. How would I do that?
The solution is a simple div with full height. The total solution of a collapsible sidebar:
https://jsfiddle.net/c2bgkbzL/1/
html,
body {
height: 100%;
}
.fill {
height: 100%;
min-height: 100%;
}
#content {
background-color: AliceBlue;
height: 100%;
padding-left: 0;
}
#sidebar {
background-color: DarkGray;
height: 100%;
padding: 3px;
}
#collapseme{
background-color: black;
width: 10px;
height: 100%;
float: left;
}
Here is the code to do it. Can find fiddle at https://jsfiddle.net/qaisarnadeem/zzs94oc1/
<body>
<div class="container-fluid fill">
<div class="row fill">
<div class="col-lg-2 col-md-4 col-xs-4" id="sidebar">
<h4>
Sidebar
</h4>
</div>
<div class="pull-left vertical-elem"></div>
<div class="col-lg-10 col-md-6 col-xs-6 text-center" id="content">
<h3>
Content
</h3>
</div>
</div>
</div>
</body>
here is css for class vertical-elem
.vertical-elem{
height:100%;
width:6px;
background-color:blue;
}
I need to make a bootstrap footer like the one on the bottom of this site http://drantipov.com/ . But I don't need it to be ".container-fluid", I want it be a responsive fixed width container - ".container". I don't want it to be sticky. I just need to know how to make those 3 columns with links. Without the column with the logo. Can someone please help me?
Created a fiddle for you, check it out :
http://jsfiddle.net/vm3m74q1/7/
To make the 3 columns you can use bootstrap. You can read more about bootstrap columns here: http://getbootstrap.com/css/#grid
<div class="container">
<nav class="row" role="navigation">
<div class="col-sm-4 center"><p>Content here</p></div>
<div class="col-sm-4 center"><p>Content here</p></div>
<div class="col-sm-4 center"><p>Content here</p></div>
</nav>
</div>
CSS for center :
.center {
text-align: center;
}
Added a new fiddle for you with bootstrap 2.3.2 : http://jsfiddle.net/vm3m74q1/11/
With bootstrap 2.3.2 you need to use span as a div class (change col-sm-4 with span 4 to get the same effect), like this.
<div class="container">
<nav class="row" role="navigation">
<div class="span4"><p>Content here</p></div>
<div class="span4"><p>Content here</p></div>
<div class="span4"><p>Content here</p></div>
</nav>
</div>
To delete the spaces between you need to remove margin and change width of .span4, updated fiddle : http://jsfiddle.net/vm3m74q1/12/
.span4 {
background: red;
margin:0;
width: 33.3%
}
nav {
margin: 0
}
.row {
margin:0
}
Try this Courtsey of GetBootstrap:
http://codepen.io/anon/pen/zGpPjX
//Needed since no content
<div id="wrap">
<div id="push"></div>
</div>
<div id="footer">
<div class="container">
<div class="col-md-4">
<p>content</p>
</div>
<div class="col-md-4">
<p>content</p>
</div>
<div class="col-md-4">
<p>content</p>
</div>
</div>
</div>
CSS:
html,
body {
height: 100%;
/* The html and body elements cannot have any padding or margin. */
}
#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
/* Negative indent footer by it's height */
margin: 0 auto -60px;
}
/* Set the fixed height of the footer here */
#push,
#footer {
height: 60px;
}
#footer {
background-color: #f5f5f5;
}
/* Lastly, apply responsive CSS fixes as necessary */
#media (max-width: 767px) {
#footer {
margin-left: -20px;
margin-right: -20px;
padding-left: 20px;
padding-right: 20px;
}
}
I just started using Foundation and I like it a lot. I have a question. I have a design that requires the logo to be horizontally centered, on-top and in between two full divs (see attached picture).
The code below is what I have which seems to work fine but doesn't re-size on screen changes and I was wondering if there was a better way to accomplish this when working with Foundation.
Is there a possible improvement that I could do to better integrate the logo into Foundation? In other words is there a way to integrate the logo in a way that It re-sizes when the screen changes or this is my best option and I would need to re-size it manually for multiple screens?
HTML
<div class="row fullWidth">
<div class="large-12 columns box">
<img src="logo.png" class="logo">
</div>
</div>
<div class="row fullWidth">
<div class="large-12 columns box"> </div>
</div>
CSS
.fullWidth {
width: 100%;
margin-left: auto;
margin-right: auto;
max-width: initial;
position: relative;
}
.logo{
position:absolute;
left: 50%;
top: 20px;
margin-left: -100px;// half-width of logo
z-index: 20;
}
.box{
background-color: #333;
height: 120px;
margin-bottom: 10px;
}
If you know the height of the logo, you can use negative margin-top as well, but you'll probably have to wrap the 2 outer divs with a new div.
HTML:
<div class="outer">
<div class="row fullWidth">
<div class="large-12 columns box">
<img src="logo.png" class="logo">
</div>
</div>
<div class="row fullWidth">
<div class="large-12 columns box"> </div>
</div>
</div>
CSS:
.outer {
width: 100%;
position:relative;
}
.fullWidth {
width: 100%;
margin-left: auto;
margin-right: auto;
max-width: initial;
// position: relative; // REMOVED
}
.logo{
position:absolute;
left: 50%;
top: 50%;
margin-left: -100px;// half-width of logo
margin-top: -100px;// half-height of logo
z-index: 20;
}
You can do the following to make it center
<div class="row fullWidth">
<div class="large-12 columns box">
<img src="logo.png" class="logo">
</div>
<div class="row fullWidth">
<div class="large-12 columns box"> </div>
</div>
</div>
DEMO
Is it the logo that doesn't resize? If so, try this:
.logo{
position:absolute;
left: 50%;
top: 20%;
margin-left: -100px;//half-width of logo
z-index: 20;
}
The logo should be able to resize now.