I would like to vertically center an image on a page which is using bootstrap. I was able to apply vertical alignment to the entire bootstrap row using this answer, but that affects all columns within the bootstrap row, rather than what I want, which is for just one of the columns to be affected.
How can I selectively apply this styling?
<div>
<div class="row">
<div class="col-xs-6">
<p> lorem ispum bla bla </p>
</div>
<div class="col-xs-6"> <!-- column I want vertically aligned -->
<img href="#">
</div>
</div>
</div>
You can achieve that by using align-self: center like this:
HTML
<div>
<div class="row flex">
<div class="col-xs-6">
<p> lorem ispum bla bla </p>
</div>
<div class="col-xs-6 center-me"> <!-- column I want vertically aligned -->
<img href="#">
</div>
</div>
</div>
CSS
.flex {
display: flex
}
.center-me {
align-self: center
}
Related
I'm using Bulma (and Buefy with Vue) and I've got a panel with a series of items defined like this:
<template>
<div v-if="user">
<nav class="panel">
<p class="panel-heading">
Cities
</p>
<div class="panel-block" v-for="c in user.cities">
<div class="is-pulled-left">{{c}}</div>
<div class="is-pulled-right"><fai class="has-text-danger" icon="minus-circle"></fai></div>
</div>
</nav>
</div>
</template>
That looks like this:
How do I get it so the buttons are aligned on the right, not the left?
2021 Update: Newer versions of bluma have their flex box helpers. You can just add a single class to our panel-block to achieve this effect. Use is-justify-content-space-between like so:
<div class="panel-block is-justify-content-space-between" v-for="c in user.cities">
<div class="is-pulled-left">{{c}}</div>
<div class="is-pulled-right"><fai class="has-text-danger" icon="minus-circle"></fai></div>
</div>
Use justify-content: flex-end
Just by inspecting the html, we can see that the Bulma class panel-block applies a justify-content: flex-start to all it's child elements. This means that even if you apply is-pulled-right to the inner divs, everything will always be positioned left. Applying justify-content: flex-end to the outer parent container will force everything to the right. So, in short, you can override some of Bulma's default styling to get what you want.
.end {
justify-content: flex-end !important;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.css" rel="stylesheet" />
<div>
<nav class="panel">
<p class="panel-heading">
Cities
</p>
<div class="panel-block end">
<div class="">New York</div>
</div>
<div class="panel-block end">
<div class="">London</div>
</div>
<div class="panel-block end">
<div class="">Paris</div>
</div>
</nav>
</div>
Try wrapping them in a column class.
For example:
<div class="panel-block" v-for="c in user.cities">
<div class="column is-6">
<div class="is-pulled-left">{{c}}</div>
<div class="is-pulled-right"><fai class="has-text-danger" icon="minus-circle"></fai></div>
</div>
</div>
Please see code snipped: I am trying to align the divs with "Learn More" at the bottom of the columns at the same vertical height regardless of the height of the previous div.
Duplicate Disclaimer: I've been looking at How can I make Bootstrap columns all the same height? and How can I make Bootstrap 4 columns all the same height? which seem to be a similar problem. However, the solutions do not work for me as they are mostly for BS3 (e.g. I tried the examples with class="row-eq-height"), and most answers with regard to BS4 imply that the equal height is default in BS4.
However as you can see from the red borders, only the outer column height is "stretched" to the bottom by default, the inner one is only equal to text height. I'm very confused.
* { border: 1px solid red !important; }
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
</head>
<body>
<div class="row text-center no-gutters">
<div class="col-sm-4">
<div>
<h4>Components and examples</h4>
<p class="body-block-3 mx-auto">multiple line text example random text should break across multiple lines</p>
</div>
<div class="align-items-end">
Learn more 1
</div>
</div>
<div class="col-sm-4">
<div>
<h4>Components and examples</h4>
<p class="body-block-3 mx-auto">one line text example</p>
</div>
<div class="align-items-end">
Learn more 2
</div>
</div>
<div class="col-sm-4">
<div>
<h4>Components and examples</h4>
<p class="body-block-3 mx-auto">multiple line text example random text should break across multiple lines</p>
</div>
<div class="align-items-end">
Learn more 3
</div>
</div>
</div>
</body>
Also, I've tried various Bootstrap alignment options such as strechting the middle div with "align-items-stretch" and using "d-flex align-items-end" for the last div. Nothing works.
Columns in bootstrap are not display: flex and that is why the align-items-end is not working. Add the classes d-flex and flex-column to your column classes. Added the class .flex-1 and put this on your upper div.
* {
border: 1px solid red !important;
}
.body-block-3 {
max-width: 250px;
margin-left: auto;
margin-right: auto;
}
.flex-1 {
flex: 1;
}
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
</head>
<body>
<div class="row text-center no-gutters">
<div class="col-sm-4 d-flex flex-column">
<div class="flex-1">
<h4>Components and examples</h4>
<p class="body-block-3">multiple line text example random text should break across multiple lines</p>
</div>
<div>
Learn more 1
</div>
</div>
<div class="col-sm-4 d-flex flex-column">
<div class="flex-1">
<h4>Components and examples</h4>
<p class="body-block-3">one line text example</p>
</div>
<div>
Learn more 2
</div>
</div>
<div class="col-sm-4 d-flex flex-column">
<div class="flex-1">
<h4>Components and examples</h4>
<p class="body-block-3">multiple line text example random text should break across multiple lines</p>
</div>
<div>
Learn more 1
</div>
</div>
</div>
</body>
EDIT: Also wanted to mention you could use a boostrap utility class mb-auto instead of flex-1
<div class="col-sm-4 d-flex flex-column">
<div class="mb-auto">
<h4>Components and examples</h4>
<p class="body-block-3">one line text example</p>
</div>
<div>
Learn more 2
</div>
</div>
However your upper div will not take up the entire space (stretch), not sure if this is an issue with your use case. If not, you would not have to make any new classes and would be following the docs on bootstrap's with align-item section
EDIT: Updated for .body-block-3 class
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
I have a Bootstrap grid of two columns, one col has a responsive image, the second one has a heading, and some other elements. I'd like the content of the second column to always align vertically to the image. Here's the test case:
.align-this {
//?..
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-sm-5 col-md-6 col-lg-7">
<img class="img-responsive" src="https://dummyimage.com/200x600/000/fff">
</div>
<div class="col-sm-7 col-md-6 col-lg-5">
<div class="align-this">
<h1 class="main-title">Title</h1>
<p>
Description text here. Lorem ipsum or whatever.
</p>
<div>
main cta
</div>
</div>
</div>
</div>
Try this code
.row{
display: flex;
justify-content: center;
align-items: center;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-sm-5 col-md-6 col-lg-7">
<img class="img-responsive" src="https://dummyimage.com/200x600/000/fff">
</div>
<div class="col-sm-7 col-md-6 col-lg-5">
<div class="align-this">
<h1 class="main-title">Title</h1>
<p>
Description text here. Lorem ipsum or whatever.
</p>
<div>
main cta
</div>
</div>
</div>
</div>
have a link http://codepen.io/santoshkhalse/pen/oBjZyG
I'm using blueprint-css and I would like to have a horizontal scroll bar in the span-24 which allows the 3 span-12 divs below show up on the same row. This seems like it should be a simple thing but I can't get it working. The overflow-x:scroll gives me a scroll bar but the final span-12 shows up on a new line.
HTML:
<div class="span-24 table-container">
<div class="span-12">
Some Content
</div>
<div class="span-12">
Some Content
</div>
<div class="span-12">
Some Content
</div>
</div>
CSS:
div.table-container {
overflow-x:scroll;
}
With grids its always not so good to try to modify the grid layout system so i would suggest that you create a div inside your grid column instead of trying to modify the span class itself, like so:
<div class="span-24">
<div class="table-container">
<div class="span-12">
Some Content
</div>
<div class="span-12">
Some Content
</div>
<div class="span-12">
Some Content
</div>
</div>
</div>
By the way, just noticed that your span classes don't add up, 12+12+12 is 36, while your container is 24, try to lower your inner span classes to add up to 24, like so:
<div class="span-24">
<div class="table-container">
<div class="span-8">
Some Content
</div>
<div class="span-8">
Some Content
</div>
<div class="span-8 last">
Some Content
</div>
</div>
</div>
Demo: http://jsfiddle.net/CbRgc/