I was trying to make three equal columns in js fiddle and they display as separate rows for some reason. What have I done wrong?
JSFiddle
<div class="container">
<div class="row">
<div class="col-md-4">
cczfsd
</div>
<div class="col-md-4">
sfdfds
</div>
<div class="col-md-4">
sdfssd
</div>
</div>
</div>
hi as your is working perfect for the desktop screens properly it is not working for the mobile,tablet and other small resolution devices so that you can't getting done your output
i think there is no issue of including the bootstrap's css again because it's already loaded i think issue is with this of managing the screen wise
here is the code may you want the output please look it out'
.temp{
background-color:#e2e2e2;
border:1px solid grey;
}
<div class="container">
<div class="row">
<div class="col-md-4 col-xs-4 col-sm-4 temp">
cczfsd
</div>
<div class="col-md-4 col-xs-4 col-sm-4 temp">
sfdfds
</div>
<div class="col-md-4 col-xs-4 col-sm-4 temp">
sdfssd
</div>
</div>
</div>
and here is the demo working code for this
DEMO CODE
In this case, flex display would come in handy.
<div class="container">
<div class="row">
<div>cczfsd</div>
<div>sfdfds</div>
<div>sdfssd</div>
</div>
</div>
CSS
.row {
display:flex;
}
If you are not using boostrap, add following css to get the correct output.
.col-md-4 {
width: 33.3333%;
float:left;
}
JsFiddle
Make sure whether you have included bootstrap css properly in that html else check that link is working properly.
Add bootstrap in fidlle
#import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
Then re-size the output box.` Works as intended.
Related
I am struggling adding spacing (or margin) between columns using the grid system in bootstrap. My html and css is below. I could not get any of the solutions posted online to work. The goal is spacing between col-8 and col-4. Any suggestions? Thanks!
HTML:
<div class="container">
<div class="row">
<div class="col-md-8">
hello
</div>
<div class="col-md-4">
<div class="row" align="center">
<div class="col-md-4">
<img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/github_circle_black-128.png" class="icon-resize" alt="github">
</div>
<div class="col-md-4">
<img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/linkedin_circle_black-128.png" class="icon-resize" alt="linkedin">
</div>
<div class="col-md-4">
<img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/twitter_circle_black-128.png" class="icon-resize" alt="twitter">
</div>
</div>
</div>
</div>
</div>
CSS:
.container {
max-width: 960px;
height: 100%;
}
here is what you're looking for:
gridGutterWidth
It's usual to download the raw (.scss or .less) versions of bootstrap, so you can control the css output at build time. If you don't use any of them, you may find the http://getbootstrap.com/customize/ comfortable.
You could apply inline by
<div class="col-md-4" style="padding-left:1em">
Here is an example of my issue: JS Fiddle
I have something like the following:
<div class="container">
<div class="col-sm-10 col-sm-offset-1">
<div class="row">
<div class="col-xs-12">
<div class="big-box">image</div>
</div>
</div>
</div>
</div>
I want the inner <div class="col-xs12"> to be the default size for the container. But the 'parent' div is taking over (as expected). How can I stop this without removing the parent?
In the JS Fiddle you can see what I am attempting to do.
I fixed this by doing the following:
.col-sm-expand-2 {
width: 120%;
margin-left: -10%;
}
Updated JSFiddle
I have managed to create a page that looks like this:
<div class="container">
<div class="row fullscreen">
<div class="col-md-6 pink-panel">
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-12 gray-panel">
</div>
</div>
<div class="row">
<div class="col-md-6 orange-panel">
</div>
<div class="col-md-6 black-panel">
</div>
</div>
</div>
</div>
</div>
You can view it here
The problem I have is that I would like to have a small margin between each panel (right and top). If I add top margin I get this:
http://codepen.io/r3plica/pen/jPVQqy
which you can see makes the rows not line up anymore, which is not what I want. Similarly, if I add a right margin, predictably I get this:
http://codepen.io/r3plica/pen/NqbErr
Now I know the reason for both these issues. I could try and write some JavaScript to help me fix the issue, but I would prefer to solve this in pure CSS.
Has anyone encountered this issue before and solved it?
you could nest your color-panels
<div class="container">
<div class="row fullscreen">
<div class="col-md-6">
<div class="col-md-12">
<div class="pink-panel">
</div>
</div>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-12">
<div class="gray-panel">
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="orange-panel">
</div>
</div>
<div class="col-md-6">
<div class="black-panel">
</div>
</div>
</div>
</div>
</div>
</div>
https://jsfiddle.net/0z76regv/
You must remember that bootstrap uses specific margins and paddings for its layout (e.g. negative margins for row classes) To fit elements in desired way you should remember that each col-* block has its width described in percentage.
I would suggest two solutions:
Overloading default percentage for columns if you don't mind changing 5px to arbitrary values. You could e.g. set col-md-6 classes to use only 49.5% of its width and remaining 0.5% for margins.
http://codepen.io/anon/pen/QbGJgp
.col-md-6 {
width: 49.5%;
margin-right: 0.5%;
}
.row {
margin-bottom: 0.5%;
}
Using calc() function to substract aforementioned 5px from proper elements. More info: https://developer.mozilla.org/en-US/docs/Web/CSS/calc, however this functionality isn't very compatible with older browsers: http://caniuse.com/#feat=calc.
http://codepen.io/anon/pen/yNVQoz
.col-md-6 {
width: calc(50% - 5px);
margin-right: 5px;
}
I have found myself fumbling around with this odd layout that I need to design using Bootstrap.
Imagine the size of this is 660 x 330 wide, What I want to do is without any padding between anything is have an image on the left side that fills the black color 100%. The size of this will never change, on screens that it doesn't fit it will be using a different layout (so this will only really be on small+ screen sizes.
Here is what I originally was thinking, but since the image doesn't necessarily fit a column width, this will not work. Would it be best to create a container that is exactly 660x330 and then use rows/columns inside that? Or maybe I should step away from bootstrap in this case. Thanks in advance for any advice.
<div class="row">
<div class="col-xs-6">
<img src="../images/temp-featurelarge.jpg"/>
</div>
<div class="col-xs-6">
<div class="row">
</div>
<div class="row">
<div class="col-xs-6">
</div>
<div class="col-xs-6">
</div>
</div>
</div>
Yes, you can create a div with specific Width and Height and then use columns to split. But here in your case I guess if you use "width: 50%" for the inner divs that would be fine and it's not necessary to use Bootstrap columns.
View my demo on jsfiddle
<div class="row">
<div class="col-xs-6">
<div class="left">
asdfdasf
</div>
</div>
<div class="col-xs-6 no_padding">
<div class="row">
<div class="col-xs-12 no_padding">
<div class="right_top">
asfjldfj
</div>
</div>
</div>
<div class="row">
<div class="col-xs-6 no_padding">
<div class="bottom_left">Dfdsaf</div>
</div>
<div class="col-xs-6 no_padding">
<div class="bottom_right">Dfdsaf</div>
</div>
</div>
</div>
Css=============>
body{
color:#FFF;
}
.left{
background:black;
height:300px;
}
.right_top{
background:red;
height:150px;
}
.bottom_left{
background:pink;
height:150px;
}
.no_padding{
padding:0;
}
.bottom_right{
background:blue;
height:150px;
}
I'm using the Bootstrap CSS Grid System for the first time and I have noticed that in Google Chrome when I resize the window (from small to large) the design is responsive and fluid with the Divs keeping their ratio size. In Mozilla Firefox this isn't the case, although the class="container-fluid" Divs will stretch with the resize the Divs within the row class divs keep their small sizes (they don't get any larger, don't stretch). I tried adding .col-sm-* after the .col-xs-* classes but this has no effect / makes no difference (see the comment in the code). Am I making a silly, nubie error? Can anyone answer my issue whilst I go through the Bootstrap Documentation?
<header>
<div class="container-fluid header">
<div class="row">
<div class="col-xs-2">☰</div>
<div class="col-xs-8 text-center">
<img src="../img/some-image.png" alt="Some Image">
<span class="strapline">Nice Strap line</span>
</div>
<div class="col-xs-2 col-sm-2 text-right"> + </div>
</div>
</div>
<div class="container-fluid search">
<div class="row">
<div class="col-xs-3"></div>
<div class="col-xs-6 text-center"></div>
<div class="col-xs-3 text-right"></div>
</div>
</div>
<!--col-sm-* added here... -->
<div class="container-fluid filter-menu">
<div class="row">
<div class="col-xs-4 col-sm-4 filter-buttons">
Menu Button 1
<span class="filter-green">12.03.14, 12:30</span>
</div>
<div class="col-xs-4 col-sm-4 filter-buttons">
Menu Filter
<span class="green-count">1</span>
</div>
<div class="col-xs-4 col-sm-4 filter-buttons-last">
Sort By
<span class="filter-green">Rating</span>
</div>
</div>
</div>
</header>
Please note that .filter-green, filter-buttons, .filter-menu, .text-center, .text-right, .header and .search are custom CSS classes that I have produced and these don't have any conflict with the Bootstrap Grid
UPDATE **
Please note that I think I may have to use the .row-fluid class and the make columns the same height I added the following overwrite on the following bootstrap class
// bootstrap overwrite...
.row {
display: table;
}
[class*="col-"] {
// float: none;
display: table-cell;
vertical-align: top;
}
I just started using the .row-fluid class instead of .row and I removed my clearfix overwrite which is above. Problem solved!