I'm working with the .card below and having the dickens of a time getting the text "You liked this." in-line with the Like and Comment .btn-links beneath the hr element.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card mx-auto mt-5" style="width:500px">
<div class="card-body">
<hr>
<div>
<button class="btn btn-link">Like</button>
<span class="text-muted" style="">You liked this.</span>
<button class="btn btn-link float-right">3 Comments</button>
</div>
</div>
</div>
I've tried everything I can think of. Changing the display property. Using margins or padding. Adjusting the font-height. None of it has worked. I'm not sure how to get it to align and any help would be appreciated.
I probably could get it to work with using floats or even flexbox, but that seems over kill and I'd prefer not to if possible. Thanks.
You missed the vertical alignment, use the bootstrap class align-middle on your span.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card mx-auto mt-5" style="width:500px">
<div class="card-body">
<hr>
<div>
<button class="btn btn-link">Like</button>
<span class="text-muted align-middle">You liked this.</span>
<button class="btn btn-link float-right">3 Comments</button>
</div>
</div>
</div>
You can use this code
body {
margin: 0;
padding: 0;
}
.btn-link {
font-weight: 400;
color: #007bff;
text-decoration: none;
margin-top: -4px;
}
<div class="card mx-auto mt-5" style="width:500px">
<div class="card-body">
<hr>
<div>
<button class="btn btn-link">Like</button>
<span class="text-muted" style="">You liked this.</span>
<button class="btn btn-link float-right">3 Comments</button>
</div>
</div>
</div>
Related
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 some buttons on a row, two aligned on the left and one aligned on the right as follows:
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
/* Vertically center the text there */
line-height: 60px;
background-color: #f5f5f5;
}
.fa-arrows-alt {
color: rgb(231, 81, 37);
cursor: pointer;
}
<script src="https://use.fontawesome.com/23ac9aaa92.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row">
<div class="col-12 col-md-12">
A div here
</div>
<div class="col-12 col-md-12">
<button type="button" class="btn btn-outline-dark btn-sm">Edit</button>
<button type="button" class="btn btn-outline-dark btn-sm">Delete</button>
<i class="fa fa-arrows-alt fa-2x float-right"></i>
</div>
</div>
</div>
<footer class="footer">
<div class="container">
<span class="text-muted">Place sticky footer content here.</span>
</div>
</footer>
I would like the buttons to force them to be always on the bottom of the div, above the footer. I tried using bottom: 0 and position absolute, fixed but I received an unexpected result. Any suggestions are welcome.
use bootstrap 4 position-absolute predefined class and add bottom:0
.position-absolute {
bottom: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid position-absolute">
<div class="row">
<div class="col-12 col-md-12 btn-row">
<button type="button" class="btn btn-outline-dark btn-sm">Edit</button>
<button type="button" class="btn btn-outline-dark btn-sm">Delete</button>
<button type="button" class="btn btn-outline-dark btn-sm float-right">Full Screen</button>
</div>
</div>
</div>
Use the flexbox classes that are built in to Bootstrap. You just need CSS to make sure the body is display:flex and full height...
https://www.codeply.com/go/lEaF85K1KU
CSS
body {
height:100vh;
display: flex;
flex-direction: column;
}
.flex-fill {
flex: 1 1 auto;
}
HTML
<main class="container-fluid d-flex flex-column flex-fill">
<div class="row flex-column flex-fill">
<div class="col-12 flex-fill">
A div here
</div>
<div class="col-12">
<button type="button" class="btn btn-outline-dark btn-sm">Edit</button>
<button type="button" class="btn btn-outline-dark btn-sm">Delete</button>
<i class="fa fa-arrows-alt fa-2x float-right"></i>
</div>
</div>
</main>
<footer class="container-fluid bg-light py-3">
Sticky Footer
</footer>
Note: The flex-fill utility class will be included in the next Bootstrap 4.1 release. So after that release the extra CSS for flex-fill won't be needed.
To get something to stick to the bottom of the screen, do
<footer class="fixed-bottom">
To get buttons to go left and right give each button a class of “pull-left” or “pull-right”
I have a div, and in that div, I have another div. I am trying to pin the inner div to the bottom of the outer div using specifically bootstrap classes, but I cant seem to find a bootstrap method to do this. I've also tried using just regular CSS, but cant get this working. I tried veritical-align: bottom; and setting the position to absolute.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="card-body">
<ul class="list-unstyled mt-3 mb-4" style="text-align: left;">
<li>stuff</li>
</ul>
<div>
<button type="button" class="btn btn-outline-primary">Edit</button>
<button type="button" class="btn btn-outline-primary">Delete</button>
</div>
</div>
To get it done using Bootstrap 4 classes, you just add the classes d-flex flex-column to the card-body and then add the mt-auto class (margin-top:auto) to the inner div like so:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="card-body d-flex flex-column">
<ul class="list-unstyled mt-3 mb-4" style="text-align: left;">
<li>stuff</li>
</ul>
<div class="mt-auto">
<button type="button" class="btn btn-outline-primary">Edit</button>
<button type="button" class="btn btn-outline-primary">Delete</button>
</div>
</div>
That will always keep the inner div pinned to the bottom.
Is this what you are trying to achieve??
.card-body {
border: 4px solid blue;
position: relative;
}
.inner {
border: 4px solid red;
position: absolute;
bottom: -50px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="card-body">
<ul class="list-unstyled mt-3 mb-4" style="text-align: left;">
<li>stuff</li>
</ul>
<div class="inner">
<button type="button" class="btn btn-outline-primary">Edit</button>
<button type="button" class="btn btn-outline-primary">Delete</button>
</div>
</div>
I tried to apply the float: right to the button and the text but its just not working because it destroys everything.
Any ideas?
<hr>
<div class="table">
<div class="row">
<i class="fa fa-refresh" aria-hidden="true" style="margin-right: 4px;"></i> Aktualisieren
<span class="right-cell"> 14 neue Meldungen</span>
</div>
</div>
<hr>
https://jsfiddle.net/uoyh2fk9/
Not sure what, "destroys everything" means, but it sounds like flexbox might work better for what you are trying to achieve. Remove the display: table's from your divs and try the following:
CSS
.row {
display: flex;
justify-content: flex-end;
}
JSFiddle
If you would like to know more about flexbox and how it works, here is a link.
Here's a possible solution: https://jsfiddle.net/UXEngineer/uoyh2fk9/9/
<div class="container-fluid">
<div class="col-lg-12">
<div class="col-md-3 col-sm-3 border-red">
<a href="#" class="btn btn-primary">
<i class="fa fa-refresh" aria-hidden="true" style="margin-right: 4px;"></i> Aktualisieren</a>
</div>
<div class="col-md-9 col-sm-9 border-red">
<span>14 neue Meldungen</span>
</div>
<div class="col-lg-12 clearfix"></div>
<div class="col-lg-12 clearfix">
<hr class="horizontal-divider">
</div>
<div class="col-md-9 col-sm-9 border-red">
<span>14 neue Meldungen</span>
</div>
<div class="col-md-3 col-sm-3 border-red">
<a href="#" class="btn btn-primary">
<i class="fa fa-refresh" aria-hidden="true" style="margin-right: 4px;"></i> Aktualisieren</a>
</div>
</div>
</div>
I've added a responsive solution using the Bootstrap CDN to the example in JSFiddle. If you want to use this jsfiddle make sure you also add the CDN external sources to the your solution.
You can change the column size to fit your solution.