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.
Related
JSFiddle: https://jsfiddle.net/yL9b2ewu/1/
In this fiddle I have 3 DIVs using Bootstrap 3.3.7 that are next to each other; each DIV is col-sm-3.
Each DIV contains a fixed-size button, then there should be a small amount of space under the button, and then optional explanatory text. Each DIV should end with a border at the same level as the lowest available DIV regardless of whether it has text or not.
One solution is to hard-code some <BR>s for the explanation section. In the 3rd DIV I could put in 4 fixed <BR>s. But this hackery doesn't seem right to me, there should be something dynamic and robust.
<div class="col-md-12 col-sm-12 col-xs-12" style="margin-top:10px; margin-bottom: 10px; font-family:'Source Sans Pro', sans-serif; font-size: 14px">
<div class="col-sm-4 cardstyle">
<button type="button" class="btn btn-success btnSubmitWizard"><b>Submit Recall Now<br><br></b></button>
<br><br>No changes can be made after the recall is submitted.
<!-- Can Insert <BR> here but wrong approach -->
</div>
<div class="col-sm-4 cardstyle">
<button type="button" class="btn btn-primary btnSubmitWizard"><b>Review and Edit<br><br></b></button>
<br><br>Review or edit timeline before submitting.
<!-- Can Insert <BR> here but wrong approach -->
</div>
<div class="col-sm-4 cardstyle">
<button type="button" class="btn btn-primary btnSubmitWizard"><b>Logout and<br>Submit Later </b></button>
<br><br>
<!-- Can Insert <BR> here but wrong approach -->
</div>
</div>
I think that you could select only the last div using :last-child and add to it a bigger padding-bottom.
Give a class for the parent of the columns. Something like .colsParent.
Then, for the same breakpoint of Bootstrap #media, you set flexbox for this element.
#media (min-width: 768px) {
.colsParent {
display: flex;
}
}
By default, it fills the full height of the entire column.
Do not set display: flex inline, because it will affect the layout for devices smaller than the breakpoint above.
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'm trying to figure out how to place my <h4> tag and <button tag to be side by side.
Current Behaviour - Right now they are underneath my image and I want them to put in a horizontal position.
Required Behaviour - I want the <h4> to be side by side with the image and the <button> side by side with the <h4>.
I tried floating to the right and display blocks, but the elements are still underneath the image and one another.
Codepen Link
Browsers by default typically display header elements as block. Use inline-block to not have it be in it's own line.
HTML
<h4>title</h4>
<button>button</button>
CSS
h4 {
display: inline-block;
}
DEMO: http://codepen.io/anon/pen/bVPXOK
Maybe
<h4 style="display:inline-block;">
heading
</h4>
<button> submit </button>
?
I saw your codepan the real problem was that your button was outside the right div that is why it was not aligned next to <h4>. I have edited the code (Updated Working Codepan)-
Modified CODE
<div class=" panel-body">
<div class="row-fluid">
<div class="row-fluid">
<img class="hotel-img img-responsive img-rounded" src="http://en.hotel-palaciodelmar.com/static/galerias/hotel/01-hotel-santander-sercotel-palacio-del-mar-fachada-foto.jpg" />
<h4 class="hotel-title""><span class="hotel-location"></span> Grand Master Flex</h4>
<button class="btn btn-primary" type="button" href="#more-info" data-toggle="modal"><i class="fa fa-info-circle"></i> More info</button>
</div>
</div>
</div>
instead of this (your previous code) -
<div class=" panel-body">
<div class="row-fluid">
<div class="row-fluid">
<img class="hotel-img img-responsive img-rounded" src="http://en.hotel-palaciodelmar.com/static/galerias/hotel/01-hotel-santander-sercotel-palacio-del-mar-fachada-foto.jpg" />
<h4 class="hotel-title""><span class="hotel-location"></span> Grand Master Flex</h4>
</div>
<button class="btn btn-primary" type="button" href="#more-info" data-toggle="modal"><i class="fa fa-info-circle"></i> More info</button>
</div>
</div>
and to align both <h4> and <Button> next to image you have to change your css and add display: inline-block !important; like this (Updated Codepan with image alignment) -
CSS
/* Hotel Search Panel */
.hotel-img {
display: inline-block !important;
width: 250px;
}
Another option you can use is the "float-right" class. If you nest your button in the h4, it can be accomplished like so:
<h4>Title<button class="float-right">My Button</button></h4>
Hope that helps!
This is my code: http://www.bootply.com/Tm5C3Ja7RL
<div class="col-md-12">
<h3>Test</h3><button class="btn btn-default pull-right">Button</button>
</div>
It drops the button onto a second line as well as aligning it to the right. I only want to push it to the right. Can anyone show me the best way of doing this.
As EWit mentioned, a header is a block element.
This block will push down other elements behind it.
There are several solutions, one better/cleaner than the other
Changing the header to an inline element
h3 {
display:inline;
}
This will result in your title with the button right next to it.
I don't think the pull-right will have an effect on it. Should be tested.
You could also add the condition that the h3 must have a certain class or must be inside an element with a certain class.
Splitting the column in 2
<div class="col-md-10">
<h3>Test</h3>
</div>
<div class="col-md-2">
<button class="btn btn-default pull-right">Button</button>
</div>
By also using col-sm, for example, you could alter this so that the button is displayed next to the title in a medium/large screen and under it in a small screen.
However, the pull-right might make it look pretty weird then.
<div class="col-md-10 cold-sm-12">
<h3>Test</h3>
</div>
<div class="col-md-2 col-sm-12">
<button class="btn btn-default pull-right">Button</button>
</div>
Put the button in the h3-element
As EWit mentioned, you can also put the button inside the h3-element.
This will keep the button in the same line, but might alter the text formatting.
<div class="col-md-10">
<h3>Test <button class="btn btn-default pull-right">Button</button></h3>
</div>
Put it inside the <h3>. Headers in HTML take up the full width as a block object. As such other objects are pushed down.
Try:
<div class="col-md-12">
<h3>Test <button class="btn btn-default pull-right">Button</button></h3>
</div>
I myself extend it with some markup for basic links but to align it to the same height as the text in the header.
h1 .pull-right {
padding: 15px 5px 0 0;
}
But I have no idea what values would be best for a button to align it. Trial and error I guess.
I have a button group in a panel-header. I want them floated to the right, but when I do this the buttons are now down at the bottom of the header and I need them to be centered. How do I do this?
here's the HTML:
<div class="panel panel-default">
<div class="panel-heading">
Member of the following Units
<div class="btn-group btn-group-sm">
<button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-plus"></span></button>
<button type="button" class="btn btn-danger" ><span class="glyphicon glyphicon-remove-circle"></span></button>
</div>
</div>
<div class="panel-body">
test
</div>
<div class="panel-footer">
test
</div>
</div>
and a fiddle example: http://jsfiddle.net/snowburnt/4ejuK/
Strangely enough, in my linux dev environment on chromium, the buttons themselves are properly centered but the icons within them are lower than they should be, I have a feeling this will answer both these issues.
You should add the class pull-right to your .btn-group div, instead of specifying float:right.
When you float an element, it loses block layout. It will no longer "push down" the bottom of its container since it doesn't have a height. You can fix this by setting overflow:hidden on your .panel-heading to allow it to resize properly. You will have to add top padding to the .panel-heading and negative top padding to the .btn-group to accomodate the height of the .btn-group.
I forked your fiddle: http://jsfiddle.net/Dq5ge/
You must clear your floats. There are many methods for this like the clearfix hack or using overflow: hidden. Which is what i did in your fiddle. http://jsfiddle.net/4ejuK/2/
.panel-heading {
overflow: hidden;
}
parent elements will collapse if their floated children are not cleared causing a lot of unexpected layout issues.
add
.container{
line-height:2.2;
}
along with what David has suggested above to have the text truly in the center vertically.
check fiddle
I mixed the 2 best solutions in one, for a better fit without changing too much the size or using top negative index:
.panel-heading {
overflow: hidden;
}
and using:
<div class="pull-right">
here you are the example: Jsfiddle example
You can use a trick for that ;)
...
Member of the following Units
<div class="btn-group btn-group-sm">
<button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-plus"></span></button>
<button type="button" class="btn btn-danger" ><span class="glyphicon glyphicon-remove-circle"></span></button>
</div>
<div class="btn btn-primary btn-sm" style="opacity:0.001">I am hidden</div>
...
Good luck - S.M. Mousavi
I solved this issue for myself today. All of the seemingly-working suggestions I found involved setting heights of things in pixels to match the buttons, and that just didn't sit right with me. I wanted the vertical alignment to be independent of the actual height of the panel text itself.
If you look at #ithcy's answer, and jack up the font-size, you have a problem (demo).
The more googling I did, the more I became convinced that CSS's vertical-align was what I wanted, but it never seemed to do what I think it should do. Then I ran across an article by Louis Lazaris that better explained what vertical-align is,
The vertical-align property can be broken down into three
easy-to-understand steps:
It only applies to inline or inline-block elements
It affects the
alignment of the element itself, not its contents (except when applied
to table cells)
When it’s applied to a table cell, the alignment
affects the cell contents, not the cell itself
and more importantly is not:
The common misconception about vertical-align is that, when it’s
applied to an element, it will make all the elements inside that
element change their vertical position.
My solution was to use CSS table formatting (which is what vertical-align is for, after all) instead of the floats that Bootstrap provides with pull-left and pull-right. It takes a little extra markup the way I (naively) did it, but I got the result I wanted:
HTML
<div class="panel-heading table-style">
<span class="panel-title">Member of...</span>
<div class="button-wrap">
<div class="btn-group btn-group-sm">
<button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-plus"></span></button>
<button type="button" class="btn btn-danger"><span class="glyphicon glyphicon-remove-circle"></span></button>
</div>
</div>
</div>
CSS
.panel-heading.table-style {
display: table;
width: 100%;
}
.panel-heading.table-style .panel-title {
display: table-cell;
vertical-align: middle;
text-align: left;
}
.panel-heading.table-style .button-wrap {
display: table-cell;
vertical-align: middle;
text-align: right;
}
I made a demo of the way I'm using it, which I'm sure can be improved on.
I am very aware that the btn-group has a tendency to wrap with this method, which looks terrible. I just don't have the knowledge or experience to fix it. In my use case, I only need single buttons, not groups, so it's working well enough for me.
It's very late, but I simply solve by this css:
.panel-heading h3,
.panel-heading .btn-group
{
display:inline-block;
}