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
Related
TB3 here. Here is the respective jsFiddle. I am trying to build a little minitron (mini jumbotron) that has the following layout:
As you can see, there is a main <div> given the minitron class. Each 'minitron' has:
An icon (Glyphicon)
A name
A description
A 'Learn More' button
Unfortunately my CSS-fu is pretty weak, and as you can see in that fiddle, I'm just not achieving the desired layout.
Here's my attempt at some CSS rules:
.minitron-icon {
width:20%;
height: 20%;
margin: 5px;
}
.minitron-name {
font-size: 18px;
}
.minitron-desc {
width: 80%;
margin: 5px;
}
.minitron-learnmore {
width: 95%;
}
Can anyone spot where I'm going awry?
What about this one? https://jsfiddle.net/oh69hq71/17/
Taking advantage of BS grid system using rows and columns. The first row containing the glyphicon and name/description, the other one with the learn more full width.
<div class="well minitron">
<div class="row">
<div class="col-xs-2">
<span class="glyphicon glyphicon-piggy-bank minitron-icon"></span>
</div>
<div class="col-xs-10">
<div class="row">
<span class="minitron-name">Some Name</span>
</div>
<div class="row">
<span class="minitron-desc">A short meaningful description goes here.</span>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<button class="minitron-learnmore btn btn-success" type="button">LEARN MORE ABOUT JUPITER!</button>
</div>
</div>
</div>
*Update:
Increasing glyphicon size: In the glyphicon span set its style as "font-size:1.5em;"
To align it closer to name and description, add the style="text-align:right" at the glyphicon div container
The description is aligned to the named without the original css styles.
To increase padding (or margin) between the learn more button and description/icon, increase the learn more div top margin
New fiddle: https://jsfiddle.net/oh69hq71/18/
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.
Is there any way to center html elements vertically or horizontally inside the main parents?
Update: while this answer was likely correct back in early 2013, it should not be used anymore. The proper solution uses offsets, like so:
class="mx-auto"
As for other users suggestion there are also native bootstrap classes available like:
class="text-center"
class="pagination-centered"
From the Bootstrap documentation:
Set an element to display: block and center via margin. Available as a mixin and class.
<div class="center-block">...</div>
If you are trying to center an image in a div, but the image won't center, this could describe your problem:
JSFiddle Demo of the problem
<div class="col-sm-4 text-center">
<img class="img-responsive text-center" src="myPic.jpg" />
</div>
The img-responsive class adds a display:block instruction to the image tag, which stops text-align:center (text-center class) from working.
SOLUTION:
<div class="col-sm-4">
<img class="img-responsive center-block" src="myPic.jpg" />
</div>
JSFiddle demo of solution
Adding the center-block class overrides the display:block instruction put in by using the img-responsive class. Without the img-responsive class, the image would center just by adding text-center class
Also, you should know the basics of flexbox and how to use it, since Bootstrap 4 now uses it natively.
Here is an excellent, fast-paced video tutorial by Brad Schiff
Here is a great cheat sheet
In Bootstrap 4, the centering methods have changed.
Horizontal Center in Bootstrap 4
text-center is still used for display:inline elements
mx-auto replaces center-block to center display:flex children
offset-* or mx-auto can be used to center grid columns
mx-auto (auto x-axis margins) will center display:block or display:flex elements that have a defined width, (%, vw, px, etc..). Flexbox is used by default on grid columns, so there are also various flexbox centering methods.
Demo Bootstrap 4 Horizontal Centering
For vertical centering in BS4 see https://stackoverflow.com/a/41464397
You may directly write into your CSS file like this:
.content {
position: absolute;
top: 50%;
left:50%;
transform: translate(-50%,-50%);
}
<div class = "content" >
<p> some text </p>
</div>
i use this
<style>
html, body {
height: 100%;
margin: 0;
padding: 0 0;
}
.container-fluid {
height: 100%;
display: table;
width: 100%;
padding-right: 0;
padding-left: 0;
}
.row-fluid {
height: 100%;
display: table-cell;
vertical-align: middle;
width: 100%;
}
.centering {
float: none;
margin: 0 auto;
}
</style>
<body>
<div class="container-fluid">
<div class="row-fluid">
<div class="offset3 span6 centering">
content here
</div>
</div>
</div>
</body>
for horizontaly centering you can have something like this:
.centering{
float:none;
margin:0 auto
}
<div class="span8 centering"></div>
With Bootstrap 4 you can use flex-based HTML classes d-flex, justify-content-center, and align-items-center:
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-flex justify-content-center align-items-center">
<button type="submit" class="btn btn-primary">Create</button>
</div>
Source: Bootstrap 4.1
I like this solution from a similar question:
Use bootstrap's text-center class on the actual table data <td> and table header <th> elements. So
<td class="text-center">Cell data</td> and <th class="text-center">Header cell data</th>
Bootstrap 4's use of flex properties solve this. You can use these classes:
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-flex justify-content-center align-items-center">
<button type="submit" class="btn btn-primary">Create</button>
</div>
These classes will center your content horizontally and vertically.
I discovered in Bootstrap 4 you can do this:
center horizontal is indeed text-center class
center vertical however using bootstrap classes is adding both mb-auto mt-auto so that margin-top and margin bottom are set to auto.
for bootstrap4 vertical center of few items
d-flex for flex rules
flex-column for vertical direction on items
align-items-center for horizontal centering
justify-content-center for vertical centering
style='height: 300px;' must have for set points where center be calc or use h-100 class
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-flex flex-column align-items-center justify-content-center bg-secondary" style="
height: 300px;
">
<div class="p-2 bg-primary">Flex item</div>
<div class="p-2 bg-primary">Flex item</div>
<div class="p-2 bg-primary">Flex item</div>
</div>
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>
How can we have the text "Create New Position" be vertically centered?
HTML/CSS is below.
Adding margin-top:5px to the "Create new.." div helps but it seems hacky.
<div style="margin-top:5px">
<div style="float:left">Create new position</div>
<div style="float:right"><input type="submit" id="x" value="Save"></div>
<div style="clear: both;"></div>
</div>
The following will work based on creating a line-height which is equivalent for both items.
HTML:
<div class="row">
<span class="left">Create new position</span>
<span class="right"><input type="button" value="Save" />
</div>
CSS:
/* REMOVE THIS PORTION FOR YOUR IMPLEMENTATION, IT IS EXAMPLE ONLY */
* { font-family: Tahoma, sans-serif; font-size: 12px; }
.row { border: 1px solid #ccc; }
/* END EXAMPLE ONLY PORTION */
.row { height: 24px; }
.row > span { line-height: 24px; }
.left { float: left; }
.right { float: right; }
The trick is to set the .row containing DIV to be 24px tall, and also set the contained SPAN elements to have a line-height of 24px. By doing this, you tell the browser how much vertical space to take up for the line of text.
Note, however, that 24px is not the important part - the important part is identifying how tall your button is, which is based on your CSS and your selected font for the button itself.
The reason the example I'm giving you works to vertically center in this case is based on the EXAMPLE ONLY CSS I put in at the top - which says the font-size should be 12px. The default browser sizing (at least in Chrome) is then going to provide a little extra margin and padding around the button, as well as a border - which results in a total height of roughly 24px, and this appearance:
The border is created by the example CSS also, and is only there to show you that the vertical alignment is correct. Once you remove .row { border: 1px solid #ccc; }, it will disappear.
Here is a JSBin which shows it working:
http://jsbin.com/otekil/1/edit
The below may help you.
<div align="center">
</div>
So it would look like this maybe:
<div align="center">
<div style="float:left">Create new position</div>
<div style="float:right"><input type="submit" id="x" value="Save"></div>
<div style="clear: both;"></div>
Make the line-height of the interior div the same height as the height of the exterior div.
Example:
<div style="margin-top:5px; height: 100px;">
<div style="float:left; line-height: 100px;">Create new position</div>
<div style="float:right"><input type="submit" id="x" value="Save"></div>
<div style="clear: both;"></div>
</div>
Slightly different approach but you don't need the floats, vertical-align should work fine in this instance IMO:
<div>
Create new position:
<input type="submit" id="x" value="Save" style="vertical-align:baseline;" />
</div>
This method should work in all browsers, is stable, and allows you to easily choose the object to which you want your content centered. The empty container is the only problem I have with this method, but I can easily overlook it when comparing the pros/cons of other methods.
Solution:
You use a div at half of the parent's height to push your content block (push_to_center class), then reduce it by half the content height (content class).
In-line style declaration
<div style="float:left; height:50%; margin-bottom:-55px;"></div>
<div style="clear:both; height:110px; position:relative; width:200px;">
<div style="float:left">Create new position</div>
<div style="float:right"><input type="submit" id="x" value="Save"></div>
</div>
Complete HTML page (see it working):
<html><head><title>Test Center Div</title>
<style>
.push_to_center {float:left; height:50%; margin-bottom:-55px;}
.content {clear:both; height:110px; position:relative;}
</style>
</head>
<body>
<div class="push_to_center"></div>
<div class="content" style="width:200px; height:110px;">
<div style="float:left;">Create new position</div>
<div style="float:right;"><input type="submit" id="x" value="Save"></div>
</div>
</body>
</html>
To exclude the Save button from centering simply move it out of the Content classed div (put it earlier in the page flow if you want it above, and below in the page if you want it at bottom):
I always used such trick:
style="height: 30px; line-height: 30px; vertical-alignment: middle;"
Having fixed height plus the same height as line height plus middle vertical alignment.
Maybe the above are better answers, I'm posting this because it's simple and worked for me. :)
Addressed this by adding margin-top:4px to the "Create Position" div. This was the only solution I could get to work!!
This will work.....
<table style="height:500px;width:100%">
<tr>
<td>
<div style="margin-top:px;vertical-alignment: middle;height: 30px; line-height: 30px;">
<div style="float:left;">Create new position</div>
<div style="float:right"><input type="submit" id="x" value="Save"></div>
<div style="clear: both;"></div>
</div>
</td>
</tr>
</table>