.components{
background-color: #1DA1F2;
text-align: left;
height: 100vh;
padding: 20px;
}
I've used height:100vh on the outer div which surrounds the content but i cannot get the div content to align in the middle of the screen. How can that be done ? The outer most div is .components and the inner div is .row
I made a simple example below ( Hope i understood what you wanted )
Just add display:flex;align-items:center on the .components . I used bootstrap but only for the cols to stay side by side . It doesn't matter how you arranged your layout , bootstrap or not, display:flex will work
.components {
background-color: #1DA1F2;
text-align: left;
height: 100vh;
padding: 20px;
display:flex;
align-items:center;
}
.row {
width:100%;
}
.col-sm-4 {
background:red;
height:50px;
}
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="components">
<div class="row">
<div class="col-xs-4">
col
</div>
<div class="col-xs-4">
col
</div>
<div class="col-xs-4">
col
</div>
<div class="col-xs-4">
col
</div>
<div class="col-xs-4">
col
</div>
<div class="col-xs-4">
col
</div>
</div>
</div>
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>
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;
}
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 am using bootstrap and I have two container inside a bootstrap container. Like this:
<div class="container">
<div id="container-map">
aasdasd
</div>
<div id="container-buttons">
asdasda
</div>
</div>
What I am trying to do is center the two divs, #container-map and #container-buttons side by side, inside the main container.
This is my custom CSS for the two divs:
#container-map,
#container-buttons {
display: inline-block;
margin: 0 auto 0 auto;
width: 500px;
height: 500px;
}
Is there a reason you don't want to use the bootstraps built in gridsystem? Something like this?
<div class="container">
<div class="row">
<div class="col-md-3 col-md-offset-3">
<div class="container-map">
asdf
</div>
</div>
<div class="col-md-3">
<div class="container-buttons">
asdf
</div>
</div>
</div>
</div>
Just change your CSS to this
#container-map,
#container-buttons {
float: left;
margin-left: auto;
}
Both containers will be centered and side by side
You can try the code from this example (using text-align: center; on .container display:inline-block; for divs).
<style>
.container {
position:relative;
text-align:center;
}
#dv1, #dv2 {
display:inline-block;
width:100px;
margin:0 3px;
background:#33f;
}
</style>
<div class="container">
<div id="dv1">Div 1</div>
<div id="dv2">Div 2</div>
</div>
you make both your divs to take equal height using flex. You can refer the link to find out the browsers which support it. Have a look at this:
.container {
display: flex;
width: 400px;
background: #eee;
}
.column {
flex: 1;
background: #fff;
border: 1px solid #ccc;
margin: 1px;
}
<div class="container">
<div class="column">
<p>aasdasd</p>
</div>
<div class="column">
<p>asdasda</p>
<p>asdasda</p>
</div>
</div>
I'm trying to have a two-column centered layout with Bootstrap 3.1.
I've read this: How do I center a Bootstrap div with a 'spanX' class?, but the content is stil aligned to the left. Here is my HTML:
<div class="row">
<div class="center">
<div class="col-lg-3 gauche">
Left div
</div>
<div class="col-lg-5 corps">
Right div
</div>
</div>
</div>
And my CSS:
body
{
padding: 0;
margin: 0;
}
.corps
{
background-color: white;
}
.contenu
{
margin-top: 5em;
margin-bottom: 1em;
background-color: white;
padding: 1.2em;
padding-left: 1.5em;
}
.center
{
float: none;
margin-left: auto;
margin-right: auto;
}
.gauche
{
background-color: #e6e6e6;
min-height: 200px;
}
Result is here: http://i.imgur.com/5nhZ2WS.png
You would want to use a column offset class. If you are using a stock build of Bootstrap all of the column classes need to add up to 12. Your col-lg-3 and col-lg-5 only add up to 8 so adding a col-lg-offset-2 should fix you up to center. Also, bootstrap has a built in centering class container i personally would use that. See below code:
<div class="container">
<div class="row">
<div class="col-lg-3 col-lg-offset-2 gauche">
Left div
</div>
<div class="col-lg-5 corps">
Right div
</div>
</div>
</div>
Add a container, remove the center div and add two blank col-lg-2 on either side so it adds up to 12 columns:
<div class="container">
<div class="row">
<div class="col-lg-2">
</div>
<div class="col-lg-3 gauche">
Left div
</div>
<div class="col-lg-5 corps">
Right div
</div>
<div class="col-lg-2">
</div>
</div>
</div>
For a scalable solution I recommend:
HTML:
<div class="row">
<div class="center">
<div class="col-lg-3 gauche">Left div</div>
<div class="col-lg-5 corps">Right div</div>
</div>
</div>
SCSS:
.center {
display: flex;
flex-direction: row;
justify-content: center;
.col-* {
display: inline-block;
margin-left: -2px; /* Adjust the value of marging work best with your context */
float: none;
}
}
Now it won't matter how many columns (or types of columns) you put in <div class="center"></div>
Try
.row {
margin:0px auto;
}