Bootstrap 4 - center text with button label - html

I want to achieve a very simple goal: I have a line - text aligned to left and a button to right. And I want the text to be vertically aligned to button's label. I tried to play with padding, margins,... but nothing worked. I believe there is a simple and smart solution I am missing.
Plunker demo:
https://plnkr.co/edit/KwRF2uOmKc3aPFQW9DXn?p=preview
<div>
<span>
This text should match the "Submit" text
</span>
<button type="button" class="btn btn-secondary float-right">Submit</button>
</div>
Thank for your answers.

Bootstrap 4 is based on flexbox, so already has classes for applying those alignment utilities. d-flex makes the container a flex container, and align-items-center does the vertical alignment. Try something like:
<div class="d-flex align-items-center">
<span>
This text should match the "Submit" text
</span>
<button type="button" class="btn btn-secondary ml-auto">Submit</button>
</div>

Related

Centring 2 buttons inside a div in bootsrap

First of all hi and thanks for your time!
I have a problem that I can't solve with bootsrap, I'm trying to center 2 buttons inside a div, in this code the buttons are aligned left, how can I center them?
Here is my code:
<div class="align-self-center">
<button type="button" class="btn btn-outline-primary"> BTN1</button><button type="button" class="btn btn-success">BTN2</button>
</div>
Use text-center class provided by bootstrap to align your buttons.
<div class="text-center">
<button type="button" class="btn btn-outline-primary">BTN1</button>
<button type="button" class="btn btn-success">BTN2</button>
</div>
The text-center class is basically doing -
text-align:center;
P.S. Not sure what .align-self-center is doing here
Suggestion - I see that you are using bootstrap 4. You can also use the class "btn-group" if it meets your requirements.
Click here to go to bootstrap 4 docs

How to align element inside of many wrapped divs

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.

Bootstrap button positioning

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>

Bootstrap floating drops item onto second line

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.

Vertical align of inline HTML elements

I know there is tons of questions (1,2,3,4,5) about inline elements I couldn't make it.
In Twitter Bootstrap I have an alert row, but the bell icon in right side isn't vertically aligned with the text in left side. Icon appears lower than the text. I tried vertical-align:middle; .row line-height etc. I also need the solution be responsive in mobile screens.
You can see my tryouts in fiddle: http://jsfiddle.net/mavent/DdLED/37/
<div class="alert alert-warning ">Today many things happened <span class="badge badge-info">121</span>
<div class="pull-right"><a class="btn btn-lg" data-toggle="collapse" data-target="#myTable"><i class="glyphicon glyphicon-bell"></i></a>
</div>
</div>
Edit: Solution:
I solved issue like the example 8 in fiddle: http://jsfiddle.net/mavent/DdLED/45/
Would this work for you? (I know, a bit of a hack)
[ CSS ]
.bring_it_up {
margin-top: -3px;
}
[ HTML ]
<!-- part 8 -->
<div class="alert alert-warning border2 "><span class="border">Today many things happened Part 8</span><span class="border badge badge-info">121</span>
<a class="bring_it_up no_padding pull-right btn btn-lg" data-toggle="collapse" data-target="#myTable"><i class="no_padding glyphicon glyphicon-bell"></i>
</a>
</div>