Look at following fiddle:
http://jsfiddle.net/hqn4gLk6/
<div style="display:inline-block;margin-right:5px">
<button type=button id="fdfdd" class="btn btn-small" style="width:150px;">sadfasfdsfdfd</button>
</div>
I want the button to be positioned 5 px from the right side of the page.
I tried using margin-right witch was not working.
you could position your element absolute and then use the css right like:
<div style="display:inline-block; position:absolute; right:5px;">
<button type=button id="fdfdd" class="btn btn-small" style="width:150px;">sadfasfdsfdfd</button>
</div>
also look at your jsfiddle
Fixed
<div style="margin-left:#marginDate;">
<h2 style="display:inline-block;">454544555 </h2><p style="margin-left:10px;display:inline-block"> sadfasfsafsdf</p>
/*added float:right; to the style only and some margin */
<div style="display:inline-block;margin-right:5px; float:right;">
/* done working */
<button type=button id="schema" class="btn btn-small" style="width:150px;">sadfasfdsfdfd</button>
</div>
</div>
I used floats to get what you asked for. I updated your js.fiddle here if you want to see it in action.
<div style="clear:both">
<div style="float:left;">
<h2 style="display:inline-block;">454544555 </h2>
<p style="margin-left:10px;display:inline-block"> sadfasfsafsdf</p>
</div>
<div style="float:right; margin-right:5px">
<button type=button id="schema" class="btn btn-small" style="width:150px;">sadfasfdsfdfd</button>
</div>
</div>
</div>
Related
I have this modal header and wish to add the "download" button to the right of the text "Optimize data". Here is my code for the same but everytime it aligns to the below of the modal header text. I have also tried float and align properties but it didnt seem to work.
<div class="modal-header">
<h3 class="align:left" translate>{{Title}}</h3>
<div class=align:"right">
<button type="button" class="btn btn-info" id="downloadLog" translate>Download Log</button>
</div>
</div>
The modal-header in Bootstrap 4 is display:flex. Use ml-auto to push the button to the right...
<div class="modal-header">
<h3>Title</h3>
<div class="ml-auto">
<button type="button" class="btn btn-info" id="downloadLog" translate>Download Log</button>
</div>
</div>
https://www.codeply.com/go/qPMA41arJV
<h3> is an element that use the entire line so you should add an row, and two columns and then you will can do that
<div class="row">
<div class="col-8">
<h3>Text</h3>
</div>
<div class="col-4">
<button>Button here</button>
</div>
</div>
bootstrap it self has class "input-group"
You can use that as below.
<div class="input-group">
<span>
<a href="#" />
</span>
</div>
I am working on removing the space between Front End Developer and About Me modal. It doesn't seem to to work when I used classes such as no gutter and removing the paddings.
Reference image
Does anyone have any ideas?
<header>
<div class="row no-gutters">
<div class="col-md-4 col-sm-12">
<img class="title-logo" src="./resources/images/logo.jpeg">
</div>
<div class="title-super col-md-4 col-sm-12 offset-md-4 text-uppercase text-right">
<h1>Terence Fan</h1>
<h4>Front-End Developer</h4>
<button type="button" class="btn btn-outline-dark button-style" data-toggle='modal' data-target="#AboutMe">About Me</button>
</div>
</div>
<div class="row">
<div class="col-md-12">
<hr>
</div>
</div>
</header>
I have the full Github source code here
Thanks in advance!
Try adding this code to your CSS.
.title-super .btn {
vertical-align: top;
}
set vertical-align: top to button-style
.button-style {
vertical-align: top;
}
working fiddle here
You can use .align-top bootstrap css class for vertical align element.
<button type="button" class="btn btn-outline-dark button-style align-top" data-toggle='modal' data-target="#AboutMe">About Me</button>
I'm trying to align horizontally a h2 and bottom inside of a div using bootstrap and css. My code is below.
<div class="col-md-9">
<div class="alert alert-info">
<i class="fa fa-coffee"></i>
Use this form to update your profile.
</div>
<div>
<h3>Personal info</h3>
<button class="btn btn-danger" href="#">Edit</button>
</div>
</div>
You can try this
<div class="check">
<h3>Personal info</h3>
<button class="btn btn-danger" href="#">Edit</button>
</div>
.check h3,.check button{
display:inline-block;
}
Working JSfiddle
I have a legend containing a button that I pull-right. Unfortunately, the button is too high. Please see a fiddle here.
<div class="container">
<div class="row pane" id="statistics-pane" style="">
<legend>Network<span class="btn btn-mini pull-right">Test</span>
</legend>
</div>
</div>
I would separate the pull-right class from your button, and wrap in a div, like
<div class="container">
<div class="row pane" id="statistics-pane" style="">
<legend>Network
<div class="pull-right">
<span class="btn btn-mini">Test</span>
</div>
</legend>
</div>
</div>
Maybe give it a top-margin to push it down a little?
legend .btn {
margin-top: 10px;
}
I have a button generated by backbone.js and jQuery.tmpl() and width of the button is variant. I want to put it in a span6 div. Code is shown below:
<div class="row">
<div class="span6">
<button class="btn primary large">
BLABLABLA
</button>
</div>
<div class="span10">
...
</div>
</div>
I don't know how to make the button centered in the div.
Im no CSS guru but this does the trick for me (centers the button within the span6):
<div class="row">
<div class="span6" style="text-align:center">
<button class="btn primary large">
BLABLABLA
</button>
</div>
</div>
More info on centering can be found here.
A bit late but you can use the pagination-centered class from bootstrap
<div class="span6 pagination-centered">
<button class="btn primary large">
BLABLABLA
</button>
</div>
What about <a> tags?
If you have an <a> tag button, then the other approaches won't work, as a.btn has a float: left attribute in the bootstrap source.
<div style="text-align: center;">
Button text
</div>
This can be undone 2 ways.
Solution 1
Add a custom less file and import bootstrap.
bootstrap-custom.less
#import "bootstrap.less";
a.btn {
float: none !important;
}
And then compile your custom less file, or simply specify it in another CSS file:
styles.css
a.btn {
float: none !important;
}
Solution 2
Simply do it inline using style="float: none;":
<div style="text-align: center;">
Button text
</div>
Other Solution
<div class="row-fluid pagination-centered">
Button
</div>
<div class="clearfix"></div>
I had this same issue, I wrapped the in
<a class="btn btn-primary" href="#" role="button">Text Here</a>
Became
<div class="text-center">
<a class="btn btn-primary" href="#" role="button">Text Here</a>
</div>