How to make a position for word and button on the same line.
Word should be left and button should be on end
<div class="h2 secondary-text">
Text
<button mat-icon-button
class="m-0 mr-16 secondary-text"
(click)="activeModal.close('Close click')">
<mat-icon>close</mat-icon>
</button>
</div>
This can be easily achieved by using flex css. You can try this
html
<div class="wrapper">
<div class="secondary-text">
Text
</div>
<div class="icon-cls">
<button mat-icon-button
class="m-0 mr-16 secondary-text">
<mat-icon>close</mat-icon>
</button>
</div>
</div>
css
.wrapper{
display:flex;
}
.secondary-text{
flex: 1
}
.icon-cls{
flex: 1;
text-align:right;
}
Related
I'm trying to modify an existing component which inherits the Flexbox concept.
Currently it looks like this:
Now what I'm trying to achieve is regardless of content size inside the box:
The box will have the same height - aligned to each other
The button will stay at the bottom even if the top contents are long.
Here is the existing structure that I'm trying to fix:
<section class="container counsellor-list">
<div class="row">
<div class="col-12 col-sm-12 col-lg-6 col-xl-4 mb-30 counsellor-list-item">
<div class="state_chosen">
<img class="img-fluid" src="https://st.depositphotos.com/1771835/1477/i/950/depositphotos_14779771-stock-photo-portrait-of-confident-young-doctor.jpg" />
<div class="bg-blue20 p-30 counsellor-list-item-content">
<div class="text-coral subtitle-small text-bold text-uppercase mb-24 d-flex flex-wrap">
<span class="">
Wien
</span>
<span class="ml-16">
St. Polten
</span>
<span class="ml-auto language">
<span>
DE
<span> | </span>
EN
</span>
</span>
</div>
<h2 class="mb-24">Jan Faustio</h2>
<div class="">
<a class="btn btn-coral" href="#"> Button </a>
</div>
</div>
</div>
</div>
...
</section>
Codepen link
I tried a lot of stuff but didn't work as I'm expecting it to be/result.
Check this, I hope I understood what you want to achieve https://codepen.io/IvanBisultanov/pen/PoQmXqX
I also added .btn-wrap classname, and wrapped all HTML above in div
.counsellor-list-item-content {
flex-grow: 1;
display: flex;
flex-direction: column;
}
.btn-wrap {
margin-top: auto;
}
I'm using Bootstrap 4 with React. I'm trying to center a h4 and right align couple of buttons all in one row. I could get it done but the h4 text is not centered to the entire width. It is centered only to the space that is remaining after buttons are placed.
I would like to center the h4 element to the entire width while placing the buttons to the right all in one row.
May I know how to achieve this?
<div>
<div className="float-right">
<EditButton /> <DeleteButton />
</div>
<h4 style={{ textAlign: "center" }}>Application Name</h4>
</div>
I'm understanding you want something similar to this, you would have to first set a display: inline property to the h4 so the buttons (which are inline by default) follow the heading, and then a text-center class will center everything; but I think you also want the heading itself to be at the center of the screen and the buttons at the right of it, correct?
.buttons {
top: 0px;
right: 0px;
}
h4{
right: 50%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" />
<h4 class="text-center">H4 Title</h4>
<div class="text-center">
<h4 class="d-inline">H4 Title</h4>
<button class="btn btn-primary">Button</button>
<button class="btn btn-primary">Button</button>
<button class="btn btn-primary">Button</button>
</div>
<div class="text-center mt-5 position-relative">
<h4 class="w-100 text-center">
H4 Title
</h4>
<div class="position-absolute buttons">
<button class="btn btn-primary">Button</button>
<button class="btn btn-primary">Button</button>
<button class="btn btn-primary">Button</button>
</div>
</div>
You can center text by using class text-center and right align button by using class text-right
where container-fluid is use for full width and m-0 p-0 is margin: 0; & padding: 0 for remove corner space.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<div class="container-fluid p-0 m-0">
<div class="text-center">
<h4 class="d-inline">i am H4</h4>
<button class="d-inline float-right btn btn-info">Demo</button>
</div>
</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 have this code:
<div class="panel-footer rounded" style="background-color: #B7B56E">
<button class="btn btn-xs rounded" (click)="refreshNow()" style="float: right"><span class="glyphicon glyphicon-refresh"></span><small>{{nextTick|date: 'mediumTime'}}</small></button>
</div>
and result appears as:
My question is: how do I align the button at the center of the panel?
PS: It should be inside the green panel.
First of all, remove float: right. Then text-align: center should do the job:
.panel-footer {
background-color: #B7B56E;
text-align: center;
}
<div class="panel-footer rounded">
<button class="btn btn-xs rounded" (click)="refreshNow()"><span class="glyphicon glyphicon-refresh"></span><small>12 Oct 2017</small></button>
</div>
Delete float from button and add text-align: center to div element.
Here you go. Full bootstraps' classes used with no tricks. Just adding align-items-center solves the problem. But do not use the float style itself. If you use the CSS framework, please be so kind to read the docs. There are a lot of features which are enough for not to manipulate the styles for layout.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row align-items-center bg-info">
<button class="col btn btn-outline-primary">Hello I'm centered</button>
</div>
</div>
you can do the following if you still want the button to be floated right, but centered vertically inside of your panel-footer div
.panel-footer {
background-color: #B7B56E;
overflow: auto;
}
.btnClass {
float: right;
}
<div class="panel-footer rounded">
<button class="btn btn-xs rounded btnClass" id="button" (click)="refreshNow()"><span class="glyphicon glyphicon-refresh"></span><small>12 Oct 2017</small></button>
</div>
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>