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
Related
I would like to align all button to bottom on the page:
The editor with code:
https://codesandbox.io/s/angular-7-bootstrap-4-3pv0p?from-embed
<div class="container-fluid py-2">
<div class="row">
<div class="col-md-12 mx-auto">
<div class="card rounded-0">
<div class="card-header">
<h2>Boot Container View</h2>
</div>
<div class="card-body">
<div class="row">
<div class="col-md-6">
<div class="ws-details" style="background:gray; height:100px">
Element1
</div>
<div
class="order-details"
style="background:lightgray; height:200px"
>
Element 2
</div>
</div>
<div class="col-md-6">
<div style="background:gray; height:305px">Element3</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="center-block">
<div class="btn-group-vertical">
<p>
<button class="btn btn-info btn-sm btn-block">
Button 1a
</button>
</p>
<p>
<button class="btn btn-info btn-sm btn-block">
Button 2a
</button>
</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="center-block">
<div class="btn-group-vertical">
<p>
<button class="btn btn-info btn-sm btn-block">
Button 1b
</button>
</p>
<p>
<button class="btn btn-info btn-sm btn-block">
Button 2b
</button>
</p>
<p>
<button class="btn btn-info btn-sm btn-block">
Button 3b
</button>
</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="center-block">
<div class="btn-group-vertical">
<p>
<button class="btn btn-info btn-sm btn-block">
Button 1c
</button>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I tried with position absolute and relative with parent/child element. But still I have problem with the proper align buttons. Also - I would like to change size (width of buttons), and after change style width there is problem with center button.
Changes in app.component.html file:
On line 25 in your html file change <div class="row"> to <div class="row position-relative">.
On line 27 and line 65 change <div class="center-block"> to <div class="center-block align-to-bottom">
Changes in app.component.css file:
Add:
#media only screen and (min-width: 767px) {
.align-to-bottom {
bottom: 0;
position: absolute;
}
}
Link to the editor: https://codesandbox.io/s/angular-7-bootstrap-4-u5uet
To change the width of the button you could add button.btn-info {width: 150px;} to your css. You said then there was a problem with the center button but what problem do you mean?
use this css properties:
bottom:0
position:absolute
It seems that you are using a bootstrap for this code and thus if you need to align the buttons to the bottom, you can use a custom css. Let this css class be alignBottom.
.alignBottom{
position: absolute;
bottom: 0px;
}
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 was working on a sample where I had to align a button group to the right.
I found the css class .pull-right.
While it correctly moved the button group, I was unable to reset the next section.
I've used the clearfix mixin on several objects, I cannot clear the way section intersects with the button group.
The sample on bootply (link below):
<div class="container foo">
<div class="btn-group pull-right" role="group">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
<section class="debug text-center">
<h1>Bootstrap starter template</h1>
<p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
</section>
</div>
And the css
.foo
{
.clearfix();
}
.foo::before,
.foo::after {
content: " "; // 1
display: table; // 2
}
.foo::after {
clear: both;
}
Due to missing less mixin support I manually implemented the mixin
Here is a runnable example: http://www.bootply.com/8GgDsWc8kZ
I've been googling this and I put foo into every div there, no place cleared the section from intersecting.
Any hints appreciated.
Just add a div between the buttons and the box with the clearfix class from Bootstrap applied to it.
BOOTPLY
HTML:
<div class="container foo">
<div class="btn-group pull-right" role="group">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
<div class="clearfix"></div>
<section class="debug text-center">
<h1>Bootstrap starter template</h1>
<p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
</section>
</div>
You appear to be missing some tags. That's what's causing Bootstrap to not function the way you expect.
BOOTPLY
<div class="container foo">
<div class="row">
<div class="col-md-3 pull-right">
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
</div>
</div>
<section class="debug text-center row">
<div class="col-md-12">
<h1>Bootstrap starter template</h1>
<p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
</div>
</section>
</div>
I'd suggest that you take some time to read over the grid system documentation on the Bootstrap website.
Here you go, I added a boostrap "row" and "col-xs-12" around your 3 buttons, as well as around your section.
<div class="container foo">
<div class="row">
<div class="col-xs-12">
<div class="btn-group pull-right" role="group">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<section class="debug text-center">
<h1>Bootstrap starter template</h1>
<p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
</section>
</div>
</div>
</div>
http://www.bootply.com/0TSYSI4T8b
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>