I'm unable to center a lot of div since I upgrade my bootstrap from 2.1 to 3.0
For example with this code:
<div id="center" class="container">
<div class="row">
<div class="btn-toolbar">
<div class="btn-group">
<a class="btn btn-default" href="#">test</a>
</div>
</div>
<br />
<p>Am I centered ?</p>
<a class="btn btn-default" href="#">Back</a>
</div>
</div>
I had this rule:
#center {
margin: 0 auto;
}
But the result is:
Or another example, how to center this:
<div id="center" class="container">
<div class="row">
<li class="col-md-5">
<ul class="list-unstyled">
<li><i class="icon-user"></i> aaaaaaaaa</li>
<li><i class="icon-envelope"></i> bbbbbbbbbb</li>
<li><i class="icon-envelopebug"></i> cccccccccccc</li>
</ul>
</li>
<li class="col-md-5">
<ul class="list-unstyled">
<li><i class="icon-user"></i> aaaaaaaaa</li>
<li><i class="icon-envelope"></i> bbbbbbbbbb</li>
<li><i class="icon-envelopebug"></i> cccccccccccc</li>
</ul>
</li>
</div>
</div>
Thank you for your help
In order to center a block level element using margin: 0 auto; it must also have a width that is smaller than its containing block (for the auto value to make sense) - because #container is spanning the width of its parent (the <body>) there is simply no margin to distribute.
An alernative approach to margin: 0 auto; would be to set .btn-toolbar to inline-block and then centering it by adding text-align: center; to its containing block. You can apply the same concept to the second example:
http://fiddle.jshell.net/52VtD/94/
In this instance, margin:0 auto doesn't work because the width of the element is 100%. If you want it to work, you would have to set a width on the element:
.btn-toolbar {
width: 50px;
margin: 0px auto;
}
If you want to center the text and the button, you could add the class text-center to the parent element, in this case: .row. The styling of this class is simply text-align: center.
<div class="row text-center">
..
</div>
EXAMPLE HERE
As #Adrift points out, it would be much more efficient to center the element by making it inline-block, as you can use text-align:center as opposed to margin:0 auto and avoid having to set a fixed width on the element. This will ensure that the element is centered regardless of its width. (example here) - don't forget you can just add the class text-center to the parent for centering.
It's also worth noting that inline/inline-block elements respect white-space in the markup, and thus generate space if present. If you want to remove this space, see this answer.
Related
I have the following problem in html: Cannot move the add button to the side. I have tried inserting the words within the div of the button or removing the br/ in the button div. It doesnt work. I know this seems to be a stupid question to all the pros out here but im seriously stuck
<h4>More details: </h4>
<div class="col-md-1">
<div class="form-group">
<div class="text-sm-center">
<button type="button" class="btn btn-outline-success btn-rounded" id="addrow"><i class="dripicons-plus"></i></button>
</div>
</div>
</div>
If I understand correctly, you want the <h4>More details:</h4> element to be side-by-side with the + button in a row format. Since <h1>-<h6> and <div> tags are block-level the only way to have your h4 in the same row as the nested <button> is to manipulate the amount of space each element occupies, ie change their layout with CSS.
A Block-level element occupies the entire horizontal space of its parent element (container), and vertical space equal to the height of its contents, thereby creating a "block".
To make the <h4> and the + button right next to eachother, you could use CSS Flexbox and nest your HTML in a parent container <div class="row">.
.row {
display: flex;
align-items: center;
}
.row .btn {
margin-left: 10px;
}
<div class="row">
<h4 class="details-heading">More details: </h4>
<div class="col-md-1">
<div class="form-group">
<div class="text-sm-center">
<button type="button" class="btn btn-outline-success btn-rounded" id="addrow">+<i class="dripicons-plus"></i></button>
</div>
</div>
</div>
</div>
In this case you can just use CSS. You need all three of the parent DIV elements to have zero px for border-left, margin-left and padding-left.
Try adding another class to each, like:
<h4>More details: </h4>
<div class="col-md-1 left-side">
<div class="form-group left-side">
<div class="text-sm-center left-side">
<button type="button" class="btn btn-outline-success btn-rounded" id="addrow"><i class="dripicons-plus"></i></button>
</div>
</div>
</div>
CSS
.left-side {
margin-left: 0px;
border-left: 0px;
padding-left: 0px;
}
Some prefer 0 to 0px.
The reason to use another class, i.e. left-side is to avoid messing with any other elements elsewhere of the existing classes.
This method/answer is a bit of a hack; more elegant solutions will be out there.
I currently have a simple one page website which displays a logo, 4 short lines of text and 2 buttons which are side by side. I'm using Bootstrap 4.
I have already tried many solutions posted on stack overflow but haven't found a fix.
I am trying to align all of the content horizontally and vertically whilst still being responsive so it is in the middle of the screen on all devices. Would be good to have no scroll however i'm guessing scroll may be required especially on smaller devices such as iPhone SE so that's ok.
The closest I have got is with the code below. This centers correctly however for example, on iPhone SE the logo and buttons are cut off at the top and bottom of the page rather than resizing like responsive should do.
css:
html, body {
height: 100%;
font-family: Arial, sans-serif !important;
overflow:auto;
}
body {
margin: 0;
}
.container {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100vh;
}
html:
<div class="container">
<div style="padding:15px;" class="row">
<div class="col text-center">
<center>
<img src="assets/img/logo.png" class="logo" />
<br>
<br>
<p style="margin-top:1rem;" class="big">text</p>
<p>text<br>text<br>text</p><p>text<br>text<br>text</p>
<p class="no-margin">PURCHASE TICKET INSTANTLY ONLINE</p>
<p class="big">OR</p>
<p>RESERVE AND PAY ON ENTRY</p>
<br>
<div class="row">
<div class="col-sm-12 text-center">
<a href="purchase">
<button style="background-color: #db0e0e !important;border:none; line-height: 130%;" class="btn btn-danger btn-md center-block">PURCHASE
<br>TICKET ONLINE</button>
</a>
<a href="purchase"><button style="background-color: #ffffff !important;color: #db0e0e !important;border:none; line-height: 130%;" class="btn btn-danger btn-md center-block">RESERVE
<br>PAY ON ENTRY</button></a>
</div>
</div>
</center>
</div>
</div>
</div>
Flex. See my jsfiddle.
The key is to center both axes with nested flex <div>'s one with a flex-direction of column and one of row, both with justify-content: center. The key "gotcha" with flex is that at least one of the first flex div has to have height: 100%, since flex elements' default height are determined by their contents, not their parent height.
I'm pretty new when it comes to flexbox but it seems a lot of properties work the same way.
However, when it comes to align items center I'm used to the way inline-block handles margins where it creates a space within the whole row even if it's on a specific element.
With flexbox it seems to only move that element off the axis. Fiddle attached, let me know if I am doing something wrong here. Using bootstrap css with only a few other styles to show what's going on.
https://jsfiddle.net/fv1gm67f/3/
<div id="header-top">
<div class="container">
<div class="row flex-wrap align-items-center">
<div class="header-top-social-media-icons-outer col col-auto">
<nav class="header-top-social-media-icons text-center icons-circle icons-sm">
<ul class="social-media-icons">
<li><i class="fa fa-facebook"></i></li>
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-instagram"></i></li>
<li><i class="fa fa-youtube"></i></li>
<li><i class="fa fa-envelope"></i></li>
</ul>
</nav>
</div>
<div class="header-top-menu-outer col col-auto">
<nav class="header-top-menu">
<ul id="menu-header-top-menu" class="menu">
<li>My Account</li>
<li>Sample Page</li>
<li>Blog Posts</li>
</ul>
</nav>
</div>
</div>
</div>
If i understood you correctly. You want to keep the 2 columns aligned vertically automatically. I think you can achieve this with the property align-self:baseline. Please add the following css class to your fiddle and you will see that whether you give margin bottom or top to the icons col, the right column will align itself based on that margin and keep in line.
.col-auto{
align-self:baseline;
}
Hope this answers your question.
[EDIT For More Explaination]
As per your comment you are correct that align-self is for items within flexbox. If you notice then your .flex-wrap class is putting display:flex on main container with has 2 columns child as flex items. And then you have display:flex on the inner nav ul as well which is nested. You needed to set the align-self to baseline for the parent flexbox in order for the 2 col items to align to each other.
Here is a very good article with complete guide to flexbox.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Hope this explanation gives more info to others as well.
Happy Coding :)
Give your social media icons a margin of 0.
.social-media-icons li {
margin-bottom:0px;
}
As Russell Alan alluded to, it is a box model issue. The padding-top and padding-bottom on the ul.social-media-icons element is throwing the y axis off. The li elements also have a margin-bottom that adds to the issue. The following CSS should fix the issue:
CSS
/*This is so you can get a visual on exactly what the boxes are doing*/
.col-auto {
background-color: #CCC;
border: solid 1px #000;
}
ul.social-media-icons {
padding-top: 0;
padding-bottom: 0;
}
.social-media-icons li {
margin-bottom: 0;
}
jsFiddle
Ultimately, however, I think it might be best to set a min-height on the .row.flex-wrap children.
display: inline-block; margin-bottom: Npx does not affect the centering of other display: inline-block elements within a common parent element.
https://jsfiddle.net/dkoadaya/
I modified your fiddle above to center some inline-block elements and show that the behavior is the same.
I have a bootstrap row containing a header tag and a link tag. They are aligned on the same row when the screen width is less than 768 pixels. When the container width is 768 or greater the link element shifts a few pixels higher.
Here is an example that demonstrates this behaviour: https://jsfiddle.net/bz3399x8/
<div class="row">
<div class="col-sm-12">
<a class="btn btn-primary" href="#" style="width: 80px; float: right;">
<i class="icon-plus">
Add
</i>
</a>
<h1>
Hello World
</h1>
</div>
</div>
Here are screenshots demonstrating this behaviour.
There are two issues:
what is causing this?
how to i fix this?
your syntax according to Bootstrap Docs is wrong,
it needs the .container to wrap .row
and
h1 and a button elements needs to be wrapped in Bootstrap columns.
So, you can use .col-sm-10 + .col-sm-2 in this case.
Added .col-xs for demo
.row {
/* demo*/
background:red
}
.btn {
margin-top:20px /* choose as it fit you better */
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-xs-10 col-sm-10">
<h1>
Hello World
</h1>
</div>
<div class="col-xs-2 col-sm-2">
<a class="btn btn-primary" href="#">
<i class="icon-plus">
Add
</i>
</a>
</div>
</div>
</div>
While wrapping elements in different column will help answer your problem. If you are looking at wrapping both elements inside single column you need to specify elements to be inline. Problem is occurring since h1 element and a element even though in same row for bootstrap but are displayed as block and inline-block.
Add display: inline-block to h1 element with top padding to a element. This should answer it as well.
Try it with display: inline on h1 see the difference in behavior. inline element dont support vertical margins.
Fiddle: https://jsfiddle.net/dk_dragonknight/m8ey6mba/
I have a header with three sections, left, middle and right. I cant seem to come up with the proper css to make the column on the right (with 'email history' and 'back to list') float to the right side of the column. How can anyone tell me how this is done? Any help is appreciated.
<div class="col-sm-5" style="text-align:left">
<button type="submit" class="btn btn-primary btn-lg navbar-btn">Save Contact</button>
</div>
<div class="col-sm-2" style="text-align:center">
<h2 class="branding">Edit Contact</h2>
</div>
<div class="col-sm-5">
<ul class="nav nav-pills">
<li class="active">Email History</li>
<li class="active">Back To List</li>
</ul>
</div>
NOTE: The answer below is valid for Bootstrap 2 and 3; in Bootstrap 4 the equivalent class is float-right, and viewport-specific float classes are also available.
The easiest option is to add the class pull-right to the ul element. This will float the pills to the right.
Sidenote: you can replace those inline styles with the helper classes text-left (which is often redundant) and text-center.
Here's a bootply example: http://www.bootply.com/134139
Need to overwrite some Bootstrap styling...
You'll need to remove the float on the list items and set it to display:inline-block. Then for the unordered-list element, add text-align:left.
Here's the CSS:
ul.nav.nav-pills {
text-align: right;
}
.nav-pills>li {
float: none;
display: inline-block;
}
Enjoy!
Try a style="float:left;" on each div. And a <ul class="nav nav-pills" style="float:right;">. After that clear the float.