Inside this code
<div class="content">
<h1>TraceMySteps</h1>
<div>
<div range-slider
floor="0"
ceiling="19"
dragstop="true"
ng-model-low="lowerValue"
ng-model-high="upperValue"></div>
</div>
<button type="button" class="btn btn-primary" id="right-panel-link" href="#right-panel">Visualizations Panel</button>
</div>
I have my bootstrap button created. The problem here is that it is positioned on the bottom left of my div. I want to put it on the top-right/center of the div, aligned with my title (h1). How do I position it where I want it? I'm new to bootstrap so I do not know about these workarounds. Thank you.
You can use bootstrap's classes to do this.
You can add pull-right class to float the button to the right.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="content">
<button type="button" class="btn btn-primary pull-right" id="right-panel-link" href="#right-panel">Visualizations Panel</button>
<h1>TraceMySteps</h1>
<div>
<div range-slider floor="0" ceiling="19" dragstop="true" ng-model-low="lowerValue" ng-model-high="upperValue"></div>
</div>
</div>
Live example here.
As per your comments, for more precise control you can do this with absolute positioning instead.
You give the content element relative positioning and give the button absolute positioning. You can then use any combination of the top, right, bottom, and left properties to place it where you would like.
.content {
position: relative;
}
#right-panel-link {
position: absolute;
top: 0;
right: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="content">
<h1>TraceMySteps</h1>
<div>
<div range-slider floor="0" ceiling="19" dragstop="true" ng-model-low="lowerValue" ng-model-high="upperValue"></div>
</div>
<button type="button" class="btn btn-primary" id="right-panel-link" href="#right-panel">Visualizations Panel</button>
</div>
Live example here.
Making the bootstrap-button inside a div tag
you can create the bootstrap button inside a div and use align.
Example:
<div style="width:350px;" align="center">
<button type="button" class="btn btn-primary" >edit profile picture</button>
</div>
Related
Here is my HTML code. I am trying to add a vertical line that seperates the login and sign up buttons, anybody have an idea how to do this?
<header class="header">
<h1>The Textbook Marketplace</h1>
<div class="header-buttons">
<button class="btn login-btn">Log In</button>
<button class="btn signup-btn">Sign Up</button>
</div>
</header>
add a div between them and give it proper height width and color
.line{
background-color:black;
height:20px;
width:3px;
}
.header-buttons{
display:flex;
justify-content:center;
align-items:center;
}
.btn{
margin: 10px
}
<header class="header">
<h1>The Textbook Marketplace</h1>
<div class="header-buttons">
<button class="btn login-btn">Log In</button>
<div class="line"></div>
<button class="btn signup-btn">Sign Up</button>
</div>
</header>
Depends of the height you want for the line. But I think the solution would be to put a border (for ex: solid 2px black) on the right border of the left button or vice versa if you put a border for the right button. Or, create a <div> between the two buttons and play with background color or the borders.
Here is my code.I have minimized it as short as I can. In that text-align:right; is not working
.forgot {
color: red;
text-align: right;
}
<div class="content">
<center>
<h3><u>LOREM IPSUM</u></h3><br>
<button class="btn btn-primary">Login as Guest</button>
</center>
<br>
Forgot details?
</div>
As #TreyBake pointed out, center and u are not supposed to be used instead, you should use the text-align and em.
Also, here's the solution with setting right align to parent.
.forgot {
color: red;
}
.center-aligned{
text-align: center;
}
.right-aligned{
text-align: right;
}
<div class="content">
<div class="center-aligned">
<h3><em>LOREM IPSUM</em></h3><br>
<button class="btn btn-primary">Login as Guest</button>
</div>
<br>
<div class="right-aligned">
Forgot details?
</div>
</div>
The align is set on the parent element. Not on the element itself.
.forgot {
color: red;
}
.content {
text-align: right;
}
<div class="content">
<center>
<h3><u>LOREM IPSUM</u></h3><br>
<button class="btn btn-primary">Login as Guest</button>
</center>
<br>
Forgot details?
</div>
You can use text-align: right on a parent element. Create a div wrapping your link and give him the class. See example below:
html:
<div class="content">
<center>
<h3><u>LOREM IPSUM</u></h3><br>
<button class="btn btn-primary">Login as Guest</button>
</center>
<br>
<div class="text-right">
Forgot details?
</div>
</div>
css:
.forgot {
color: red;
}
.text-right {
text-align: right;
}
If you have Bootstrap installed, you can do all of this without css. Your html would look like this:
<div class="content">
<center>
<h3><u>LOREM IPSUM</u></h3><br>
<button class="btn btn-primary">Login as Guest</button>
</center>
<br>
<div class="text-right">
Forgot details?
</div>
</div>
Please note at time of writing, this is Bootstrap v4.2.1
Here's Why It's Not Aligning
You have your <a class="forgot"> element with the "Forgot Details" text inside of it. Since it's an <a> element, by default it will only stretch to be as wide as the text you place inside it. So as you can see in the screenshot below, your <a class="forgot"> element (highlit) is only as wide as the "Forgot Details" text. So your "text-align: right;" technically is aligning the text to the right, but since the parent container (the <a class="forgot"> element) is only as wide as the text, horizontally aligning it doesn't make a difference.
How To Fix It
Where an <a> element stretches only to fit its contents, a <div> element by default stretches horizontally to fill its parent container. So what you can do is enclose your <a class="forgot"> in a <div class="forgot-parent">, and then apply the "text-align: right" to the <div class="forgot-parent"> so that the <a class="forgot"> gets aligned to the right.
So the code will look like this:
.forgot {
color: red;
}
.forgot-parent {
text-align: right;
}
<div class="content">
<center>
<h3><u>LOREM IPSUM</u></h3><br>
<button class="btn btn-primary">Login as Guest</button>
</center>
<br>
<div class="forgot-parent">
Forgot details?
</div>
</div>
Note how I removed "text-align: right;" from '.forgot' and added it to '.forgot-parent'. The result is shown below. First, here is the parent <a class="forgot-parent"> div highlit.
Note how the <div class="forgot-parent"> has stretched to the full screen width. Next the <a class="forgot"> is highlit:
Note that the <a class="forgot"> is still only the width of its contents (the "Forgot Details" text), but it's now aligned to the right within its parent div.
I have a row with header text and a button on the right.
<div class="page-header">
<div class="pull-right">
<button type="button" class="btn btn-success pull-right">Set All Values</button>
</div>
<h4>Points Earned for Each Chapter</h4>
</div>
The code above is what I have currently but I have tried many variations. In all of them, the button is not vertically aligned with the text. (The image below includes the overlay when I hover over the element in the Elements pane of Chrome, in order to show vertical alignment.)
Searching existing questions on stackoverflow, I've found this question posted a number of times; however, I found no knowledgeable answers.
Has anyone figured this out?
This happens because the line-height of the heading and the height of the button differ.
With a line-height: 1.9; for the heading it should work:
.page-header h4 {
line-height: 1.9;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="page-header">
<div class="pull-right">
<button type="button" class="btn btn-success pull-right">Set All Values</button>
</div>
<h4>Points Earned for Each Chapter</h4>
</div>
You can try using the grid to be mobile friendly and make everything inside vertically aligned.
<div class="page-header vertical-center">
<div class="row">
<div class="col-md-8">
<h1>Text on the left</h1>
</div>
<div class="col-md-4">
<button type="button" class="btn btn-success pull-right">Set All Values</button>
</div>
</div>
</div>
Add this CSS
.row > div {
border: 1px solid black;
}
.vertical-center .row {
display: flex;
align-items: center;
}
/*maybe create an id instead of h1*/
h1 {
margin: 0;
}
I've been brushing up on html, css and javascript by working on a little project that I thought would be useful. It is a recipe finder based on what recipes I have in home. Anyways, my question is about lining up a few of the elements in the html page.
The part of the html page in question is:
<form>
<select size=10 id="first"></select>
<button type="button" id="addAll" onclick="rightAll()">
Add All
</button>
<button type="button" id="removeAll" onclick="leftAll()">
Remove All
</button>
<button type="button" id="add" onclick="right()">
>>
</button>
<button type="button" id="remove" onclick="left()">
<<
</button>
<select size=10 id="second"></select>
</form>
My css document:
html, body {
height: 100%;
min-height: 100%;
}
select{
width: 300px;
}
Because all the elements are in a form tag they all appear inline. I tried putting the buttons in a table, but the tables formatting put the first select on one line, the table on a new line, and the second select on a new line.
Here is what my formatting looks like now:
and here is what I want it to look like (thanks to paint)
I'm sure I could figure out how to center the buttons vertically in the form, but if you could help me out with that too then I would really appreciate it!
HTML
<form>
<div id="sel1">
<select size=10 id="first"></select>
</div>
<div id="buttons">
<div id="buttons1">
<button type="button" id="addAll" onclick="rightAll()">
Add All
</button>
<button type="button" id="removeAll" onclick="leftAll()">
Remove All
</button>
</div>
<div id="buttons2">
<button type="button" id="add" onclick="right()">
>>
</button>
<button type="button" id="remove" onclick="left()">
<<
</button>
</div>
</div>
<div id="sel2">
<select size=10 id="second"></select>
</div>
</form>
CSS
html, body {
height: 100%;
min-height: 100%;
}
select{
width: 300px;
}
div {
float: left;
}
#buttons1, #buttons2 {
float: none;
text-align: center;
}
It is up to you to tweak paddings and margins to leave it at your desire.
you should use div if you want to extent your design further, table is not responsive directly and type of fixed layout with messy code , you may try use div and other css property .
anyway just for that middle section , you may try div inside your table td like this :
<div style="width:100%;">
<div style="width:50%;float:left;">
<button type="button" id="addAll" onclick="rightAll()">
Add All
</button>
<div>
<div style="width:50%;float:right;">
<button type="button" id="removeAll" onclick="leftAll()">
Remove All
</button>
<div>
<div style="clear:both;"></div>
</div>
<div style="width:100%;">
<div style="width:50%;float:left;">
<button type="button" id="add" onclick="right()">
>>
</button>
<div>
<div style="width:50%;float:right;">
<button type="button" id="remove" onclick="left()">
<<
</button>
<div>
<div style="clear:both;"></div>
</div>
Cheers !
I made a simple demo in which I have a div containing a button, but the button is not vertically aligned I used line-height as well as position absolute and top margin but it does not work. Why doesn't it work? Here is my code:
<div ng-app='app'>
<div ng-controller='first as f'>
<div class='col-xs-4 text-center' style='background-color:red;height:70px;line-height:70px'>
<button type="button" class="btn btn-primary btn-lg btn-block" style:'position:absolute;top:10px'>Block level button</button>
</div>
</div>
</div>
http://codepen.io/naveennsit/pen/KVawpW
Use following css. Make button position absolute and div position relative.
.btn-block {
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
width: 100%;
}
.col-xs-4 text-center{
position:relative;
}
Working Codepen
Note: If possible try to avoid inline css.
Try position:relative instead of position:absolute.
You are using CSS incorrectly style:'position:absolute;top:10px.
it should be.
<button type="button" class="btn btn-primary btn-lg btn-block" style='position:absolute;top:10px'>Block level button</button>
or you can use this code this will also work fine.
<button type="button" class="btn btn-primary btn-lg btn-block" style='margin-top:10px;'>Block level button</button>
here is codepan which I've edited click here