I'm trying to recreate this layout, but I don't know how to make the second container stay next to the first one. I tried adding height and width to the divs and containers, but it stays under the red block. I also tried setting the alignment to in-block, but it didn't work either.
https://codepen.io/jimdiew/pen/XWXwEOa
<style>
.sin-padding {padding-left: 0; padding-right: 0;}
.col-3 { width: 100%; height: 100%;}
.box-1 {height: 200px;}
.col-6{flex:50%; max-width:50%;}
.row {display: flex; flex-wrap: wrap;}
</style>
</head>
<body>
<!-- FIRST CONTAINER -->
<div class="col-6 sin-padding">
<div class="box-1" style="background-color: red;">
Big Project
</div>
</div>
<!-- SECOND CONTAINER -->
<div class="col-6 sin-padding">
<!-- FIRST ROW-->
<div class="row">
<div class="col-6" style="background-color: blue;">
Project 1
</div>
<div class="col-6" style="background-color: green;">
Project 2
</div>
</div>
<!-- SECOND ROW-->
<div class="row">
<div class="col-6" style="background-color: purple;">
Project 3
</div>
<div class="col-6" style="background-color: cyan;">
Project 5
</div>
</div>
</div>
EDIT 1 : I changed the col-3 of the second container to col-6 as I think It was more appropiate.
<!-- begin snippet: js hide: false console: true babel: false -->
<style>
.sin-padding {
padding-left: 0;
padding-right: 0;
}
.col-3 {
width: 100%;
height: 100%;
}
.box-1 {
height: 200px;
}
.box-2 {
height: 100px;
}
.col-6 {
flex: 50%;
max-width: 50%;
}
.row {
display: flex;
flex-wrap: wrap;
}
</style>
</head>
<body>
<div class="row">
<!-- FIRST CONTAINER -->
<div class="col-6 sin-padding">
<div class="box-1" style="background-color: red;">
Big Project
</div>
</div>
<!-- SECOND CONTAINER -->
<div class="col-6 sin-padding">
<!-- FIRST ROW-->
<div class="row">
<div class="col-6 box-2" style="background-color: blue;">
Project 1
</div>
<div class="col-6 box-2" style="background-color: green;">
Project 2
</div>
</div>
<!-- SECOND ROW-->
<div class="row">
<div class="col-6 box-2" style="background-color: purple;">
Project 3
</div>
<div class="col-6 box-2" style="background-color: cyan;">
Project 5
</div>
</div>
</div>
</div>
</div>
what you missed was putting the first box and second set of boxes in a row class.
Update:
I noticed the code was missing closing body tag and starting head tag
Related
I'm building a sidebar using the grid system in Bootstrap 4, and the Flexbox utility. For the most part, I have it working, except that I would like to have the sidebar be "static," that is, it should not move when the user scrolls on the page next to it.
I attempted to do this by adding position:fixed to it, but when I did that, the column the sidebar was in was reduced in size to the length of the longest string that was there.
How do I make the sidebar stay fixed in place, while maintaining column width?
Here's my code: (It's a React app, so "class" is replaced with "className")
Parent component:
{ this.state.isLoggedIn ?
<div className="row h-100">
<div className="col-2 no-padding-right">
<Sidebar />
</div>
<div className="col-10 no-padding-left">
<Main />
</div>
</div> :
<Main />
}
The sidebar itself:
<div className="d-flex h-100 align-items-start sidebar-left flex-column sidebar-background sidebar-text">
<div className="p-2">
Week 11
</div>
<div className="mb-auto align-self-stretch h-100 p-2">Leagues/Teams</div>
<div className="p-2">Current Features</div>
<div className="p-2">Feature Request</div>
<div className="p-2">Settings</div>
<div className="p-2">Billing</div>
<div className="p-2">Log Out</div>
</div>
And the relevant piece of CSS:
.sidebar-left {
padding-top: 83px;
position: fixed;
}
Thanks!
Apply the max-width to the sidebar-left is equal to how much your col have.
.sidebar-left {
max-width: 16.666667%;
}
Stack Snippet
body {
margin: 0;
}
.sidebar-left {
font: 13px Verdana;
padding-top: 83px;
position: fixed;
background: red;
max-width: 16.666667%;
left: 0;
top: 0;
overflow: auto;
}
.p-2 {
word-break: break-word;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<div class="row h-100">
<div class="col-2 no-padding-right">
<div class="d-flex h-100 align-items-start sidebar-left flex-column sidebar-background sidebar-text">
<div class="p-2">
Week 11
</div>
<div class="mb-auto align-self-stretch h-100 p-2">Leagues/Teams</div>
<div class="p-2">Current Features</div>
<div class="p-2">Feature Request</div>
<div class="p-2">Settings</div>
<div class="p-2">Billing</div>
<div class="p-2">Log Out</div>
</div>
</div>
<div class="col-10 no-padding-left">
<div class="main"></div>
</div>
</div>
I'm trying to achieve a layout like below in Bootstrap but am having a difficult time with it. I feel dumb asking this but it's my first time using Bootstrap and I couldn't find a similar example on here.
Thanks!
I thought maybe something like this, but div C clears div B and ends up way too far down the page.
<div class="container">
<div class="row">
<div class="col-md-8">
A
</div>
<div class="col-md-4">
B
</div>
</div>
<div class="row">
<div class="col-md-8">
C
</div>
</div>
</div>
If you need a pure bootstrap solution you need to add col-xs-12 to make it 100% on mobiles and col-sm-6 to make it 50% on desktop. The add pull-left and pull-right to avoid the B panel to clear and move C below everything
.bg-danger, .bg-primary {
height: 200px;
}
.bg-success {
height: 400px;
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div class="container">
<div class="row container-fluid">
<div class="col-sm-6 col-xs-12 bg-danger pull-left"></div>
<div class="col-sm-6 col-xs-12 bg-success pull-right"></div>
<div class="col-sm-6 col-xs-12 bg-primary pull-left"></div>
</div>
</div></body>
</html>
Click full page to see the difference
Here we have an explanation about the grid system.
http://getbootstrap.com/css/#grid
Here's a simple solution:
<div class="container">
<div class="row">
<div class="col-sm-6">
<div class="row">
<div class="col-sm-12">
</div>
<div class="col-sm-12">
</div>
</div>
</div>
<div class="col-sm-6">
</div>
</div>
</div>
The page is split in half with the two outer columns "col-sm-6", with one of these columns containing two inner columns that span it's entire width
A simple solution if you want essentailly the green box to come in between.
Check this Bootply for responsive-ness check.
Snippet here:
.something {
height: 100px;
margin-top: 10px;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="something bg-danger"></div>
</div>
<div class="col-md-6">
<div class="something bg-success"></div>
</div>
<div class="col-md-6">
<div class="something bg-primary"></div>
</div>
</div>
</div>
Here is another example where the Green box will come below the rest two boxes..:
.something {
height: 100px;
margin-top: 10px;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div clas="col-md-6">
<div class="col-md-12">
<div class="something bg-danger"></div>
</div>
<div class="col-md-12">
<div class="something bg-primary"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="something bg-success"></div>
</div>
</div>
</div>
You should use Pure CSS Flexbox for this.
Have a look at the snippet below (use full screen for desktop mode):
.box-holder {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
flex-wrap: wrap;
width: 300px;
height: 280px;
}
.box {
display: flex;
justify-content: center;
align-items: center;
width: 100px;
height: 100px;
border: 1px solid #000;
color: #fff;
margin: 15px;
font-size: 40px;
font-weight: 200;
}
.a {
background: red;
}
.b {
align-self: flex-start;
order: 1;
background: green;
height: 240px;
margin: 0;
}
.c {
background: blue;
}
/* On Mobiles */
#media screen and (max-width: 700px) {
.box-holder {
width: auto;
height: auto;
}
.b {
align-self: center !important;
order: 0;
margin: 15px;
}
}
<div class="box-holder">
<div class="box a">A</div>
<div class="box b">B</div>
<div class="box c">C</div>
</div>
Hope this helps!
I hope this helps..:)
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-sm-3"><!--div for the left side abc pattern starts-->
<div class="row">
<div class="col-sm-12">
"standing a"
</div>
</div>
<div class="row">
<div class="col-sm-12">
"standing b - adjust the height of this block"
</div>
</div>
<div class="row">
<div class="col-sm-12">
"standing c"
</div>
</div>
</div><!-- div for the left side abc pattern ends -->
<div class="col-sm-6"><!-- div for the right side abc pattern starts -->
<div class="row">
<div class="col-sm-6">
<div class="row">
<div class="col-sm-12">
"block a"
</div>
</div>
<div class="row">
<div class="col-sm-12">
"block b"
</div>
</div>
</div>
<div class="col-sm-6">
"block c"
</div>
</div>
</div><!-- div for the right side abc pattern ends -->
</div><!-- row closed here -->
</div>
In my code,
Within one container Three blocks will be there. one freezes on the left and one freezes on the right and the other will scroll in between these two divs. Just like modern grids. But I don't want to use the grid.
I have tried, but the center block is not getting the Horizontal scroll.
I want no breakage of the center block, instead, it should scroll horizontally.
* {
box-sizing: border-box;
}
.container {
width: 100%;
overflow: auto;
white-space: nowrap
}
.scroll-center {
width: auto;
overflow: auto;
display: block;
white-space: nowrap
}
.row {
float: left;
}
.cell {
padding: 3px;
border: 1px solid #bbb;
min-height: 25px;
min-width: 200px;
}
<div class="container">
<div class="row">
<div class="cell">HeaderL1</div>
<div class="cell">HeaderL2</div>
<div class="cell">HeaderL3</div>
</div>
<div class="scroll-center">
<div class="row">
<div class="cell">HeaderT2</div>
<div class="cell">Data21</div>
<div class="cell">Data22</div>
</div>
<div class="row">
<div class="cell">HeaderT3</div>
<div class="cell">Data31</div>
<div class="cell">Data32</div>
</div>
<div class="row">
<div class="cell">HeaderT4</div>
<div class="cell">Data41</div>
<div class="cell">Data42</div>
</div>
<div class="row">
<div class="cell">HeaderT5</div>
<div class="cell">Data51</div>
<div class="cell">Data52</div>
</div>
<div class="row">
<div class="cell">HeaderT6</div>
<div class="cell">Data61</div>
<div class="cell">Data62</div>
</div>
<div class="row">
<div class="cell">HeaderT7</div>
<div class="cell">Data71</div>
<div class="cell">Data72</div>
</div>
<div class="row">
<div class="cell">HeaderT8</div>
<div class="cell">Data81</div>
<div class="cell">Data82</div>
</div>
<div class="row">
<div class="cell">HeaderT9</div>
<div class="cell">Data91</div>
<div class="cell">Data92</div>
</div>
</div>
<div class="right">
<div class="row">
<div class="cell">HeaderTR</div>
<div class="cell">DataR1</div>
<div class="cell">DataR2</div>
</div>
</div>
</div>
You probably need to add width to your container. Right now it's set to 100% so it will not size beyond the browser window. Instead you could do something like this:
.container {
overflow: auto;
white-space: nowrap;
width:2000px;
}
I realize that you may need to change this value dynamically but hopefully this gets you started
Example:http://codepen.io/nilestanner/pen/jAjbdK
Try with For example:
css:
* {
box-sizing: border-box;
}
.left, .center, .right{
float:left
}
.center {
width:400px;
overflow: scroll;
display: block;
white-space: nowrap
}
#center-scroll{
width:2000px;
}
.center .row{
display:inline-block;
width:33%;
}
.center .row .cell{
min-width:100%;
}
.row{
float:left;
}
.cell {
padding: 3px;
border: 1px solid #bbb;
min-height: 25px;
min-width: 200px;
}
HTML
<div class="container">
<div class="left">
<div class="row" >
<div class="cell">HeaderL1</div>
<div class="cell">HeaderL2</div>
<div class="cell">HeaderL3</div>
</div>
</div>
<div class="center">
<div id="center-scroll">
<div class="row">
<div class="cell">HeaderT2</div>
<div class="cell">Data21</div>
<div class="cell">Data22</div>
</div>
<div class="row">
<div class="cell">HeaderT3</div>
<div class="cell">Data31</div>
<div class="cell">Data32</div>
</div>
<div class="row">
<div class="cell">HeaderT4</div>
<div class="cell">Data41</div>
<div class="cell">Data42</div>
</div>
<div class="row">
<div class="cell">HeaderT5</div>
<div class="cell">Data51</div>
<div class="cell">Data52</div>
</div>
<div class="row">
<div class="cell">HeaderT6</div>
<div class="cell">Data61</div>
<div class="cell">Data62</div>
</div>
<div class="row">
<div class="cell">HeaderT7</div>
<div class="cell">Data71</div>
<div class="cell">Data72</div>
</div>
<div class="row">
<div class="cell">HeaderT8</div>
<div class="cell">Data81</div>
<div class="cell">Data82</div>
</div>
<div class="row">
<div class="cell">HeaderT9</div>
<div class="cell">Data91</div>
<div class="cell">Data92</div>
</div>
</div>
</div>
<div class="right">
<div class="row">
<div class="cell">HeaderTR</div>
<div class="cell">DataR1</div>
<div class="cell">DataR2</div>
</div>
</div>
</div>
I've seen this thread but its for 2 column (col-md-6) and I've tried the jsfidlle too for 3 column but column 1st and column 2nd become stack.
Bootstrap 3 Align Text To Bottom of Div
what I want for my project is
.row {
position: relative;
}
.bottom-align-text {
position: absolute;
bottom: 0;
right: 0;
}
<div class="container">
<div class="row">
<div class="bottom-align-text col-sm-4">
<h3>Some Text</h3>
</div>
<div class="col-sm-4">
<img src="//placehold.it/600x300" alt="Logo" class="img-responsive"/>
</div>
<div class="bottom-align-text col-sm-4">
<h3>Some Text</h3>
</div>
</div>
</div>
how to make them both align bottom?
flexbox can do that
.row div {
border: 1px solid red;
}
.flexy {
display: flex;
text-align: center;
}
.flexy .bottom-align-text {
display: flex;
justify-content: center;
align-items: flex-end;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row flexy">
<div class="bottom-align-text col-sm-4">
<h3>Some Text</h3>
</div>
<div class="col-sm-4">
<img src="//placehold.it/600x300" alt="Logo" class="img-responsive" />
</div>
<div class="bottom-align-text col-sm-4">
<h3>Some Text</h3>
</div>
</div>
</div>
You can wrap column 1st and column 2nd in to a row then we'll have 2 columns structure. See my jsFiddle demo: https://jsfiddle.net/robinhuy/kg1ykfL1/3/
I want to achieve a grid like the shown below:
I have been looking to Twitter Bootstrap grid system, but since it is oriented to rows, I can't see how to achieve this.
Is there any way of doing it, or should I stick to manually css?
You can nest Rows and cols:
<div class="row">
<div class="col-md-9">
<div class="row">
<div class="col-md-12">left top</div>
<div class="col-md-12">left bottom</div>
</div>
</div>
<div class="col-md-3">
<div class="row">
<div class="col-md-12">right top</div>
<div class="col-md-12">right bottom</div>
</div>
</div>
</div>
See http://getbootstrap.com/css/#grid under "Nesting Columns"
You can still use Bootstrap grid with some custom styles:
.block {
border: 3px #222 solid;
padding: 10px;
margin-bottom: 10px;
}
.block-1 {
height: 100px;
}
.block-2 {
height: 50px;
}
.block-3 {
height: 50px;
}
.block-4 {
height: 100px;
}
<link data-require="bootstrap-css#*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<div class="container">
<div class="row">
<div class="col-xs-8">
<div class="block block-1">Block 1</div>
<div class="block block-2">Block 2</div>
</div>
<div class="col-xs-4">
<div class="block block-3">Block 3</div>
<div class="block block-4">Block 4</div>
</div>
</div>
</div>
Just set 2 parents width col-xs-* with children
main{padding: 20px}
section, article{display: inline}
article, div{border: 4px solid black; margin-bottom: 10px}
article:nth-child(1){height: 80px}
article:nth-child(2){height: 40px}
div:nth-child(1){height: 30px}
div:nth-child(2){height: 90px}
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<main class=row>
<section class="col-xs-8">
<article></article>
<article></article>
</section>
<aside class="col-xs-4">
<div></div>
<div></div>
</aside>
</main>
Read more about Grid system .