So if i have only one element, in my case a button, i just add the .center-block class to that element and it is centered.
<div class="form-group">
<div class="col-sm-4 col-sm-offset-4">
<button type="submit" class="btn btn-primary center-block">Element 1</button>
</div>
</div>
But what if i have two elements? I tried to wrap them in a div and added a .center-div class like so:
HTML:
<div class="form-group">
<div class="col-sm-4 col-sm-offset-4">
<div class="center-div">
<button type="submit" class="btn btn-primary">Element 1</button>
<button type="submit" class="btn btn-primary">Element 2</button>
</div>
</div>
</div>
CSS:
.center-div {
display: inline-block;
margin-right: auto;
margin-left: auto;
}
.center-div is almost the same as .center-block except that i used display: inline-block; instead of display: block; so that it fits the contents size.
Sadly it doesn't work. Unless i change it to display: block; and assing it a fixed width like 200px.
What am i missing here?
Margin right and left set to auto only works if the width of the element is fixed.
As your center-div is now an inline-block, you need a text-align: center property on its container.
<div style="text-align: center">
<div class="center-div">
<!-- inner elements -->
</div>
</div>
I used a style attribute for convenience in this example
see if this helps:
.center-div {
width: 50%;
border: 1px solid black;
display: inline-block;
margin:0 auto;
text-align: center;
}
body{
text-align: center;
}
Related
I have this html code where by I have a table inside a div inside a container.
<div class="col-sm-12">
<table class="table table-responsive table-bordered" id="calctable">
....
</table>
<button class="btn btn-suceess"></button>
</div>
I would like to move the button directly on the bottom right of the table similar to this.
I tried multiple ways to get what I wanted, but they dont work properly. I tried to use float-right class to float the button to the right. I tried to use col-sm-offset-11. Didn't work either. Is there a way I can fix this?
There are several ways to achieve what you want, the two examples below use a wrapper around your table and button elements :
.col-sm-12 {
background-color: red;
width: 300px;
padding: 10px;
margin-bottom: 10px;
}
.wrapper { width: 80%; }
table {
background-color: yellow;
height: 20px;
margin-bottom: 10px;
width: 100%;
}
/* With flexbox (don't forget to add vendor prefixes) */
#test-flex .wrapper {
display: flex;
flex-direction: column;
}
#test-flex button { align-self: flex-end; }
/* With float */
#test-float button { float: right; }
.clear { clear: both; }
<!-- With flexbox -->
<div id="test-flex" class="col-sm-12">
<div class="wrapper">
<table></table>
<button>Button</button>
</div>
</div>
<!-- With float -->
<div id="test-float" class="col-sm-12">
<div class="wrapper">
<table></table>
<button>Button</button>
</div>
<div class="clear"></div>
</div>
one of the thousand ways to do this :
<div class="col-sm-12">
<table class="table table-responsive table-bordered" id="calctable">
....
</table>
</div>
<div class="col-sm-12 text-right">
<button class="btn btn-success"></button>
</div>
Please note: I have looked at several SO posts and various suggestions for floating 2 divs side by side, however none of them seemed to work for me.
A summary of suggestions are:
display: inline-block
float: left
others refer to overflow: hidden, overflow: auto with various implementations.
One had worked, required me to set the right div:
position: absolute;
right: 0px
This was undesireable since the button would attach itself the the right side, ignoring all parent container constraints.
Above is that what I want to achieve.
The left div has the blue background. The right div contains the button.
My code:
Html
<div class="row">
<div class="display-inline-block float-left">
<h1>Your Order Schedule
<a id="editScheduleName" onclick="changeScheduleName()">
<img class="schedule-heading small-image" src=""images/icons/edit.png">
</a>
</h1>
</div>
<div class="display-inline-block float-right">
<input id="btnScheduleStatus" type="button" class="btn button-status btn-success" value="my button">
</div>
</div>
Css
Note:using a basis of bootstrap for most of my css needs
.display-inline-block {
display: inline-block;
}
.schedule-heading {
position: relative;
}
.small-image {
width: 30px;
height: 30px;
margin-bottom: 5px;
}
.button-status {
width: 120px;
height: 50px;
font-weight: bold;
font-size: 18px;
}
Help would be very much appreciated
Without any changes to css, purely using bootstrap:
Few key things: ensure you add columns (<div class="col-md-12">) after specifying <div class="row">
You can use the pull-left & pull-right classes to float the content:
<div class="row">
<div class="col-md-12"><!-- define columns in bootstrap -->
<div class="pull-left"><!-- use pull-left -->
<h1>
Your Order Schedule
<a id="editScheduleName" onclick="changeScheduleName()">
<img class="schedule-heading small-image" src="images/icons/edit.png">
</a>
</h1>
</div>
<div class="pull-right"><!-- use pull-right -->
<input id="btnScheduleStatus" type="button" class="btn button-status btn-success" value="my button">
</div>
</div>
</div>
Fiddle
This has better overall browser support than display:flex which is not supported in older versions of Internet Explorer.
.row{
display: flex;
justify-content: space-between;
align-items: center;
}
.display-inline-block {
display: inline-block;
}
.schedule-heading {
position: relative;
}
.small-image {
width: 30px;
height: 30px;
margin-bottom: 5px;
}
.button-status {
width: 120px;
height: 50px;
font-weight: bold;
font-size: 18px;
}
<div class="row">
<div class="display-inline-block float-left">
<h1>Your Order Schedule
<a id="editScheduleName" onclick="changeScheduleName()">
<img class="schedule-heading small-image" src="images/icons/edit.png"/>
</a>
</h1>
</div>
<div class="display-inline-block float-right">
<input id="btnScheduleStatus" type="button" class="btn button-status btn-success" value="my button">
</div>
</div>
.row{
display: flex;
justify-content: space-between;
align-items: center;
}
Try to use display: flex!
You can search in Google, you can learn display: flex easily.
First, you need to create a container div for both your buttons, and then have them inside as 2 divs. Then you can write in your CSS:
.button_container {
display: flex;
justify-content: space-between;
align-items: center;
}
You don't need to write anything for the other 2 divs.
How can I left align help text under a button? The desired functionality is for the help container text to left align with the left side of the button
JSFiddle
<div class="button-container">
<button class="btn btn-primary">
Login with Google
</button>
</div>
<div class="help-container">
<ul>
<li>Because it's easier</li>
<li>Never forget your password!</li>
</ul>
</div>
.button-container {
text-align: center;
}
I've tried making the width of the button the size of the parent div but that isn't my desired outcome. I've also tried adding a div around both the .button-container and .help-container but it takes the width of the parent div
You can put the help-container into the button container and use this CSS:
.button-container {
margin: 0 auto;
width: 180px;
}
.help-container {
text-align: left;
overflow: visible;
}
https://jsfiddle.net/pyjkfxwx/1/
Here my solution using flexbox
CSS:
.container {
display : flex;
flex-direction : column;
align-items : center;
}
HTML:
<div class="container">
<div class="button-container">
<button class="btn btn-primary">
Login with Google
</button>
<ul>
<li>Because it's easier</li>
<li>Never forget your password!</li>
</ul>
</div>
</div>
fiddle
Desktop View:
Desktop View
Mobile View:
Mobile View
.event_item {
background: #2b325f;
color: white;
text-align: center;
padding: 30px;
vertical-align: top;
margin:0 0 5px 0;
height: 215px;
}
.event_item h2{margin-bottom:0;}
.event_item h6{margin-bottom:10px;}
.event_summary{display:none;}
.event_item_read p{color:#b00909;text-transform:uppercase;}
.btn-primary{
background:#b00909 !important;
color:white;
border-color: transparent;
}
.btn-align {
text-align: center;
margin-top: -20px;
margin-bottom: 20px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row eventRow">
<div class="col-md-4">
<div class="events">
<div class="event_item">
<div class="col-md-12">
<h6>03/16/2016</h6>
<h2>Just a title testing, why is this long?</h2>
<p>Detroit</p>
<h5 style="font-weight: bold;">7pm - 7am</h5>
</div>
</div>
</div>
<div class="btn-align">
<button type="button" class="btn btn-primary doEdit" editKey="'.$key.'"data-toggle="modal" data-target="#editEvent">
Edit Event
</button>
<button type="button" class="btn btn-primary doDelete" delKey="'.$key.'" data-toggle="modal" data-target="#deleteEvent">
Delete Event
</button>
</div>
</div>
</div>
</div>
How would I fix this issue?
You're missing your row class. The column floats which collapses the container, which made you decide to add a set height, which was too short for that amount of text. Remove the fixed height and add the .row class to .event_item and it should be fixed.
https://jsfiddle.net/19aqx97w/
#import url(https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css);
.event_item {
background: #2b325f;
color: white;
text-align: center;
padding: 30px;
vertical-align: top;
margin:0 0 5px 0;
}
.event_item h2{margin-bottom:0;}
.event_item h6{margin-bottom:10px;}
.event_summary{display:none;}
.event_item_read p{color:#b00909;text-transform:uppercase;}
.btn-primary{
background:#b00909 !important;
color:white;
border-color: transparent;
}
.btn-align {
text-align: center;
margin-top: -20px;
margin-bottom: 20px;
}
<div class="container">
<div class="row eventRow">
<div class="col-md-4">
<div class="events">
<div class="event_item row">
<div class="col-md-12">
<h6>03/16/2016</h6>
<h2>Just a title testing, why is this long?</h2>
<p>Detroit</p>
<h5 style="font-weight: bold;">7pm - 7am</h5>
</div>
</div>
</div>
<div class="btn-align">
<button type="button" class="btn btn-primary doEdit" editKey="'.$key.'"data-toggle="modal" data-target="#editEvent">
Edit Event
</button>
<button type="button" class="btn btn-primary doDelete" delKey="'.$key.'" data-toggle="modal" data-target="#deleteEvent">
Delete Event
</button>
</div>
</div>
</div>
</div>
According to your comment, you want to align the buttons in your desktop view the way it is in your mobile view. You are currently using margin-top: -20px; on your .btn-align container. Remove this and your buttons will align themselves right after your content.
EDIT: Excuse me, I totally misunderstood you. Here should be what you actually want to achieve -> fiddle
You simply used a wrong colum-rule for your container. You did just put col-md-4 in it while it should be col-md-12 or empty (like you've done it for your mobile one).
By adding col-*-12 you take the displays full width. Same goes for if you leave that empty. Since you've set up a value for md and not for xs, your xs was totally fine while your md looked a bit different. I hope now this solves your problem.
Note: If you want your buttons to be a bit in your event-item, you just add back your margin-top: -20px;. You can check my previous answer for that. Hope that helps and clarifies everything now.
use percentages as that I used in the .event_item portion. Percentages will automatically adjust it.
.event_item {
background: #2b325f;
color: white;
text-align: center;
padding: 5%;
vertical-align: top;
margin:0 0 5px 0;
height: 70%;
}
Button not centered align in Safari browser only.
JSFIddle
HTML
<div class="" style=" width: 100%; ">
<input value="Button" class="center-block" type="submit" style=""/>
</div>
CSS
.center-block {
display: block;
margin-right: auto;
margin-left: auto;
}
Above problem just come in Safari. In Chrome and Firefox it works fine.
if you don't set a width for btn:
parent - text-align: center
button child - use display:inline-block instead of display: block
.wrap {
text-align: center;
}
.center-block {
display: inline-block;
}
<div class="wrap">
<input value="Button" class="center-block" type="submit" />
</div>