I have got a view like this using bootstrap2.3.1:
<div class="row-fluid">
<div class="span3">text1</div>
<div class="span3">text2</div>
<div class="span3">text3</div>
<div class="span3">text4</div>
</div>
When I filter this to only show the div with text2 I set the other divs display to none. But because the div with text1 is still first child the div with text2 has a left margin. How do I change this so it only puts margin-left: 0; to the first child with display block?
The view looks likes this when filtered:
<div class="row-fluid">
<div class="span3" style="display: none;">text1</div>
<div class="span3">text2</div>
<div class="span3" style="display: none;">text3</div>
<div class="span3" style="display: none;">text4</div>
</div>
The margin got removed to the first child by the following CSS from bootstrap:
.row-fluid [class*="span"]:first-child {
margin-left: 0;
}
I think I should be doing something like this: (but than the right syntax)
.row-fluid [class*="span"]:first-child[display="block"] {
margin-left: 0;
}
Here is your bizzare selector (demo):
.row-fluid [class^="span"]:not([style="display: none;"]) {
margin-left: 0;
}
Howerever, currently it's not possible to select first-of-class, so this rule will be applied to all matched elements. I suggest you to switch Bootstrap classes (.spanX) when showing/hiding elements.
Related
I'm struggling with Bootstrap rows and columns in a SharePoint web site. The problem is that I can't and don't want to change the styling that originates from SharePoint, but still be able to use the Bootstrap grid in a part of the page.
I've tried to illustrate the problem without Bootstrap and SharePoint. Here's the JSFiddle:
https://jsfiddle.net/knLjyhe4/
Below is a complete illustration of my example. The problem is that once I use a row to separate element B from C, D and E, the height of side element A affects the first row's height, which I don't want. I want element C to appear immediately below element B. The second example is how it looks before I add the div.row elements.
Below is the HTML and CSS for the isolated example. I had hoped that I could style the div.main element somehow so that the float of A doesn't affect the float of B-E at all. But I can't figure it out.
Please note that I'm sure there are several solutions if I start to change the HTML and styles (like using position), but I really just want to know if there is a way in CSS where the div.main element gets "its own" floating area, without being affected by the A element's float.
<style>
section {
width: 600px;
margin: auto;
}
.block {
float: left;
margin: 10px;
background-color: #339;
color: #fff;
width: 140px;
padding: 10px;
}
.side {
width: 200px;
height: 100px;
}
.main {
margin-left: 240px;
}
.row:after {
display: table;
content: ' ';
clear: both;
}
</style>
<section>
<div class="side block">This is element A in problematic example. I want element C immediately below element B, regardless of the height of this element</div>
<div class="main">
<div class="row">
<div class="block">This is element B</div>
</div>
<div class="row">
<div class="block">This is element C</div>
<div class="block">This is element D</div>
<div class="block">This is element E</div>
</div>
</div>
</section>
<section>
<div class="side block">This is element A when it works but without rows</div>
<div class="main">
<div class="block">This is element B</div>
<div class="block">This is element C</div>
<div class="block">This is element D</div>
<div class="block">This is element E</div>
<div class="block">This is element F</div>
<div class="block">This is element G</div>
<div class="block">This is element H</div>
<div class="block">This is element I</div>
</div>
</section>
Seems to be working if you change your CSS for .main to this (display: table-row;):
.main {
margin-left: 240px;
display: table-row;
}
Updated JSFiddle here
UPDATE 1
Changed table to table-row since it did not work in IE10.
UPDATE 2
For future reference, the final solution used in SharePoint / O365 looked something like this:
HTML (.container is a bootstrap container)
<div id="DeltaPlaceHolderMain">
<div class="container">
<div class="inner-container">
<!--Your content here-->
</div>
</div>
</div>
CSS
.container .inner-container {
display: inline-block;
width: 100%;
}
The .main needs to be float:left and it needs to have less px to width.
Try defines
.side {width:30%; float:left;}
.main{width:70%; float:left; margin-left:0; }
Don't forget to clean the margin-left of .main
The clear: both property on the row:after pseudoclass is causing your second row to jump down below the left-floated side element.
In bootstrap you should use classname col-md-4 on your side element, classname col-md-8 on your main element, and remove the float: left property from your side element. This will give you 2 columns, one for side which is 4 grids wide and one for main which is 8 grids wide. Your rows should function as you expect once the float is gone.
<style>
section {
width: 600px;
margin: auto;
}
.block {
background-color: #339;
color: #fff;
padding: 10px;
}
</style>
<section class="row">
<div class="block col-md-4">This is element A</div>
<div class="col-md-8">
<div class="row">
<div class="block col-md-6">This is element B</div>
</div>
<div class="row">
<div class="block col-md-6">This is element C</div>
<div class="block col-md-6">This is element D</div>
<div class="block col-md-6">This is element E</div>
</div>
</div>
</section>
In general, with bootstrap you don't want to float things. Also, instead of setting element widths explicitly, it is better to use the .col- classes to fit them into the bootstrap grid system.
I want a margin on every row that I am using in Twitter Bootstrap, except if it's :last-of-type/:last-child but if it's the :only-child, I still want the margin. Any ideas?
EDIT
Using the answer given, I did the following SASS:
.container .row {
margin-bottom: 15px;
&:last-child:not(:only-child) {
margin-bottom: 0;
}
}
First of all note that CSS pseudo-classes such as :last-of-type/:last-child look through the children tree of the parent to match the desired child element, not through a list of classes. So, .row:last-of-type may or may not match the last row.
However if .rows are nested by a specific wrapper like .container, the following should work:
Example Here.
.container > :last-child:not(:only-child)
<div class="container">
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
</div>
Here is a jQuery solution
var rowsNum = $('.your-rows').length;
if (rowsNum > 1) {
$('.your-rows').not(':last-child').css({'margin':'your margin'});
} else {
$('.your-rows').css({'margin':'your margin'});
}
First thing I think of is selecting the row only when there are more than two children.
Select the last rows only from the second row onwards:
.row:nth-child(n+2):last-child
Example
.container {
margin-bottom: 50px;
}
.container > .row:nth-child(n+2):last-child {
background: #F00;
}
<div class="container">
<div class="row">No color for only row</div>
</div>
<div class="container">
<div class="row">Color</div>
<div class="row">Color</div>
<div class="row">Color</div>
<div class="row">Color</div>
</div>
I am trying to hide with hidden-xs in Bootstrap just the padding. How would I be able to remove just the padding without removing the whole row ? thanks in advance!
I have something like this
<td class="paddingleftTenHiddenXS col-lg-8" style="padding-left:10px; ">
css:
div.special > div[class*="col-"] {
padding-left: 0;
padding-right: 0;
}
html:
<div class="row special">
<div class="col-xs-8"> content... </div>
</div>
div.special > div[class*="col-"] targets all children of the special class that have a class that starts with "col-" you could also make it "col-xs-" to target extra small
*edited
I am having an issue with a horizontal layout: http://jsfiddle.net/GqH6s/4/
It seems the parent #content div gets its width from its first child (#projects), not the total of all its children.
I know I could work around it with jQuery but I'd like to use CSS if possible.
Thanks for your help!
The basic html:
<div id="content">
<div id="projects" class="section">
<div class="block">Content</div>
</div>
<div id="profile" class="section">
<div class="block">Content</div>
</div>
<div id="team" class="section">
<div class="block">Content</div>
</div>
</div>
And CSS:
#content {
white-space: nowrap;
display: inline-block;
}
.section {
display: inline-block;
}
.block {
white-space: normal;
}
You need to place the #profile and #team div's within the #project div so that they appear inline with the rest of the sections.
Should looks something like this:
http://twitter.github.com/bootstrap/scaffolding.html
I tried like all combinations:
<div class="row">
<div class="span7 offset5"> box </div>
</div>
or
<div class="container">
<div class="row">
<div class="span7 offset5"> box </div>
</div>
</div>
changed span and offset numbers...
But I cant get a simple box perfectly centered on a page :(
I just want a 6-column-wide box centered...
edit:
did it with
<div class="container">
<div class="row" id="login-container">
<div class="span8 offset2">
box
</div>
</div>
</div>
But the box is too wide, is there any way I can do it with span7 ?
span7 offset2 gives extra padding to the left span7 offset3 extra padding to the right...
Bootstrap's spans are floated to the left. All it takes to center them is override this behavior. I do this by adding this to my stylesheet:
.center {
float: none;
margin-left: auto;
margin-right: auto;
}
If you have this class defined, just add it to the span and you're good to go.
<div class="span7 center"> box </div>
Note that this custom center class must be defined after the bootstrap css. You could use !important but that isn't recommended.
besides shrinking the div itself to the size you want, by reducing span size like so... class="span6 offset3", class="span4 offset4", etc... something as simple as style="text-align: center" on the div could have the effect you're looking for
you can't use span7 with any set offset and get the span centered on the page (Because total spans = 12)
Bootstrap3 has the .center-block class that you can use. It is defined as
.center-block {
display: block;
margin-left: auto;
margin-right: auto;
}
Documentation here.
If you want to go full-bootstrap (and not the auto left/right way) you need a pattern that will fit within 12 columns e.g. 2 blanks, 8 content, 2 blanks. That's what this setup will do.
It only covers the -md- variants, I tend to snap it to full size for small by adding col-xs-12
<div class="container">
<div class="col-md-8 col-md-offset-2">
box
</div>
</div>
Sounds like you just wanted to center align a single container.
The bootstrap framework might be overcomplicating that one example, you could have just had a standalone div with your own styling, something like:
<div class="login-container">
<!-- Your Login Form -->
</div>
and style:
.login-container {
margin: 0 auto;
width: 400px; /* Whatever exact width you are looking for (not bound by preset bootstrap widths) */
}
That should work fine if you are nested somewhere within a bootstrap .container div.
add the class centercontents
/** Center the contents of the element **/
.centercontents {
text-align: center !important;
}
#ZuhaibAli code kind of work for me but I changed it a little bit:
I created a new class in css
.center {
float: none;
margin-left: auto;
margin-right: auto;
}
then the div become
<div class="center col-md-6"></div>
I added col-md-6 for the width of the div itself which in this situation meant the div is half the size, there are 1 -12 col md in bootstrap.
Follow this guidance https://getbootstrap.com/docs/3.3/css/
Use .center-block
.center-block {
display: block;
margin-left: auto;
margin-right: auto;
}
wrap the div in a parent div with class row then add style margin:0 auto; to the div
<div class="row">
<div style="margin: 0 auto;">center</div>
</div>