I'm trying to align some content in Bootstrap 4. It's not working the way I think and I don't understand why. Specifically, I'm unable to vertically or horizontally align content in a column. For example, in this Bootply, I have the following:
<div class="container">
<div class="row">
<div class="col-8">
<h2 class="display-4">Some Text</h2>
<p class="lead">
Some other details go here. This portion can go up to three lines of text. It will wrap around to the next line. A YouTube video will be available in the right side.
It's not there because Bootply doesn't allow iframes.
</p>
</div>
<div class="col-4">
<div style="border:solid 2px #ddd;">
A vertically centered YouTube video.
</div>
</div>
</div>
<div class="row">
<div class="col-4">
<div class="card">
<div class="card-block">
<div class="row">
<div class="col-3">
<div class="fa fa-arrow-right" style="font-size:3.0rem;"></div>
</div>
<div class="col-9">
<h3 class="card-title">Detail</h3>
<p class="card-text">Here's some more info for you. This could go up to three lines of text. How do I center the arrow?</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
How do I vertically align the YouTube video so that it's centered? How do I vertically align the arrow so that it's centered? I can't seem to even get the arrow to center horizontally. I tried using justify-content-center as mentioned here without any luck. What am I doing wrong?
You need to use nested flexbox
.col-3 {
display:flex;
align-items:center;
justify-content:center;
}
Bootply
Related
I'm trying to do some vertical aligning in Bootstrap and can't seem to achieve it with the various flex box classes (align-items-center etc).
I need the text content in the boxes of the below codepen to be vertically centered ... whilst also each box should match the height of the tallest box (as is currently working)... can anyone help?!
The inner divs need to be wrapped in a link - don't know if thats affecting things?
https://codepen.io/jwacreative/pen/VwjePEj
<div class="container">
<div class="row">
<div class="col-md-6 col-lg-4 mb-4">
<a href="http://">
<div class="summary-box h-100" style="background:red">
<h2>Title</h2>
<p>Some text</p>
</div>
</a>
</div>
<div class="col-md-6 col-lg-4 mb-4">
<a href="http://">
<div class="summary-box h-100" style="background:green">
<h2>Title</h2>
<p>Some text longer text Some text longer text Some text longer text Some text longer text Some text longer text Some text longer text<< /p>
</div>
</a>
</div>
<div class="col-md-6 col-lg-4 mb-4">
<div class="summary-box h-100" style="background:blue">
<h2>Title</h2>
<p>Some text</p>
</div>
</div>
</div>
CSS Grid should be able to help with this...
.summary-box {
display: grid;
align-content: center;
}
I have a screen split in two, using two columns.
<div class="row">
<div class="col-md-6 well">
Left Box
</div>
<div class="col-md-6 well">
Right
</div>
</div>
I need a small (approx 10px) gap between the two columns.
http://www.bootply.com/vaOb1WdR5I
Can this be done?
Both boxes would need to reduce by 5 pix (in the above example), as I need the total width to remain.
Edit: Some ideas nearly work, but I am getting an extra Well that I don't want. With this:
<div class="row">
<div class="col-md-6">
#Html.Action("ShowDuePayments", "Transaction")
</div>
<div class="col-md-6">
#Html.Action("ShowRecentTransactions", "Transaction")
</div>
</div>
I get this:
The 'under' well div shouldn't be visible.
A couple of points:
You shouldn't add extra classes to the Bootstrap columns (that's not a hard and fast rule, but a good recommendation)
You are missing the container wrap.
Make changes using those rules and it looks like this:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-md-12">
<div class="well">Left Top Box</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="well">Left Bottom Box</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="well">Right Box</div>
</div>
</div>
</div>
How about this?
<div class="row">
<div class="col-md-6" style='padding-right:5px'>
<div class='well'>
Left Box
</div>
</div>
<div class="col-md-6" style='padding-left:5px'>
<div class='well'>
Right
</div>
</div>
</div>
http://www.bootply.com/Ogrte6IQzw
If you remove the inline styling, you will have the natural spacing provided by bootstrap, which is 15px padding.
You can change the class of col-md-6 and add width:49%, and to the 2nd div add pull-right class like:
HTML:
<div class="row">
<div class="col-md-6 well">
Left Box
</div>
<div class="col-md-6 well pull-right">
Right
</div>
</div>
CSS:
.col-md-6{
width:49%;
}
You can also try to add padding to the two div tags ie:
.col-md-6{
padding:5px;
}
This would add a bit of padding to all the sides - unless you use padding-left & padding-right and assign different class names to the divs - depending on how you want your code to be layed out.
You could also use an additional class so you only modify special column-6 elements and not all on your site. This example also uses percentage based widths as Flopet17s. You could tweak the percentage number to better fit your desired gap width.
.withgap {
width: 49%;
margin-right:1%;
}
<div class="row">
<div class="col-md-6 well withgap">
Left Box
</div>
<div class="col-md-6 well">
Right
</div>
</div>
Using Bootstrap, I have a grid column class="col-lg-3" that I want to place it in position:fixed while the other .col-lg-9 is normal position (scroll-able through the page).
<div class="row">
<div class="col-lg-3">
Fixed content
</div>
<div class="col-lg-9">
Normal scrollable content
</div>
</div>
Just the same way like the left column in LifeHacker.com
You will see that the left part is fixed however I scroll though the page.
I use bootstrap v3.1.1
<div class="row">
<div class="col-lg-3">
<div class="affix">
fixed position
</div>
</div>
<div class="col-lg-9">
Normal data enter code here
</div>
</div>
iterating over Ihab's answer, just using position:fixed and bootstraps col-offset you don't need to be specific on the width.
<div class="row">
<div class="col-lg-3" style="position:fixed">
Fixed content
</div>
<div class="col-lg-9 col-lg-offset-3">
Normal scrollable content
</div>
</div>
Following the solution here http://jsfiddle.net/dRbe4/,
<div class="row">
<div class="col-lg-3 fixed">
Fixed content
</div>
<div class="col-lg-9 scrollit">
Normal scrollable content
</div>
</div>
I modified some css to work just perfect:
.fixed {
position: fixed;
width: 25%;
}
.scrollit {
float: left;
width: 71%
}
Thanks #Lowkase for sharing the solution.
in Bootstrap 3 class="affix" works, but in Bootstrap 4 it does not.
I solved this problem in Bootstrap 4 with class="sticky-top"
(using position: fixed in CSS has its own problems)
code will be something like this:
<div class="row">
<div class="col-lg-3">
<div class="sticky-top">
Fixed content
</div>
</div>
<div class="col-lg-9">
Normal scrollable content
</div>
</div>
Updated for Bootstrap 4
Bootstrap 4 now includes a position-fixed class for this purpose so there is no need for additional CSS...
<div class="container">
<div class="row">
<div class="col-lg-3">
<div class="position-fixed">
Fixed content
</div>
</div>
<div class="col-lg-9">
Normal scrollable content
</div>
</div>
</div>
https://www.codeply.com/go/yOF9csaptw
Bootstrap 5
The solution is very similar to v4, but you can use responsive variations with .sticky-*-top classes.
<div class="row">
<div class="col-lg-3">
<div class="sticky-md-top">
Fixed content
</div>
</div>
<div class="col-lg-9">
Normal scrollable content
</div>
</div>
Docs: https://getbootstrap.com/docs/5.0/helpers/position/#responsive-sticky-top
Use this, works for me and solve problems with small screen.
<div class="row">
<!-- (fixed content) JUST VISIBLE IN LG SCREEN -->
<div class="col-lg-3 device-lg visible-lg">
<div class="affix">
fixed position
</div>
</div>
<div class="col-lg-9">
<!-- (fixed content) JUST VISIBLE IN NO LG SCREEN -->
<div class="device-sm visible-sm device-xs visible-xs device-md visible-md ">
<div>
NO fixed position
</div>
</div>
Normal data enter code here
</div>
</div>
With bootstrap 4 just use col-auto
<div class="container-fluid">
<div class="row">
<div class="col-sm-auto">
Fixed content
</div>
<div class="col-sm">
Normal scrollable content
</div>
</div>
</div>
If you really want to do it that way, you can't do it in "col- *", because it's going to overlap each other, you should do it in the parent class "row", but depending on what you're doing, you might have a problem with the browser scroll that will be "cut" from the screen, however, is simple to solve, just control the column width and everything will be fine.
<div class="row fixed-top h-100">
<div class="col-lg-3">
Fixed content
</div>
<div class="col-lg-9 overflow-auto h-100">
Normal scrollable content
</div>
</div>
Use .col instead of col-lg-3 :
<div class="row">
<div class="col">
Fixed content
</div>
<div class="col-lg-9">
Normal scrollable content
</div>
</div>
I'm laying out a login screen, and on that screen will be just a box with LOGIN and PASSWORD. I need to centralize vertically and horizontally (like any traditional login screen).
How can I achieve this with Twitter Bootstrap?
Thanks!
If you are using bootstrap grid, then you can offset your columns:
<div class="row">
<div class="span6 offset3">
Your content goes here
</div>
</div>
See example here: http://twitter.github.com/bootstrap/scaffolding.html#gridSystem
Or you can just use CSS to simply center block element,
div.login-box{
margin:0 auto;
width: 720px;
}
UPDATE to Johny's answer: For Bootstrap 3; the syntax is a bit different:
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
Your content goes here
</div>
</div>
or: better yet:
<div class="container">
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
Your content goes here
</div>
</div>
</div>
Just started using Blueprint CSS and now playing with the grids but have a simple problem. I created a navbar at the top of my page with each link 2 columns wide (using span-2). What is the right way to center these links inside the grid columns without hacking away at the css.
<div id="navbar" class="container showgrid">
<div class="span-2 border">
News
</div>
<div class="span-2 border">
Gigs
</div>
<div class="span-2 border">
Tunes
</div>
<div class="span-2 border">
Email List
</div>
</div>
I would create a helper class like this:
css:
.text-center{ text-align:center; }
html:
<div class="span-2 border text-center">
News
</div>
<div class="span-2 border text-center">
Gigs
</div>