This question already has answers here:
Left align and right align within div in Bootstrap
(7 answers)
Closed 4 years ago.
I'm currently using bootstrap 4. I'm trying to align text right on my card header, I tried using ml-auto but it didn't work. What could be the solution?
Here's my card header code:
<div class="card-header bg-info text-white">
<i class="fa-th"></i> Media Library
Add Media
</div>
In order for the ml-auto class to work you just need to add the d-flex class (display:flex) to the parent element 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-header bg-info text-white d-flex">
<i class="fa-th"></i> Media Library
Add Media
</div>
It depends on the version of Bootstrap you are using
Bootstrap 3
use the class text-right
Bootstrap 4
In newest version, you can use the class text-lg-right using the viewport size you prefer of course
Additionals
You check more in this question or check the official documentation v4
I don't use Bootstrap, I use the Materialize but you could add normal styling to it,
on your
<i class="fa-th"></i> Media Library
This would align only you anchor tag to the right
Use this cord...
<div class="card-header bg-info text-white" style="text-align:right">
<i class="fa-th"></i> Media Library
</div>
Use this class text-right..
<div class="card-header bg-info text-white text-right">
<i class="fa-th"></i> Media Library
</div>
Related
I want to have a full width 2 row, "1 column" layout, that takes up the entire viewport. The top row should have it's contents on the bottom of that row, and the bottom row should have it's contents on the top of that row.
Using some examples from bootstrap, I was able to achieve this: https://codepen.io/afagard/pen/QWpJWze
However, I am not sure if I am doing it correctly even though it looks as expected. Specifically, I tried to set the container to 100vh but that did not result in any changes to flexboxes so I've got each row at 50vh. I mostly do backend work and am trying to learn flexboxes.
Here is an example of a flexbox solution using just the bootstrap classes and no additional css:
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<div class="container-fluid p-0 vh-100 d-flex flex-column text-center">
<div class="flex-grow-1 d-flex flex-column bg-primary">
<div class="mt-auto">
Top half
</div>
</div>
<div class="flex-grow-1 d-flex flex-column bg-secondary">
<div class="mb-auto">
Bottom half
</div>
</div>
</div>
I've since yesterday a bootstrap bug that I don't understand.
I put 2 buttons in a div with a flex display and an align-items-center but the second one is lower than the first one and I can't make the adjustment to correct it.
My code:
<div class="d-flex justify-content-center align-items-center mt-1">
<i class="fas fa-cart-arrow-down"></i>
<i class="fas fa-store"></i>
</div>
My result:
This is due to the class .btn-block. As per bootstrap's documentation:
Create block level buttons—those that span the full width of a parent—by adding .btn-block.
And to space out multiple block buttons vertically, _buttons.scss in bootstrap has:
.btn-block+.btn-block {
margin-top: .5rem;
}
So in your code, margin top is getting applied to the second button's btn-block class.
<i class="fas fa-store"></i>
You can either add below style to second button or modify class names depending on your requirement.
margin-top: 0;
Bootstrap is designed so that consecutive btn-block's stack vertically which is not happening because of the flex container. Instead of using btn-block inside the flex parent, use flex-grow-1...
<div class="d-flex justify-content-center align-items-center mt-1">
<i class="fas fa-cart-arrow-down"></i>
<i class="fas fa-store"></i>
</div>
https://codeply.com/p/gtjiTMOt76
I am new to html and stack overflow. I'm now taking a course that focuses on the bootstrap framework. Is there a way of centering a header text within an a tag that has been assigned a role="button"?
I tried using regular text and the text appears where I want it but the font weight is too light. I tried making it bold with but that makes it too heavy. The h6 tag gave me the ideal weight but I'm unable to center it horizontally, as it appears up top. Preferably, I'd like to use bootstrap if it's possible.
Below is my current code:
<div class="col col-sm align-self-center">
<h6 class="text-center">Reserve Table</h6>
</div>
you can use text alignment classes from bootstrap
<div class="col col-sm align-self-center text-center">
To begin with: a is inline element and h6 is block element. Block elements are not valid inside of inline elements.
Put your a inside of h6 and use Bootstrap class text-center on h6;
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<header>
<div class="col col-sm align-self-center">
<h6 class="text-center">
<a href="#reservationForm" class="btn btn-warning btn-block btn-sm p-2" role="button">
Reserve Table
</a>
</h6>
</div>
</header>
This example is based on Bootstrap v4.5
I have the following markup (Bootstrap 4):
<div class="col-3 d-flex flex-column">
<img class="align-self-center" src="#"/>
</div>
Since the container is flexed, the images are stretching. I'm aware align-self-center will resolve the issue, however, I don't want the image to be centered. I want the image to be align-self-left (left aligned rather than centered), but this stretched the image again.
Any way around this?
Here you go!
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="col-3 d-flex flex-column">
<img class="align-self-start" src="https://dummyimage.com/600x400/000/fff"/>
</div>
It would be align-self-start. Bootstrap flex doesn't use term left
Instead of using <img class="align-self-center" src="#"/> use <img class="align-self-start" src="#"/>. This should solve your problem (Basically it means that you image will be aligned to the start of your column)
I have problem with centering components within col-md-12. For example I have 12 columns with <h1> or <h2> inside. I want to <h1> to be centered.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-12">
<div id="naglowek">
<h1>Something</h1>
</div>
</div>
</div>
</div>
I tried to access css class text-center or block-center to divs, but everytime <h1> was floated to the left. I need have this centered and set padding on my own. How can I solve this?
<div class="col-md-12 text-center"> works for bootstrap, no need to add any style unless you have already some style for h1. even if that's the case, you can use .text-center for h1
seems you are using width in that parent div. don't do that ever if you need content to be 100% width. and as per background, if you need 100% area occupy the background, you can simply use it in the div if not, you better use it with some pseudo classes :before or :after
In bootstrap 4
I know it's not the direct answer to this question but it may help someone
to center the childs horizontally, use bootstrap-4 class
justify-content-center
to center the childs vertically, use bootstrap-4 class
align-items-center
but remember don't forget to use d-flex class with these
it's a bootstrap-4 utility class, like so
<div class="d-flex justify-content-center align-items-center" style="height:100px;">
<span class="bg-primary">MIDDLE</span>
</div>
copy and paste this snippet to check how it works
Note: make sure to add bootstrap-4 utilities if this code does not work.
Hope this will help someone.
Add class="text-center" to div.
<div id="naglowek" class="text-center">
<h1>Something</h1>
</div>
text-center class is from bootstrap.
You can add the text-center class to the h1.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-12">
<div id="naglowek">
<h1 class="text-center">Something</h1>
</div>
</div>
</div>
</div>