demo: http://www.bootply.com/drT0TDRetE
How can I reduce the gutter between the yellow blocks? I want the red div to align properly on top of the yellow blocks like it currently is. I tried reducing the padding for the columns but then the red div does not align properly.
<div class="container">
<div class="row">
<div class=" col-xs-3 ">
<div class="side-menu">1
<br>2
<br>3</div>
</div>
<div class="col-xs-9">
<div class=" menu ">
menu options here
</div>
<div class="row ">
<div class="col-xs-4 ">
<div class="food-item "></div>
</div>
<div class="col-xs-4 ">
<div class="food-item "></div>
</div>
<div class="col-xs-4 ">
<div class="food-item "></div>
</div>
</div>
</div>
</div>
</div>
CSS
.food-item {
width: 100 % ;
background: red;
height: 200px;
background: yellow;
}
.menu {
background: red;
}
.side-menu {
background: green;
}
DEMO http://www.bootply.com/chuUEA13P4
You have to reduce the padding and the row margin to match:
[class*="col-"].gutter-5 {padding-left:5px;padding-right:5px;}
.row.gutter-5 {margin-left:-5px;margin-right:-5px}
HTML
<div class="container">
<div class="row">
<div class=" col-xs-3 ">
<div class="side-menu">1
<br>2
<br>3</div>
</div>
<div class="col-xs-9 gutter-5">
<div class=" menu ">
menu options here
</div>
<div class="row gutter-5">
<div class="col-xs-4 gutter-5 ">
<div class="food-item "></div>
</div>
<div class="col-xs-4 gutter-5 ">
<div class="food-item "></div>
</div>
<div class="col-xs-4 gutter-5">
<div class="food-item "></div>
</div>
</div>
</div>
</div>
</div>
Related
I'm using bootstrap 3.
What I'm trying to do in .cshtml create a 'sticky div'
what I've tried until this time https://jsfiddle.net/r41vunwb/
I don't understand why the sticky part doesn't pass to the next row.
here is my minimized code part
div.sticky {
position: sticky !important;
top: 0;
align-self: flex-start;
height: auto;
}
<div class="panel-body">
<div class="row" style="text-align-last:center">
<div class="col-lg-4 col-md-4 col-sm-4" style="border-style:groove; border-bottom-style:none;">
<div class="sticky" style="font-weight:bold; font-size:20px; background-color:#c9e8ff"> AAAAAA </div>
<div style="border-top:groove">
<p style="margin-bottom:-5px; font-weight:bold;">Ratio1</p>
</div>
<div id="chartdivE_i" style="min-height:400px"></div>
</div>
</div>
<div class="row" style="text-align-last:center">
<div class="col-lg-4 col-md-4 col-sm-4" style="border-style:groove; border-top-style:none; border-bottom-style:none;">
<div style="border-top:groove">
<p style="margin-bottom:-5px; font-weight:bold;">Ratio2</p>
</div>
<div id="chartdivK_i" style="min-height:400px"></div>
</div>
</div>
<div class="row" style="text-align-last:center">
<div class="col-lg-4 col-md-4 col-sm-4" style="border-style:groove; border-top-style:none; border-bottom-style:none;">
<div style="border-top:groove">
<p style="margin-bottom:-5px; font-weight:bold;">Ratio3</p>
</div>
<div id="chartdivT_i" style="min-height:400px"></div>
</div>
</div>
<div class="row" style="text-align-last:center">
<div class="col-lg-4 col-md-4 col-sm-4" style="border-style:groove; border-top-style:none;">
<div style="border-top:groove">
<p style="margin-bottom:-5px; font-weight:bold;">Ratio4</p>
</div>
<div id="chartdivP_i" style="min-height:400px"></div>
</div>
</div>
</div>
thank you for all
Because your sticky div is inside the first row. Move it up under the panel-body: jsfiddle
div.sticky {
position: sticky !important;
top: 0;
align-self: flex-start;
height: auto;
}
<div class="panel-body">
<div class="sticky" style="font-weight:bold; font-size:20px; background-color:#c9e8ff"> AAAAAA </div>
<div class="row" style="text-align-last:center">
<div class="col-lg-4 col-md-4 col-sm-4" style="border-style:groove; border-bottom-style:none;">
<div style="border-top:groove">
<p style="margin-bottom:-5px; font-weight:bold;">Ratio1</p>
</div>
<div id="chartdivE_i" style="min-height:400px"></div>
</div>
</div>
<div class="row" style="text-align-last:center">
<div class="col-lg-4 col-md-4 col-sm-4" style="border-style:groove; border-top-style:none; border-bottom-style:none;">
<div style="border-top:groove">
<p style="margin-bottom:-5px; font-weight:bold;">Ratio2</p>
</div>
<div id="chartdivK_i" style="min-height:400px"></div>
</div>
</div>
<div class="row" style="text-align-last:center">
<div class="col-lg-4 col-md-4 col-sm-4" style="border-style:groove; border-top-style:none; border-bottom-style:none;">
<div style="border-top:groove">
<p style="margin-bottom:-5px; font-weight:bold;">Ratio3</p>
</div>
<div id="chartdivT_i" style="min-height:400px"></div>
</div>
</div>
<div class="row" style="text-align-last:center">
<div class="col-lg-4 col-md-4 col-sm-4" style="border-style:groove; border-top-style:none;">
<div style="border-top:groove">
<p style="margin-bottom:-5px; font-weight:bold;">Ratio4</p>
</div>
<div id="chartdivP_i" style="min-height:400px"></div>
</div>
</div>
</div>
I have this HTML:
<div class="container">
<div class="box center-block">
<div class="row">
<div class="col-md-4 col-xs-4">
<div class="thumbnail">A</div>
</div>
<div class="col-md-4 col-xs-4">
<div class="thumbnail">A</div>
</div>
<div class="col-md-4 col-xs-4">
<div class="thumbnail">A</div>
</div>
</div>
<div class="row">
<div class="col-md-4 col-xs-4">
<div class="thumbnail">A</div>
</div>
<div class="col-md-4 col-xs-4">
<div class="thumbnail">A</div>
</div>
<div class="col-md-4 col-xs-4">
<div class="thumbnail">A</div>
</div>
</div>
<div class="row">
<div class="col-md-4 col-xs-4">
<div class="thumbnail">A</div>
</div>
<div class="col-md-4 col-xs-4">
<div class="thumbnail">A</div>
</div>
<div class="col-md-4 col-xs-4">
<div class="thumbnail">A</div>
</div>
</div>
</div>
</div>
And CSS:
.box {
width: 300px;
padding-top: 100px;
}
.row > div > div {
width: 100px;
height: 100px;
margin: 0px;
}
I'm also using bootsrap (version 3).
I was able to remove margin between rows, but can't remove margin between columns. Is there a way to force it somehow?
I need all "squares" next to each other without any margins (both between rows and columns).
You can see how it looks here: https://jsfiddle.net/a91zujkj/
If you really want to use col- class, make sure to set the .thumbnail elements width to 100% and use a no-padding class on the col- elements.
Here is an example:
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
.box {
width: 300px;
padding-top: 100px;
}
.no-padding {
padding-left: 0;
padding-right: 0;
}
.thumbnail {
width: 100%;
height: 100px;
margin: 0;
}
<div class="container">
<div class="box center-block">
<div class="row">
<div class="col-md-4 col-xs-4 no-padding">
<div class="thumbnail">A</div>
</div>
<div class="col-md-4 col-xs-4 no-padding">
<div class="thumbnail">A</div>
</div>
<div class="col-md-4 col-xs-4 no-padding">
<div class="thumbnail">A</div>
</div>
</div>
<div class="row">
<div class="col-md-4 col-xs-4 no-padding">
<div class="thumbnail">A</div>
</div>
<div class="col-md-4 col-xs-4 no-padding">
<div class="thumbnail">A</div>
</div>
<div class="col-md-4 col-xs-4 no-padding">
<div class="thumbnail">A</div>
</div>
</div>
<div class="row">
<div class="col-md-4 col-xs-4 no-padding">
<div class="thumbnail">A</div>
</div>
<div class="col-md-4 col-xs-4 no-padding">
<div class="thumbnail">A</div>
</div>
<div class="col-md-4 col-xs-4 no-padding">
<div class="thumbnail">A</div>
</div>
</div>
</div>
</div>
You actually do not need to use col- classes at all and floats are not needed either. Another way to do this is using display: inline-block.
Here is how that looks:
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
.wrapper {
width: 300px;
padding-top: 100px;
margin: 0 auto;
font-size: 0;
}
.item {
border: 1px solid #eee;
width: 100px;
height: 100px;
display: inline-block;
font-size: initial;
}
<div class="wrapper">
<div class="item">A</div>
<div class="item">A</div>
<div class="item">A</div>
<div class="item">A</div>
<div class="item">A</div>
<div class="item">A</div>
<div class="item">A</div>
<div class="item">A</div>
<div class="item">A</div>
</div>
And if you're really brave you could also use CSS Grid layout. ;)
CSS Grid Layout
CSS Grid layout excels at dividing a page into major regions, or defining the relationship in terms of size, position, and layer, between parts of a control built from HTML primitives.
Here is how that goes:
.wrapper {
padding-top: 100px;
width: 300px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(3,100px);
grid-template-rows: repeat(3,100px);
}
.item {
border: 1px solid #ddd;
height: 100px;
width: 100px;
}
<div class="wrapper">
<div class="item">A</div>
<div class="item">A</div>
<div class="item">A</div>
<div class="item">A</div>
<div class="item">A</div>
<div class="item">A</div>
<div class="item">A</div>
<div class="item">A</div>
<div class="item">A</div>
</div>
It's because .col-*-4 is wider than 100px, which is the width you've defined for the .thumbnail elements.
You can just remove the .col-* classes and use .pull-left instead.
.box {
width: 300px;
padding-top: 100px;
}
.row > div > div {
width: 100px;
height: 100px;
margin: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="box center-block">
<div class="row">
<div class="pull-left">
<div class="thumbnail">A</div>
</div>
<div class="pull-left">
<div class="thumbnail">A</div>
</div>
<div class="pull-left">
<div class="thumbnail">A</div>
</div>
</div>
<div class="row">
<div class="pull-left">
<div class="thumbnail">A</div>
</div>
<div class="pull-left">
<div class="thumbnail">A</div>
</div>
<div class="pull-left">
<div class="thumbnail">A</div>
</div>
</div>
<div class="row">
<div class="pull-left">
<div class="thumbnail">A</div>
</div>
<div class="pull-left">
<div class="thumbnail">A</div>
</div>
<div class="pull-left">
<div class="thumbnail">A</div>
</div>
</div>
</div>
</div>
Remove padding-left and padding-right for .col classes and then change width: 100px; to width: 100%; for .row > div > div
.box {
width: 300px;
padding-top: 100px;
}
.padding-0{
padding-right:0 !important;
padding-left:0 !important;
}
.row > div > div {
width: 100%;
height: 100px;
margin: 0px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="box center-block">
<div class="row">
<div class="col-md-4 col-xs-4 padding-0">
<div class="thumbnail">A</div>
</div>
<div class="col-md-4 col-xs-4 padding-0">
<div class="thumbnail">A</div>
</div>
<div class="col-md-4 col-xs-4 padding-0">
<div class="thumbnail">A</div>
</div>
</div>
<div class="row">
<div class="col-md-4 col-xs-4 padding-0">
<div class="thumbnail">A</div>
</div>
<div class="col-md-4 col-xs-4 padding-0">
<div class="thumbnail">A</div>
</div>
<div class="col-md-4 col-xs-4 padding-0">
<div class="thumbnail">A</div>
</div>
</div>
<div class="row">
<div class="col-md-4 col-xs-4 padding-0">
<div class="thumbnail">A</div>
</div>
<div class="col-md-4 col-xs-4 padding-0">
<div class="thumbnail">A</div>
</div>
<div class="col-md-4 col-xs-4 padding-0">
<div class="thumbnail">A</div>
</div>
</div>
</div>
</div>
Row has it's own style and add margin to element, you can remove it by adding :
.box >.row{
margin:0;
}
I am trying to create a 3 by 3 black and white grid. But instead only black square is showing. I have tried using Bootstrap.
My one square of the grid should cover 3 grids space as per bootstrap grid system and I am using padding-top:100% to maintain the aspect ratio for the squares in the 3 by 3 grid.
body {
margin: 0;
color: pink;
}
.square {
width: 100%;
padding-top: 100%;
background-color: black;
}
.square-w {
width: 100%;
padding-top: 100%;
background-color: white;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<div class="square"></div>
</div>
<div class=" col-md-3 ">
<div class="square-w"></div>
</div>
<div class=" col-md-3 ">
<div class="square"></div>
</div>
</div>
<div class="row">
<div class=" col-md-3">
<div class="square-w"></div>
</div>
<div class="col-md-3 ">
<div class="square"></div>
</div>
<div class="col-md-3">
<div class="square-w"></div>
</div>
</div>
<div class="row">
<div class="col-md-3 ">
<div class="square"></div>
</div>
<div class="col-md-3 ">
<div class="square-w"></div>
</div>
<div class="col-md-3 ">
<div class="square"></div>
</div>
</div>
</div>
Your screen view might be too small.
Changing all the col-md-3 classes to col-sm-3 allows it to be shown on my view
JSFiddle: https://jsfiddle.net/2k5523ym/1/
You just need to put below code in css
.nopadding {
padding: 0 !important;
margin: 0 !important;
}
and then assign nopadding class to every col-md-3 div
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row">
<div class="col-md-3 nopadding">
<div class="square"></div>
</div>
<div class=" col-md-3 nopadding">
<div class="square-w"></div>
</div>
<div class=" col-md-3 nopadding">
<div class="square"></div>
</div>
</div>
<div class="row">
<div class=" col-md-3 nopadding">
<div class="square-w"></div>
</div>
<div class="col-md-3 nopadding">
<div class="square"></div>
</div>
<div class="col-md-3 nopadding">
<div class="square-w"></div>
</div>
</div>
<div class="row">
<div class="col-md-3 nopadding">
<div class="square"></div>
</div>
<div class="col-md-3 nopadding">
<div class="square-w"></div>
</div>
<div class="col-md-3 nopadding">
<div class="square"></div>
</div>
</div>
</div>
Hope this help you
I have created a jsFiddle. I want the border should be between both row lines but background color to like what its showing in js fiddle. How can I extend this column border line.
My Html
<div class="container top5">
<div class="row">
<div class="col-md-12 col-xs-12">
<div class="row">
<div class="col-md-3 col-xs-3 inner">
<div><b>Type</b></div>
</div>
<div class="col-md-3 col-xs-3 inner">
<div class=""><b>SMS</b></div>
</div>
<div class="col-md-3 col-xs-3 inner">
<div class=""><b>Email</b></div>
</div>
<div class="col-md-3 col-xs-3 inner-end">
<div class=""><b>Business Unit</b></div>
</div>
</div>
</div>
<div class="col-md-12 col-xs-12">
<div class="row border-between">
<div class="col-md-3 col-xs-3 inner">
<span>Another tesing text</span>
</div>
<div class="col-md-3 col-xs-3 inner">
<span> test</span>
</div>
<div class="col-md-3 col-xs-3 inner">
<span>Random text</span>
</div>
<div class="col-md-3 col-xs-3 inner-end">
<span>Random text</span>
</div>
</div>
</div>
</div>
</div>
And Css
.top5 {
margin-top: 50px;
}
.row {
border: 1px solid;
}
.row + .row {
border-top:0 ;
}
My Fiddle - https://jsfiddle.net/ff49tu79/13/
you may wanna use padding instead of margin in cells and use flex box to flex the div cells together
.top5 {
margin-top: 50px;
}
.row {
border: 1px solid;
}
.row + .row {
border-top: 0;
}
.flx {
display: flex;
}
.inner {
background: aliceblue;
border-right: 1px solid blue;
padding: 10px 15px;
}
.inner-end {
background: aliceblue;
padding: 10px 15px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container top5">
<div class="row">
<div class="col-md-12 col-xs-12">
<div class="row">
<div class="flx">
<div class="col-md-3 col-xs-3 inner">
<div><b>Type</b></div>
</div>
<div class="col-md-3 col-xs-3 inner">
<div class=""><b>SMS</b></div>
</div>
<div class="col-md-3 col-xs-3 inner">
<div class=""><b>Email</b></div>
</div>
<div class="col-md-3 col-xs-3 inner-end">
<div class=""><b>Business Unit</b></div>
</div>
</div>
</div>
</div>
<div class="col-md-12 col-xs-12">
<div class="row border-between">
<div class="flx">
<div class="col-md-3 col-xs-3 inner">
<span>Another tesing text</span>
<div>1</div>
<div>2</div>
</div>
<div class="col-md-3 col-xs-3 inner">
<span> test</span>
</div>
<div class="col-md-3 col-xs-3 inner">
<span>Random text</span>
</div>
<div class="col-md-3 col-xs-3 inner-end">
<span>Random text</span>
</div>
</div>
</div>
</div>
</div>
</div>
See JSFIDDLE
I have a responsive web layout based on bootstrap. These are my two layouts:
[1A] [1B] [1C]
[2A] [2B] [2C]
[3A] [3B] [3C]
This is the layout for small screens.
[1A]
[1B]
[1C]
[2A] [3A]
[2B] [3B]
[2C] [3C]
For the small screen, I have a box around the horizontal groups ( 2A & 3A, 2B & 3B etc.). However, on large screens, I would like the items grouped vertically, so all the A's are in a box, all the B's are in a box etc. How do I do this, as the tags need to skip several sections as the HTML is written. Please see my code below. How would I do this?
<div class="container-fluid PageView text-center">
<div class="row Page2">
<div class="col-sm-4">
<div class="glyphicon-ring"> <span class="glyphicon glyphicon-bullhorn glyphicon-bordered"></span>
</div>
</div>
<div class="col-sm-4">
<div class="glyphicon-ring"> <span class="glyphicon glyphicon-ok glyphicon-bordered"></span>
</div>
</div>
<div class="col-sm-4">
<div class="glyphicon-ring"> <span class="glyphicon glyphicon-phone glyphicon-bordered"></span>
</div>
</div>
<div class="col-sm-4">
<div class="box">
<div class="row">
<div class="col-xs-6 col-sm-12">
<h2><strong>Title 1</strong></h2>
</div>
<div class="col-xs-6 col-sm-12">
<p class="lead">Text1</p>
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="box">
<div class="row">
<div class="col-xs-6 col-sm-12">
<h2><strong>Title 2</strong></h2>
</div>
<div class="col-xs-6 col-sm-12">
<p Text 2</p>
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="box">
<div class="row">
<div class="col-xs-6 col-sm-12">
<h2><strong>Title 3</strong></h2>
</div>
<div class="col-xs-6 col-sm-12">
<p class="lead">Text 3</p>
</div>
</div>
</div>
</div>
</div>
EDIT
Using this code, I get the following result:
#media (min-width:769px){ /*use a value for your breakpoint*/
.Page2 > *{border:5px solid white; background:#3DBEAF; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; }
.Page2 > *:nth-child(-n+3){border-bottom:0; }
.Page2 > *:nth-last-child(-n+3){border-top:0;}
}
How do I make sure only the outside 4 corners are rounded? Also, any ideas why there is a line down the middle of the block?
Add a border around all of them and then target the first three/last three to customize the bottom/top border.
#media (min-width:769px){ /*use a value for your breakpoint*/
.Page2 > *{border:1px solid #999;}
.Page2 > *:nth-child(-n+3){border-bottom:0;}
.Page2 > *:nth-last-child(-n+3){border-top:0;}
}
updated code after comment
#media (min-width:769px){ /*use a value for your breakpoint*/
.Page2 > *{border:5px solid white;background:#3DBEAF;}
.Page2 > *:nth-child(-n+3){
border-bottom:0;
border-top-left-radius:10px;
border-top-right-radius:10px;
}
.Page2 > *:nth-last-child(-n+3){
border-top:0;
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;
}
}
Updated demo
#media (min-width: 769px) {
/*use a value for your breakpoint*/
.Page2 > * {
border: 5px solid white;
background: #3DBEAF;
}
.Page2 > *:nth-child(-n+3) {
border-bottom: 0;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.Page2 > *:nth-last-child(-n+3) {
border-top: 0;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid PageView text-center">
<div class="row Page2">
<div class="col-sm-4">
<div class="glyphicon-ring">1A <span class="glyphicon glyphicon-bullhorn glyphicon-bordered"></span>
</div>
</div>
<div class="col-sm-4">
<div class="glyphicon-ring">1B <span class="glyphicon glyphicon-ok glyphicon-bordered"></span>
</div>
</div>
<div class="col-sm-4">
<div class="glyphicon-ring">1C <span class="glyphicon glyphicon-phone glyphicon-bordered"></span>
</div>
</div>
<div class="col-sm-4">
<div class="box">
<div class="row">
<div class="col-xs-6 col-sm-12">
<h2><strong>2A Title 1</strong></h2>
</div>
<div class="col-xs-6 col-sm-12">
<p class="lead">3A Text1</p>
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="box">
<div class="row">
<div class="col-xs-6 col-sm-12">
<h2><strong>2B Title 2</strong></h2>
</div>
<div class="col-xs-6 col-sm-12">
<p class="lead">3B Text 2</p>
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="box">
<div class="row">
<div class="col-xs-6 col-sm-12">
<h2><strong>2C Title 3</strong></h2>
</div>
<div class="col-xs-6 col-sm-12">
<p class="lead">3C Text 3</p>
</div>
</div>
</div>
</div>
</div>
</div>