I am trying to vertically align the content "ABC Company" in a div using Bootstrap 4's alignment helper classes; but unable to do so. I am using the below code.
<div class="container" style="width: 740px;">
<div class="row">
<div class="col-sm text-right" style="line-height: 20px; height: 20px; color:#004990; text-decoration:none; font-family:Helvetica, Arial, sans-serif; font-size:10px;">
Your Account
</div>
</div>
<div class="row">
<div class="col-sm text-center" style="background-color:#0471AF; height:100px;">
<span class="align-middle">ABC Company</span>
</div>
</div>
Please point out what am I missing !
Set display: flex; justify-content: center; align-items: center; for col-sm text-center or, alternatively, set display: flex; justify-content: center; for col-sm text-center and align-self: center; for <span>.
.col-sm.text-center {
display: flex;
justify-content: center;
align-items: center;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<style>
</style>
<div class="row">
<div class="col-sm text-right" style="line-height: 20px; height: 20px; color:#004990; text-decoration:none; font-family:Helvetica, Arial, sans-serif; font-size:10px;">
Your Account
</div>
</div>
<div class="row">
<div class="col-sm text-center" style="background-color:#0471AF; height:100px;">
<span class="align-middle">ABC Company</span>
</div>
</div>
Related
I have an html page as follows, with its corresponding css code:
<div class="container">
<div class="row mt-4">
<div class="col-sm-8">
<h2>blah blah</h2>
<p>blah blah</p>
</div>
<div class="col-sm-4">
<h2>Contact Us</h2>
<address>
<strong>blah blah</strong>
</address>
<div class="row">
<div class="col-6 col-sm-12 col-md-8">
<a target="_blank" rel="noopener noreferrer" href="https://www.blahblah/home/">
<img src="media/logos/blah.png" class="img-fluid mb-2">
</a>
</div>
<div class="col-6 col-sm-12 col-md-8">
<text>Sponsored by:</text>
<a target="_blank" rel="noopener noreferrer" href="https://www.blahblah/">
<img src="media/logos/blah.png" class="img-fluid mb-2">
</a>
</div>
</div>
</div>
</div>
</div>
text {
position: absolute;
font-size: small;
background: blanchedalmond;
}
I changed my css code to the following, to make sure the text between the text tags centers in the middle, but there is no effect whatsoever...
text {
position: absolute;
font-size: small;
background: blanchedalmond;
text-align: center;
vertical-align: middle;
justify-content: center;
align-items: center;
}
None of these four added lines alone or in a combo do the trick. What am I doing wrong that the text does not justify in the center?
You can give properties like display: inline-flex, align-items: center to the parent so it will always keep them in center of each other.
Like this:
text {
position: absolute;
font-size: small;
background: blanchedalmond;
}
.parent-div {
display: inline-flex;
flex-direction: column;
align-items: center;
}
<div class="container">
<div class="row mt-4">
<div class="col-sm-8">
<h2>blah blah</h2>
<p>blah blah</p>
</div>
<div class="col-sm-4">
<h2>Contact Us</h2>
<address>
<strong>blah blah</strong>
</address>
<div class="row">
<div class="col-6 col-sm-12 col-md-8">
<a target="_blank" rel="noopener noreferrer" href="https://www.blahblah/home/">
<img src="https://i.picsum.photos/id/387/536/354.jpg?hmac=Zs1KZbc0jXe2zZP7yKL_OrUKxdUVFH0LqLoegVZnIuA" class="img-fluid mb-2">
</a>
</div>
<div class="col-6 col-sm-12 col-md-8 parent-div">
<text>Sponsored by:</text>
<a target="_blank" rel="noopener noreferrer" href="https://www.blahblah/">
<img src="https://i.picsum.photos/id/387/536/354.jpg?hmac=Zs1KZbc0jXe2zZP7yKL_OrUKxdUVFH0LqLoegVZnIuA" class="img-fluid mb-2">
</a>
</div>
</div>
</div>
</div>
</div>
Working Fiddle
The first 2 properties are for text placement on a line.
text-align: center;
vertical-align: middle;
text-align, sets the placement horizontally on the line, so if the container is 100% wide it will end in the center.
vertical-align is text placement vertically on the text line. So to make it center of your image, then the line-height should be the same as your image.
justify-content: center;
align-items: center;
Are used together with flexbox display:flex.
You need to also use position: relative and absolute to place the elements ontop each other.
.image-conatiner {
position:relative;
}
.text {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
}
I have been trying to build a table with Bootstrap 4 grid container. Everything looks great (styling, alignment,...) except for one problem: the table doesn't follow the grid container as expected. It seems like only the first column expands/shrinks when I try to resize my browser.
I used the display property to build my table to solve alignment problems, but once I try putting col-# as class names for the columns, it doesn't seem to work.
.my-table {
border: 1px solid grey;
display: table;
padding: 0;
}
.my-table-row-header {
display: table-header-group;
height: 50px;
}
.first-header-column {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.my-table-body {
display: table-row-group;
}
.my-table-row {
height: 50px;
border-left: 1px solid grey;
border-bottom: 1px solid grey;
display: table-row;
}
.row-cell {
display: table-cell;
vertical-align: middle;
border-right: 1px solid grey;
}
.c-column {
display: table-cell;
vertical-align: middle;
text-align: center;
padding-left: 11px;
padding-right: 11px;
}
<div class="container-fluid no-gutters">
<div class="my-table col-9 table">
<div class="my-table-row-header row">
<div class="first-header-column col-1 row-cell">
<span class="c-column">c</span>
</div>
<div class="second-column col-4 row-cell">
<span>text</span>
</div>
<div class="third-column col-4 row-cell">
<span>text</span>
</div>
</div>
<div class="my-table-body">
<div class="my-table-row row">
<div class="first-column col-1 row-cell">
<span class="c-column">c</span>
</div>
<div class="second-column col-4 row-cell">
<span>text</span>
</div>
<div class="third-column col-4 row-cell">
<span>text</span>
</div>
</div>
<div class="my-table-row row">
<div class="first-column col-1 row-cell">
<span class="c-column">c</span>
</div>
<div class="second-column col-4 row-cell">
<span>text</span>
</div>
<div class="third-column col-4 row-cell">
<span>text</span>
</div>
</div>
</div>
</div>
</div>
Jsfiddle: https://jsfiddle.net/4zn5oby6/2/
If you try resizing your browser, you'll see the first column resizes accordingly. I expect it to follow the grid container size strictly.
P.S. Since my table contains other components (not just text), I would like to keep the display properties to assure my styling is on point if possible. Thanks.
I am not clear on what the question is exactly, but I noticed the col-9 needed to be in its own div. Then to equal 12 columns add the col-3 div after.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<style>
.my-table {
border: 1px solid grey;
display: table;
padding: 0;
}
.my-table-row-header {
display: table-header-group;
height: 50px;
}
.first-header-column {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.my-table-body {
display: table-row-group;
}
.my-table-row {
height: 50px;
border-left: 1px solid grey;
border-bottom: 1px solid grey;
display: table-row;
}
.row-cell {
display: table-cell;
vertical-align: middle;
border-right: 1px solid grey;
}
.c-column {
display: table-cell;
vertical-align: middle;
text-align: center;
padding-left: 11px;
padding-right: 11px;
}
</style>
</head>
<body>
<div class="container-fluid no-gutters">
<div class="col-9">
<div class="my-table table">
<div class="my-table-row-header row">
<div class="first-header-column col-1 row-cell">
<span class="c-column">c</span>
</div>
<div class="second-column col-4 row-cell">
<span>text</span>
</div>
<div class="third-column col-4 row-cell">
<span>text</span>
</div>
</div>
<div class="my-table-body">
<div class="my-table-row row">
<div class="first-column col-1 row-cell">
<span class="c-column">c</span>
</div>
<div class="second-column col-4 row-cell">
<span>text</span>
</div>
<div class="third-column col-4 row-cell">
<span>text</span>
</div>
</div>
<div class="my-table-row row">
<div class="first-column col-1 row-cell">
<span class="c-column">c</span>
</div>
<div class="second-column col-4 row-cell">
<span>text</span>
</div>
<div class="third-column col-4 row-cell">
<span>text</span>
</div>
</div>
</div>
</div></div>
<div class="col-3"></div>
</div>
</body>
</html>
So, I found a way around it. Instead of using display: table-cell and all that vertical-align and text-align crap, I used display: flex which respected the bootstrap grid column width (which I'm still not sure why?).
I have an image, and I display a text to the right and bottom of it , as can be seen in the first snippet(view snippet in full window). Now I want to add another text, and that it will be to the top right of the image, above the other text, but it pushes the bottom text to the right. I want both texts to be relative to the image, but the last paragraph seems to be relative to the sibling.
(**Sorry about the many html tags, I'm using a css framework also)
.justify-content-end {
align-self: flex-end;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.css" rel="stylesheet"/>
<div class="level">
<div class="level-left">
<div class="level-item">
<figure class="image is-128x128">
<img src="https://bulma.io/images/placeholders/128x128.png">
</figure>
</div>
<div class="level-item justify-content-end">
<p>Hello World</p>
</div>
</div>
</div>
And this is the snippet depicting the problem:
.justify-content-start {
align-self: flex-start;
}
.justify-content-end {
align-self: flex-end;
}
#click {
text-align: center;
width: 128px;
cursor: pointer;
border: 1px solid red;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.css" rel="stylesheet" />
<div class="level">
<div class="level-left">
<div class="level-item">
<figure class="image is-128x128">
<img src="https://bulma.io/images/placeholders/128x128.png">
</figure>
</div>
<div class="level-item justify-content-start">
<label class="label">
<p id="click">Click Me!</p>
</label>
</div>
<div class="level-item justify-content-end">
<p>Hello World</p>
</div>
</div>
</div>
Here is my solution
Had to change your structure
<div class=" par">
<label class="label">
<p id="click">Click Me!</p>
</label>
<p>Name Placeholder</p>
</div>
Then
added this to css
.main .stretch{
align-items: stretch;
}
.par{
display:flex;
flex-direction:column;
justify-content:space-between;
}
.justify-content-start {
align-self: flex-start;
}
.justify-content-end {
align-self: flex-end;
}
.main .stretch {
align-items: stretch;
text-align: center;
}
#click {
text-align: center;
width: 128px;
cursor: pointer;
border: 1px solid red;
margin: auto;
}
.par {
display: flex;
flex-direction: column;
justify-content: space-between;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.css" rel="stylesheet" />
<div class="level main">
<div class="level-left stretch">
<div class="level-item">
<figure class="image is-128x128">
<img src="https://bulma.io/images/placeholders/128x128.png">
</figure>
</div>
<div class=" par">
<label class="label">
<p id="click">Click Me!</p>
</label>
<p>Name Placeholder</p>
</div>
</div>
</div>
I usually dislike position:absolute; but it looks like it could be a fair use here .
.justify-content-start {
align-self: flex-start;
min-height: 1.4em; /* keep room for the absolute child */
}
.justify-content-end {
align-self: flex-end;
}
#click {
text-align: center;
width: 128px;
cursor: pointer;
border: 1px solid red;
}
#media (min-width: 768px) {
#click {
position: absolute;
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.css" rel="stylesheet" />
<div class="level">
<div class="level-left">
<div class="level-item">
<figure class="image is-128x128">
<img src="https://bulma.io/images/placeholders/128x128.png">
</figure>
</div>
<div class="level-item justify-content-start">
<label class="label">
<p id="click">Click Me!</p>
</label>
</div>
<div class="level-item justify-content-end">
<p>Hello World</p>
</div>
</div>
</div>
I try to reach one point using div's and bootstrap. It should be in one line number of points and smaller information about points and in second area should be bootstrap icon and again information about icon.
My code:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row center-block">
<div class="col-md-5" style="padding: 0px; padding-left: 10px; ">
<i class="pull-left h2"><h2>72</h2></i> TWOJE PUNKTY
</div>
<div class="col-md-7" style="padding: 0px">
<i class="fa fa-trophy fa-2x pull-left"></i> WYRÓZNIENIE SZYBKI BILL
</div>
<br>
<table class="table">
<tr>
<th><h2>72</h2></th>
<th>you points</th>
<th><i class="fa fa-trophy fa-2x pull-left"></i></th>
<th>fastL</th>
</tr>
</table>
</div>
</div>
Try below code and you can adjust col- class according to you
.flex-div {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
align-items: center;
}
.icon-text {
float: left;
margin-right: 10px;
font-size: 34px;
}
.icon-text h2 {
margin: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row center-block row-eq-height">
<div class="col-xs-6 flex-div">
<div class="icon-text">
<h2>72</h2>
</div>
<div class="info-text">
TWOJE PUNKTY<br/>
WYRÓZNIENIE SZYBKI BILL
</div>
</div>
<div class="col-xs-6 flex-div ">
<div class="icon-text">
<i class="glyphicon glyphicon-certificate"></i>
</div>
<div class="info-text">
Your Achivement Reached
</div>
</div>
</div>
</div>
You can achieve that effect using something like this.
HTML:
<div class="points"> 72 </div>
<div class="points-details">
Your
points
</div>
<div class="icon">+</div>
<div class="icon-details">
Your
Achievment
Reached
</div>
CSS:
.points{
display: inline-block;
}
.points-details{
display: inline-block;
}
.icon{
margin-left: 20px;
display: inline-block;
}
.icon-details{
display: inline-block;
}
For some reason, the button is sticking to the top of where the image starts. I want to center it in the middle of the container. I am trying to center it with the "center" class:
position: relative;
top: 50%;
transform: translateY(-50%);
Code:
What it looks like right now:
What it should look like:
HTML:
<div style="background-image: url( './dist/img/background/minecraft.jpg' ); height: 125px;" class="col-md-12">
<div class="wrapper text-center center">
<div class="col-lg-5">
<span style="color: #FFFFFF; font-size: 220%;">
<img style="width: 100px; display: inline;" src="./dist/img/icon/minecraft.png" />
Minecraftasdasdsad
</span>
</div>
<div class="col-lg-3"></div>
<div class="row">
<div class="col-lg-4">
<button style="color: #FFFFFF; min-width: 100px;" class="btn btn-green">
Start
</button>
<button style="margin-left: 10px; color: #FFFFFF; min-width: 100px;" class="btn btn-red">
Stop
</button>
</div>
</div>
</div>
</div>
Here is an implementation using flexbox.
#center {
display: -webkit-flex;
display: flex;
justify-content: flex-end;
-webkit-align-items: center;
align-items: center;
}
<div style="background-image: url( 'https://cdn.pixabay.com/photo/2015/11/02/18/34/banner-1018818_960_720.jpg' ); height: 125px;" class="col-md-12">
<div class="wrapper text-center center">
<div class="col-lg-5">
<span style="color: #FFFFFF; font-size: 220%;">
<img style="width: 100px; display: inline;" src="https://cdn.pixabay.com/photo/2015/11/02/18/34/banner-1018818_960_720.jpg" />
Minecraftasdasdsad
</span>
</div>
<div class="col-lg-3"></div>
<div class="row">
<div id="center">
<button style="color: #FFFFFF; min-width: 100px;" class="btn btn-green">
Start
</button>
<button style="margin: 10px;color: #FFFFFF; min-width: 100px;" class="btn btn-red">
Stop
</button>
</div>
</div>
</div>
</div>