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
Related
I am converting my desktop project into web, and I have this layout so far. My concern is how can I place my div next below another div and take/fill the parent width. My aim is to show (depending on the selected view: list view, kanban view, and form view) lt-list, lt-kanban, and lt-form just below the buttons. This is what I've done so far:
.lt-content { grid-area: content; height: 85vh;}
#lt-button {
vertical-align:top;
display: inline-block;
padding : 0;
margin : 0;
float : left;
}
#lt-view {
vertical-align:top;
display: inline-block;
padding : 0;
margin : 0;
float : right;
}
#lt-list {
display: inline-block;
padding : 0;
margin : 0;
float : left;
background: #9ec4ff;
width: inherit;
}
#lt-kanban {
vertical-align:top;
display: inline-block;
padding : 0;
margin : 0;
float : left;
background: #a3ffa3;
}
#lt-form {
vertical-align:top;
display: inline-block;
padding : 0;
margin : 0;
float : left;
background: #fff5b7;
}
and here is my html:
<div class="lt-content">
<div id="lt-button" style="position: relative">
<div class="btn-group btn-group-sm" role="group" style="background: " aria-label="Basic example">
<button type="button" class="btn btn-default btn-sm" style="border-radius: 0;">CREATE</button>
<button type="button" class="btn btn-default btn-sm" style="border-radius: 0;">EDIT</button>
<button type="button" class="btn btn-default btn-sm" style="border-radius: 0;">DELETE</button>
<button type="button" class="btn btn-default btn-sm" style="border-radius: 0;">SAVE</button>
<button type="button" class="btn btn-default btn-sm" style="border-radius: 0;">CANCEL</button>
</div>
</div>
<div id="lt-view">
<div class="btn-group btn-group-sm" role="group" aria-label="Basic example">
<button type="button" class="btn btn-floating cyan btn-sm" style="border-radius: 0;"><i class="fas fa-list" aria-hidden="true"></i></button>
<button type="button" class="btn btn-floating cyan btn-sm" style="border-radius: 0;"><i class="fas fa-th-large" aria-hidden="true"></i></button>
<button type="button" class="btn btn-floating cyan btn-sm" style="border-radius: 0;"><i class="fab fa-wpforms"></i></button>
</div>
</div>
<div id="lt-list">
This is a list view....
<br>
This is a list view....
<br>
</div>
<div id="lt-kanban" style="position: relative">
This is a Kanban view....
<br>
This is a Kanban view....
<br>
</div>
<div id="lt-form" style="position: relative">
This is a Form view....
<br>
This is a Form view....
<br>
</div>
</div>
This is the image of my layout:
First of all, when you use the float: right/left property afterwards, the display: inline-block gets overridden.
You can get the desired results in a number of ways, grid layout, flex, etc. Using floats and the such to make it work won't be the best. Here's an example using flex. I got rid of all the floats, vertical-align and inline-blocks, and wrapped your buttons in a div and added a class.
Here you go
Change the css for #lt-button to be the following:
#lt-button {
display: block;
padding : 0;
margin : 0;
}
This will get the list view, kanban view, and form view under your buttons. After that you can use js/jQuery (or other scripting language) to show and hide divs based off clicks.
Add two divs, one that wraps lt-button and lt-view, and another (with id board) that wraps the lt-list, lt-kanban and lt-form
Then add this css:
.lt-content {
display: flex;
flex-flow: column;
}
#board {
display: grid;
grid-auto-flow: column;
height: 100%;
}
That is, if your objective was to make three columns with those colors, but it will give an idea.
How do you vertically align an icon in a two line bootstrap button so it appears like :
<button class="btn btn-lg btn-success" style="text-align:left; width:400px">
Line 1 text<br>Line2 text here <span style="vertical-align:middle;" class="glyphicon glyphicon-earphone pull-right"> </span>
</button>
Currently my code produces this :
http://www.bootply.com/jzLeoUKNR3
As far as I know, this requires a bit more CSS. I forked your Bootply link here: http://www.bootply.com/h24QRPyHbg
I removed the pull-right class from the icon so it's no longer floating, then added this CSS:
position: relative; on the btn (to allow the icon to be
positioned accordingly)
position: absolute; right: 16px; top: 50%; transform: translateY(-50%); on the icon span (to center it vertically on the right)
All together:
<button class="btn btn-lg btn-success" style="text-align: left; width: 400px; position: relative;">
<span style="position: absolute; right: 16px; top: 50%; transform: translateY(-50%);" class="glyphicon glyphicon-earphone"> </span>
Line 1 text<br>Line2 text here
</button>
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 !
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>
I'm trying to put two buttons one inside the other with html. I have tried this:
<div id="photoShow" style="width: 190px; height: 212px">
<input type="button" runat="server" id="btn_ShowImage" style =" background-image: url('photos/Analog50.jpg'); width: 55px; height: 54px;"
onclick="return btn_ShowImage_onclick()" /><asp:Button
ID="btn_AddProductToReservation" Height="180px" Width="194px"
runat="server" style="margin-top: 0px; margin-left: 0px;" />
</div>
Would love to get some help, Thank you
put them in a div like that:
<div style="float:left"><button></button><button></button></div>
so you can put them aside eachother, there is no sense putting buttons in each other!
if you use twitter bootstrap you can put those buttons one inside another:
<div class="btn btn-primary btn-large">
out out
<div class="btn btn-primary btn-large">
in in
</div>
out out
<div class="btn btn-primary btn-large">
in in
</div>
out out
</div>
and it will render as expected