Right aligned Bootstrap container which also aligns with default container
You can calculate the left margin of the custom container width based on the Bootstrap container
width for each breakpoint. In order for it to align with container, the left margin is going to be:
margin-left: calc(50vw - (container width/2))
So the CSS would be:
.container-custom {
padding-left: 15px;
padding-right: 15px;
}
@media (min-width:576px){
.container-custom {
margin-right: 0;
margin-left: calc(50vw - 270px);
}
}
@media (min-width:768px){
.container-custom {
margin-right: 0;
margin-left: calc(50vw - 360px);
}
}
@media (min-width:992px){
.container-custom {
margin-right: 0;
margin-left: calc(50vw - 480px);
}
}
@media (min-width:1200px){
.container-custom {
margin-right: 0;
margin-left: calc(50vw - 570px);
}
}
Demo: https://www.codeply.com/go/gO5EmIIeDi
How to align a container to the right with Bootstrap?
You can do this (no extra CSS)...
<div class="container-fluid fixed-top">
<div class="row">
<div class="ml-auto col-auto alert alert-primary">Here I am!</div>
</div>
</div>
https://www.codeply.com/go/KeorPCu7AR
The col-auto
class minimizes the column width to fit its' content, and then ml-auto
will push it to the right. This way you won't need the dummy column.
Edit
Also, it would be better to put the alert inside the column...
<div class="container-fluid fixed-top p-0">
<div class="row">
<div class="ml-auto col-auto">
<div class="alert alert-primary">Here I am!</div>
</div>
</div>
</div>
Also see: Right aligned Bootstrap container which also aligns with default container
Left align and right align within div in Bootstrap
2021 Update...
Bootstrap 5 (beta)
For aligning within a flexbox div or row
...
ml-auto
is nowms-auto
mr-auto
is nowme-auto
For text align or floats..
text-left
is nowtext-start
text-right
is nowtext-end
float-left
is nowfloat-start
float-right
is nowfloat-end
Bootstrap 4+
pull-right
is nowfloat-right
text-right
is the same as 3.x, and works for inline elements- both
float-*
andtext-*
are responsive for different alignment at different widths (ie:float-sm-right
)
The flexbox utils (eg:justify-content-between
) can also be used for alignment:
<div class="d-flex justify-content-between">
<div>
left
</div>
<div>
right
</div>
</div>
or, auto-margins (eg:ml-auto
) in any flexbox container (row,navbar,card,d-flex,etc...)
<div class="d-flex">
<div>
left
</div>
<div class="ml-auto">
right
</div>
</div>
Bootstrap 4 Align Demo
Bootstrap 4 Right Align Examples(float, flexbox, text-right, etc...)
Bootstrap 3
Use the pull-right
class..
<div class="container">
<div class="row">
<div class="col-md-6">Total cost</div>
<div class="col-md-6"><span class="pull-right">$42</span></div>
</div>
</div>
Bootstrap 3 Demo
You can also use the text-right
class like this:
<div class="row">
<div class="col-md-6">Total cost</div>
<div class="col-md-6 text-right">$42</div>
</div>
Bootstrap 3 Demo 2
Bootstrap col align right
Bootstrap 5 (update 2021)
To right align elements in Bootstrap 5...
float-right
is now float-end
text-right
is now text-end
ml-auto
is now ms-auto
Bootstrap 4 (original answer)
Use float-right
for block elements, or text-right
for inline elements:
<div class="row">
<div class="col">left</div>
<div class="col text-right">inline content needs to be right aligned</div>
</div>
<div class="row">
<div class="col">left</div>
<div class="col">
<div class="float-right">element needs to be right aligned</div>
</div>
</div>
http://codeply.com/go/oPTBdCw1JV
If float-right
is not working, remember that Bootstrap 4 is now flexbox, and many elements are display:flex
which can prevent float-right
from working.
In some cases, the utility classes like align-self-end
or ml-auto
work to right align elements that are inside a flexbox container like the Bootstrap 4 .row, Card or Nav. The ml-auto
(margin-left:auto) is used in a flexbox element to push elements to the right.
Bootstrap 4 align right examples
Related Topics
Setting Svg Element Width/Height Attributes Using CSS in Firefox
Selector for All a Tag Descendants
Chrome Ignoring Flex-Basis in Column Layout
Default CSS Overriding Media Query
Ionic4:How to Use CSSclass for Loading , It Is Doesn't Work
Padding Within Inputs Breaks Width 100%
Vue Cli 3 - Use Background Image in Style Tag
Using Class Set in Media Query as Mixin in Less
Cursor:Pointer on Pseudo Element Ie
Ms Edge CSS Transition Flickering
CSS Opacity Affecting Sibling Image Opacity
CSS Drop-Down Menus Pushing Page Content Down
Change Ie Background Color on Unopened, Focused Select Box
How to Remove Bullets from Numbered Toctree in Restructured Text