I've not thought about this massively and I'm probably missing something very obvious but how does one properly apply background colours to '.row'
The code I've been using:
<div class="row">
<div class="col-lg-4 white-flood">
</div>
</div>
However this only applies to columns. I've tried wrapping them in a div, applying the style to the .row class among other things
Thanks :)
EDIT:
This should help people find out what my issue is (applying to .row should do the trick but something in my code is stopping it from working). The 4 thumb links should have awhite background.
Click here for site
Two options:
1) Set the background color to the row:
<div class="row white-flood">
<div class="col-lg-4"></div>
</div>
2) You need to use table layout
<div class="row" style="display: table">
<div class="col-lg-4 white-flood" style="float: none; display: table-cell"></div>
</div>
But this will slightly break the bootstrap design, as the table cant have a negative margin.
Added position: relative to my flood class and it worked...
I believe it is something to do with my responsive background intefering.
Related
I must be missing something obvious here, but I am a beginner with Bootstrap and I have no idea what it could be. I'm trying to get this picture and the adjacent paragraph to stack vertically on xs screens. No matter what I do, they just line up alongside each other, pushing the picture to the edge of the screen. Here's a picture of what is happening, and my code.
<div class="row para-text vertical-align">
<div class="col-xs-12 col-md-8 col-md-push-4">
<p>text....</p>
</div>
<div class="clearfix visible-sm-block"></div>
<div class="col-xs-12 col-md-4 col-md-pull-8">
<img class="img-full" src="img/artesia1.jpg" alt="">
</div>
</div>
Here are the css styles I've added, in case those are causing problems
.para-text {
padding:15px;
}
.vertical-align {
display: flex;
align-items: center;
}
I would recommend not using your css classes that you posted. When I did a simple example with your html code but no css, it seems to work fine:
Please see: http://www.bootply.com/GCu0vDtk6K
Note: I also removed your:
<div class="clearfix visible-sm-block"></div>
Looks like my problem was using Flexbox. I've opted out of using it and am going to find a different way to vertical align the image so that I can have better browser support.
I'm using a div with class "col-lg-9", inside that div there are two columns with a class of "col-lg-6" for each one. it works good but the issue is that there is no margin between the columns.
To see things visually, I've added a grey background to the main column. Notice how is no margin between the blue and the pink columns.
Please see the issue in this pic:
Live link:
https://dl.dropboxusercontent.com/u/35853519/basmaty-website/index.html
The code:
<div class="main col-lg-9">
<div class="col-lg-6">
</div>
<div class="col-lg-6">
</div>
</div>
Thanks,
You have different options, however, I'd recommend you to start with a basic thing for ALL options, which is this:
<div class="main col-lg-9 myHalfCol">
<div class="col-lg-6">
</div>
<div class="col-lg-6">
</div>
</div>
Now you can target .myHalfCol without worrying about affecting any other .col-lg-6 class
As for approaches, you can use the padding model, leaving everything as is just adding some padding at the sides, like this:
.myHalfCol .col-lg-6{padding:0 10px;}
The margin model:
Here you use real margins, so you need to take care of width.
.myHalfCol .col-lg-6{width:48%; margin:0 1% /* or auto */;}
I would like a button between two hr elements with a bit of spacing wither side of the button and for this to remain the same when collapsing. I am using the Bootstrap framework.
I have got the current effect using the second answer from this question:
Add centered text to the middle of a <hr/>-like line
Therefore, my code is the same as what the answer provided. The first answer doesn't provide the spacing either side of the button.
Using media queries I am able to maintain the desired effect until I reach the 768px width break. Where this happens:
I can't continue to use media queries as I would have to apply them per pixel!
There must be an elegant solution to this? I'm assuming better use of columns and width percentages ?
Any help would be appreciated.
Using Bootstrap this solution should work fiddle:
<div class="container-fluid">
<div class="row">
<div class="col-xs-5">
<hr>
</div>
<div class="col-xs-2">
<a class="btn btn-md btn-primary">Add</a>
</div>
<div class="col-xs-5">
<hr>
</div>
</div>
</div>
You can use image for these lines by simply adding img tag:
CSS
img{
width:200px;
border:0;
height:10px;
background:url(http://goo.gl/bPZONP);
}
HTML
<div><img src="http://goo.gl/bPZONP">Button<img src="http://goo.gl/bPZONP"></div>
Demo
http://jsfiddle.net/qW6z9/
I have a fiddle here which shows my issue. You may need to make the 'result' quadrant wider to show the issue.
I have a couple of columns in my bootstrap layout but I can't seem to get my button to layout inside the parent div, it always seems to overlap it:
At first I thought it was due to the padding of the columns in bootstrap but I have removed that and the problem persists. I'm obviously missing something fundamental about how this is supposed to work, so any pointers to some help with css might not go amiss either.
apparently I have to link to some code to include a link to a fiddle so here is some:
My html is:
<div class="col-md-3 col-lg-3 nopadding">
<div class="definition-pallette">
<div class="row nopadding">
<div class="col nopadding"><button data-bind="click: showStepModal">+ Step</button></div>
</div>
</div>
</div>
and the additional css on top of the bootstrap default is:
.nopadding {
padding-left: 0 !important;
padding-right: 0 !important;
}
Seems to be a few things going on here. The main issue is you are using a lot of divs with a class of 'col' inside your 'row' divs. To get them to start behaving you need to define what size the col is. This fixes most of your problems. So for example, where you have this
<div class="row">
<div class="col">Some content</div>
</div>
Change that to something like
<div class="row">
<div class="col-xs-12">Some content</div>
</div>
And it starts behaving.
I also got rid of your .nopadding class as you don't need that.
Here is an updated fiddle - http://jsfiddle.net/T4XY4/1/ - it fixes most of the things in the right panel, but I'll leave the rest to you. You may want to choose which classes you actually want inside your 'row' divs, I just chucked in xs-12 for simplicity.
Edit
The Bootstrap docs confirms that if you are nesting columns you need proper col-* classes - http://getbootstrap.com/css/#grid-nesting
Its caused by bootstraps margins in the row class adding margin:0; to your no padding class will fix this but might cause layout issues in other places or on mobile devices.
.row {
margin-right: -15px;
margin-left: -15px;
}
as you can see, vote button and some text got out of div. how to fix it? and how to set a value of width, when column become "adapted"?
code is:
div class="container-fluid">
<div class="row-fluid">
<div class="span2">
</div>
<div class="span10">
</div>
</div>
</div>
Seems like extra padding is given to the inner element of span2 which is causing such problem, remove that padding and everything is gonna work fine hopefully!
Another possible solution would be fixing left bar as you want it for always
try
position: fixed;
I am sure one of the solution will work for you!