I have a row div which contains 1 div called horizontal-form, inside this horizontal-form contains other two divs, called form-group, and inside this form-group I have another div, called input-group which contains 1 a tag and 1 span text.I would like to align these span to the most right position. I tried to use class = pull-right but then it aligned to the right position but compared to the nearest div, here is the input-group. Can anyone show me how can I align the span to any position that I wish, for example here i would like to align it to the right position compared to the div row or horizontal-form
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="row">
<div class="horizontal-form">
<div class="form-group">
<div class="input-group subQuestionsLabel" data-toggle="collapse" >
FirstItem
<span class="button">
<button type="button" class="btn btn-default"><i class="fa fa-indent"></i> </button>
</span>
</div>
</div>
<div class="form-group">
<div class="input-group subQuestionsLabel" data-toggle="collapse" >
SecondItem
<span class="button">
<button type="button" class="btn btn-default"><i class="fa fa-indent"></i> </button>
</span>
</div>
</div>
</div>
</div>
This happened beacause of "input-group" class as it has "display:table;" property in css.
So There is two ways to resolve this.
Remove this class
Overwrite css for this class as "display:block"
The thing you are asking its not the right way to do it as i see in your code because you are using bootstrap and bootstrap logic doesnt work like this. If you need your span align whatever you want dont put it inside the div with horizontal-form class and form-group class. In this case if i understood it well to align it right just apply float: right; to the span.
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.
Here is my code.
<div class="col-lg-4">
<label>ID Expire</label>
<div class="row ">
<div class="col-lg-5">
<input type="text" class="form-control input-sm" id="TextIDExpire" />
</div>
<div class="col-sm-4">
<button class="btn btn-default form-control " id="BtnBrowsePhoto"> Browse <i class="glyphicon glyphicon-folder-open"></i> </button>
</div>
<div class="col-lg-3">
<button class="btn bg-yellow form-control" id=" btnviewphoto"> View <i class="glyphicon glyphicon-eye-open"></i> </button>
</div>
</div>
</div>
Expected output is
but i got much white spaces between controls.What i want to do. Please help me
want to center an image , very easy , bootstrap comes with two classes .center-block and text-center , use the former in the case of your image being a BLOCK element eg. add img-responsive class to your img makes the img a block element , you should know this if you know how to navigate in the web console and see applied styles to an element .
Don't want to use a class , no problem , here is the CSS bootstrap uses , you can make a custome class or write a CSS rule for the element to match the bootstrap class .
// in case your dealing with a block element apply this to the element itself
.center-block {
margin-left:auto;
margin-right:auto;
display:center;
}
// in case your dealing with a inline element apply this to the parent
.text-center {
text-align:center
}
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!
I've this Bootstrap HTML markup:
<div class="container">
<div class="field col-md-6 col-md-offset-3">
<button type="button" class="btn btn-block btn-primary">Large button</button>
<button type="button" class="btn btn-primary">X</button>
</div>
</div>
I would like the large button to fill the column (col-md-6), therefore I've used btn-block. But I would like the X button to float right in the same line, taking a bit of the width of the Large button.
The X button should stay small, and the Large button should fill up the rest of the width.
How can I do that?
See my JSFiddle.
You'll want to use input groups to keep everything together.
http://getbootstrap.com/components/#input-groups
Extend form controls by adding text or buttons before, after, or on
both sides of any text-based . Use .input-group with an
.input-group-addon to prepend or append elements to a single
.form-control.
Buttons in input groups are a bit different and require one extra
level of nesting. Instead of .input-group-addon, you'll need to use
.input-group-btn to wrap the buttons. This is required due to default
browser styles that cannot be overridden.
Here is the modification I made to your fiddle.
http://jsfiddle.net/oayw7uhh/5/
All you need to do is surround both elements with a input-group-div
Then, wrap the X button in a span with the class input-group-btn.
https://jsfiddle.net/dennismadsen/oayw7uhh/
Your finished code is
<div class="container">
<div class="field col-md-6 col-md-offset-3">
<div class="input-group">
<button type="button" class="btn btn-block btn-primary">Large button</button>
<span class="input-group-btn">
<button type="button" class="btn btn-primary">X</button>
</span>
</div>
</div>
</div>
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.