My goal is simple: having a label on the left, and a download button on the right.
They should result in the same line, preferably aligned in the middle of the headline.
But at least the following is not working:
<div>
<h1 style="display:inline-block">My Label left</h1>
<div style="float:right">
<a href="/export" target="_blank">
<button type="button" class="btn btn-outline-primary">
<span class="glyphicon glyphicon-download-alt"> Download</span>
</button>
</a>
</div>
</div>
https://jsfiddle.net/Lbav4mhe/
Add a class or id to the outer/wrapper div and then set some css to it, like the below code shows. (Also, you don't need that float: right if using the CSS I provided)
#wrapperDiv {
display: flex;
align-items: center;
justify-content: space-between;
}
<div id="wrapperDiv">
<h1>My Label left</h1>
<div>
<a href="/export" target="_blank">
<button type="button" class="btn btn-outline-primary">
<span class="glyphicon glyphicon-download-alt"> Download</span>
</button>
</a>
</div>
</div>
Related
I have a link button that I need to place to the right of a div. Adding float-left on the div and float-right on the link button does not do it. What am I doing wrong?
https://jsfiddle.net/3v2s4c50/
<div class="container">
<div class="row">
<div class="col">
<div class="card">
<div class="card-header">Today and Tomorrow</div>
<div class="card-body">
<div class="float-left">Someone somewhere is waiting for you.</div>
<a role="button" href="google.com" class="float-right btn btn-primary"> Login</a>
</div>
</div>
</div>
<div class="col">
2 of 2
</div>
</div>
</div>
remove floats and add:
.card-body{
display: flex;
justify-content: space-between;
align-items: center;
}
<div class="card-body d-flex">
<div class="flex-fill">Someone somewhere is waiting for you</div>
<a role="button" href="google.com" class="flex-fill btn btn-primary"> Login</a>
</div>
Well, it is doing it. But the portion of the screen that is showing the results is not wide enough to show both the div with the text and the button in the same row.. then it breaks down.
If you change the text to something smaller, like 'Someone is waiting' you can see the button floating right :)
You can also set a fixed width for your text div (currently it is expanding based on the content).
<div class="card-body">
<div class="float-left" style="width: 50%;">Someone somewhere is waiting for you</div>
<a role="button" href="google.com" class="float-right btn btn-primary"> Login</a>
</div>
You can add your link to a div with any class. Then add style "text-align: right;" into your div like this:
.my-link {
text-align: right;
}
.
<div class="my-link">
<a role="button" href="google.com" class="float-right btn btn-primary"> Login</a>
</div>
.
I hope this will be useful.
How do you make a Div with 2 buttons become inline?
<div>
<h2 id="break-label"> Break Length </h2>
<div id="button">
<button id="break-decrement">
handleClickBreakDecrement
</button>
<p id="break-length"> 5 minutes or something </p>
<button id="break-increment">
handleClickBreakIncrement
</button>
</div>
</div>
The div with the ID="button" must be inline like this:
**handleClickBreakDecrement** 5 minutes or something **handleClickBreakIncrement**
Instead of this:
**handleClickBreakDecrement**
5 minutes or something
**handleClickBreakIncrement**
I tried using display : inline but nothing happened
The paragraph element (<p>...</p>) between your two buttons is a block-level element, which accounts for the behavior you're witnessing.
To fix, either set display: inline on the paragraph element, or replace it with an inline element like <span>...</span>:
<div>
<h2 id="break-label"> Break Length </h2>
<div id="button">
<button id="break-decrement">handleClickBreakDecrement</button>
<span id="break-length"> 5 minutes or something </span>
<button id="break-increment">handleClickBreakIncrement</button>
</div>
</div>
To make the inner buttons and paragraph render on the same line, you can set their CSS property display as inline-block, like the following snippet:
#button > button, p {
display: inline-block;
}
<div>
<h2 id="break-label"> Break Length </h2>
<div id="button">
<button id="break-decrement">
handleClickBreakDecrement
</button>
<p id="break-length"> 5 minutes or something </p>
<button id="break-increment">
handleClickBreakIncrement
</button>
</div>
</div>
Three feasible ways to achieve:
#button {
display: flex;
}
<div>
<h2 id="break-label"> Break Length </h2>
<div id="button">
<button id="break-decrement">
handleClickBreakDecrement
</button>
<p id="break-length"> 5 minutes or something </p>
<button id="break-increment">
handleClickBreakIncrement
</button>
</div>
</div>
#button button,
#button p {
display: inline;
}
<div>
<h2 id="break-label"> Break Length </h2>
<div id="button">
<button id="break-decrement">
handleClickBreakDecrement
</button>
<p id="break-length"> 5 minutes or something </p>
<button id="break-increment">
handleClickBreakIncrement
</button>
</div>
</div>
#button {
overflow: hidden;
}
#button button,
#button p {
float: left;
}
<div>
<h2 id="break-label"> Break Length </h2>
<div id="button">
<button id="break-decrement">
handleClickBreakDecrement
</button>
<p id="break-length"> 5 minutes or something </p>
<button id="break-increment">
handleClickBreakIncrement
</button>
</div>
</div>
Hi all I have created two buttons in alligned in the two sides of my web page, one on the left and one the right side. Each button upon its click shows an alert text on its relevant side like in the picture
The code that I have used is the following :
<div class="row">
<div class="col-lg-6">
<div class="previous">
<button type="button" id="button_1" class="btn btn-primary btn-lg">Button1</button>
<span id="alert_info_1" class="alert alert-info">
Alert Info
</span>
</div>
</div>
<div class="col-lg-6 text-left">
<div class="next" >
<button type="button" id="button_2" class="btn btn-primary btn-lg">Button2</button>
<span id="alert_info_2" class="alert alert-info ">
Alert Info
</span>
</div>
</div>
</div>
While the css for the alignment of the buttons :
.previous {
text-align: left;
}
.next {
text-align: right;
}
What I'd like to do is to make the alert info text of the button 2 to appear on the left side of the button and not on the right as it is show on the above picture
I've tried to add text-left in the button class but didn't work.
I also tried to add pull-left class in the span class, it forced the text to the left but the alert text appeared quite far from the button 2 as in the following image:
Does anyone has any idea how to fix this ?
just replace your second button and alert box then it will work and if you do not change your html , so need to add some extra css
.previous {
text-align: left;
}
.next {
text-align: right;
}
<link rel="stylesheet prefetch" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<div class="row">
<div class="col-xs-6">
<div class="previous">
<button type="button" id="button_1" class="btn btn-primary btn-lg">Button1</button>
<span id="alert_info_1" class="alert alert-info">
Alert Info
</span>
</div>
</div>
<div class="col-xs-6 text-left">
<div class="next">
<span id="alert_info_2" class="alert alert-info ">Alert Info</span>
<button type="button" id="button_2" class="btn btn-primary btn-lg">Button2</button>
</div>
</div>
</div>
Swap second span and button:
.previous {
text-align: left;
}
.next {
text-align: right;
}
<link rel="stylesheet prefetch" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<div class="row">
<div class="col-xs-6">
<div class="previous">
<button type="button" id="button_1" class="btn btn-primary btn-lg">Button1</button>
<span id="alert_info_1" class="alert alert-info">
Alert Info
</span>
</div>
</div>
<div class="col-xs-6 text-left">
<div class="next">
<span id="alert_info_2" class="alert alert-info ">Alert Info</span>
<button type="button" id="button_2" class="btn btn-primary btn-lg">Button2</button>
</div>
</div>
</div>
I need your help for an issue I want to create some button with the same size (no matter of the text) and add the arrow icon on the right corner of the button.
But the arrow is not align with the other button because the number of caracters of the text.
I am using bootstrap here is the code:
<div class="col-md-6">
<div class="item" style="text-align: center">
<a class="btn btn-programs" style="width:230px" href="#">My 1st button with longer text<span class="btn-label"><i class="glyphicon glyphicon-chevron-right"></i></span></a>
</div>
</p>
<div class="item" style="text-align: center">
<a class="btn btn-programs" style="width:230px" href="#">My 2nd Button <span class="btn-label"><i class="glyphicon glyphicon-chevron-right"></i></span></a>
</div>
</p>
</div>
</div>
use the class
btn-block
<a class="btn btn-programs btn-block" href="#">My 1st button<span class="btn-label btn-block"><i class="glyphicon glyphicon-chevron-right"></i></span></a>
Add following css to your page
.item a span.btn-label
{
float: right;
}
I am trying to use Bootstrap to quickly whip up a small internal site and I'm having some issues with a specific layout on it's home page.
I have two rows and the first row is filled with link anchors dressed up as buttons. I want them all to be the same width and height, word wrap their contents and have a strong 'title' text with summary text, all text vertically aligned to the middle of the button.
I've achieved fixed width buttons and word wrap but I can't work out where to go from here to get them all the same height and then, of course, vertically align that text to the middle. I'm sure that line break element isn't helping things either.
HTML
<div class="container">
<div class="row">
<div class="col-md-2">
<a href="#" class="btn btn-default btn-lg btn-fill" role="button">
<strong>Button A</strong><br/>
<span>Long Summary That's Annoyingly Long</span>
</a>
</div>
<div class="col-md-2">
<a href="#" class="btn btn-default btn-lg btn-fill" role="button">
<strong>Button B</strong><br>
<span>Very Long Summary</span>
</a>
</div>
</div>
</div>
CSS
.btn-fill {
width: 100%;
white-space: normal;
}
I have a Bootply example here
You could use .btn-toolbar with .btn-group-justified to make it easily (the rendering differs a little bit) :
<div class="container">
<div class="btn-toolbar" role="toolbar">
<div class="btn-group btn-group-lg btn-group-justified btn-group-fill-height">
<a href="#" class="btn btn-default" role="button">
<strong>Part A</strong><br>
<span>Summary</span>
</a>
<a href="#" class="btn btn-default" role="button">
<strong>Part B</strong><br>
<span>Very Long Summary</span>
</a>
<a href="#" class="btn btn-default" role="button">
<strong>Part D</strong><br>
<span>Summary</span>
</a>
<a href="#" class="btn btn-default" role="button">
<strong>Part E</strong><br>
<span>Long Summary That's Annoyingly Long</span>
</a>
<a href="#" class="btn btn-default" role="button">
<strong>Part F</strong><br>
<span>Summary</span>
</a>
<a href="#" class="btn btn-default" role="button">
<strong>Part G</strong><br>
<span>Very Long Summary</span>
</a>
</div>
</div>
</div>
.btn-group-fill-height .btn {
white-space: normal;
}
Bootply
Why not add "text-center" to the anchor class and do something like:
.btn {
height: 170px;
}
For the height problem you're running into. That's an arbitrary number I picked but it worked when I punched it into your example.
Hope that helps.