I have read through multiple questions and I know it's as simple as adding text-align: center, however that's not working for me.
I have also tried to add text-center to my wrapper <div> but that did not work either.
Current result:
(Hard to see but it's all white-space to the right. I tried to add a black border with style="border: 1px black;" but nothing showed up...)
HTML
<div class="row">
<div class="btn-group btn-group-justified" id="dataTableSegmentedControl" role="group" aria-label="...">
<div class="btn-group" role="group">
<button type="button" class="btn btn-default active">Dashboard</button>
<button type="button" class="btn btn-default">Events</button>
</div>
</div>
</div>
CSS
#dataTableSegmentedControl button {
width: 25%;
border-radius: 0;
border-top: none;
border-left: none;
border-right: none;
border-bottom-width: 3px;
display: inline-block;
margin: auto;
margin-bottom: 8px;
margin-top: 8px;
}
My agenda before running into this issue was to use the Bootstrap 3 way of making buttons equal in width by using btn-group-justified, however as my question above states it did not work for me when trying to get these buttons centered.
My end result is reverting back to using CSS to format it correctly in the center.
HTML
<div class="row" style="text-align: center;">
<div class="btn-group" id="dataTableSegmentedControl" role="group" aria-label="...">
<button type="button" class="btn btn-default">Dashboard</button>
<button type="button" class="btn btn-default">Events</button>
</div>
</div>
CSS
#dataTableSegmentedControl button {
width: 400px;
border-radius: 0;
border-top: none;
border-left: none;
border-right: none;
border-bottom-width: 3px;
margin: auto;
margin-bottom: 8px;
margin-top: 8px;
background-color: #f7f7f7;
}
Result
It's not my desired result because the width of the buttons is a static 400px. I tried 50% but that was a lot smaller.
Related
i wanna know why my button clickable area is bugged, i can only click a small area, and it works terrible.
<button class="btn btn-primary btn-dark boton-carrito" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight" aria-controls="offcanvasRight"><img src="../multimedia/shopping-cart.png" alt="" class="foto_carrito"></button>
.boton-carrito {
width: 50px;
height: 50px;
margin-left: 15px;
display: block;
}
.foto_carrito {
width: 36px;
height: 36px;
margin-left: -8px;
}
Im using bootstrap too.
Perhaps if you make the area of your button bigger using padding (options: p-1, p-2, p-3, p-4, p-5) instead of using "boton-carrito"?
class="p-2"
if you're using React JS:
className="p-2"
Good luck!
try to using min-height and min-width
it will change the minimum size of your button component.
.boton-carrito {
display: block;
min-width: 50px;
min-height: 50px;
margin-left: 15px;
}
.foto_carrito {
min-width: 36px;
min-height: 36px;
margin-left: -8px;
}
<button
class="btn btn-primary btn-dark boton-carrito"
type="button"
data-bs-toggle="offcanvas"
data-bs-target="#offcanvasRight"
aria-controls="offcanvasRight">
<img
src="../multimedia/shopping-cart.png"
alt=""
class="foto_carrito" />
</button>
Here was the docs link for min-width and min-height for more information.
Thank you
So I am trying to make this admin page responsive and there are some problems when I resize the page. I want the div with the Inventory to be aligned with the 3 buttons.
This is my container which needs to properly adapt when resizing the viewport.
.reports{
border: 1px solid red;
overflow-y: scroll;
/*overflow-x: hidden; */
height: 100%;
}
.row{
height: 4.5em;
width: 100%;
margin-left: 0;
}
.actions{
float: right;
width: 30%;
}
.entry-group{
border: 1px solid red;
float: left;
width: 70%;
}
.title{
border: 1px solid red;
float: right;
width: 72.5%;
height: 3.7em;
word-wrap: break-word;
margin-left: 2em;
}
<div class="reports">
<div class="list-group-item row">
<div class="entry-group">
<button class="btn btn-primary date" >2016-09-19</button>
<div class="title">
<h4 class="list-group-item-heading">2080136 - Inventory</h4>
<p class="list-group-item-text">2 Napier Court West Southend On Sea SS1 1JU</p>
</div>
</div>
<div class="actions">
<button class="btn btn-primary download">Download</button>
<button class="btn btn-primary edit">Edit</button>
</div>
</div>
</div>
I think there is a few issues with the code here. Firstly, I believe it odd to have DIVs between your 'tr' and td', and not having a 'table' element.
I think you are trying to mix different ways of doing things: bootstrap and HTML tables.
My suggestion is use something like layoutit.com to build a layout with divs only in bootstrap. You can easily still integrate it into your back end technology, and get the divs responsive by editing the class names, e.g. col-sm-1.
I understand that you want to use tables for reports, having said that, it should be carried through completely, without divs inbetween.
Add this:
.list-group-item-heading {
margin-top: 0;
}
https://jsfiddle.net/kefhvc7y/
Add:
.title h4 {
margin-top: 0px;
}
.date {
float: left;
}
and remove margin-left: 2em; from .title.
Here is an updated version of your fiddle: https://jsfiddle.net/r11p5n4d/
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%;
}
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;
}
My right float is not working how i expect it to.
I want my button nicely aligned to the right of my text above a line :
<div style="padding: 5px; border-bottom-width: 1px; border-bottom-color: gray; border-bottom-style: solid;">
My Text
<button type="button" class="edit_button" style="float: right; margin:5px;">My Button</button>
</div>
However it always seems to hover over the line.
If I increase the padding or margin of the DIV then the button on the right still seems to be pushed over the line at the bottom.
I have tried to play around with paddings and margins of the button on the right, but i can't seem to get it to be placed neatly next to the text.
Fiddle is here:
http://jsfiddle.net/qvsy7/
Many thanks
you need to wrap your text inside div and float it left while wrapper div should have height, and I've also added line height for vertical alignment
<div style="border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: gray;height:30px;">
<div style="float:left;line-height:30px;">Contact Details</div>
<button type="button" class="edit_button" style="float: right;">My Button</button>
</div>
also js fiddle here =)
http://jsfiddle.net/xQgSm/
Here is one way of doing it.
If you HTML looks like this:
<div>Contact Details
<button type="button" class="edit_button">My Button</button>
</div>
apply the following CSS:
div {
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: gray;
overflow: auto;
}
.edit_button {
float: right;
margin: 0 10px 10px 0; /* for demo only */
}
The trick is to apply overflow: auto to the div, which starts a new block formatting context. The result is that the floated button is enclosed within the block area defined by the div tag.
You can then add margins to the button if needed to adjust your styling.
In the original HTML and CSS, the floated button was out of the content flow so the border of the div would be positioned with respect to the in-flow text, which does not include any floated elements.
See demo at: http://jsfiddle.net/audetwebdesign/AGavv/
Verry Easy, change order of element:
Origin
<div style="">
My Text
<button type="button" style="float: right; margin:5px;">
My Button
</button>
</div>
Change to:
<div style="">
<button type="button" style="float: right; margin:5px;">
My Button
</button>
My Text
</div>
You have not used float:left command for your text.
LIke this
final answer
css
h2 {
border-bottom-width: 1px;
border-bottom-style: solid;
margin: 0;
padding: 0;
}
.edit_button {
float: right;
}
demo1
css
h2 {
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: gray;
float: left;
margin: 0;
padding: 0;
}
.edit_button {
float: right;
}
html
<h2>
Contact Details</h2>
<button type="button" class="edit_button" >My Button</button>
demo
html
<div style="border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: gray; float:left;">
Contact Details
</div>
<button type="button" class="edit_button" style="float: right;">My Button</button>