I wanna center an h1 vertically and horizontally using Bootstrap. Actually I tried to use Bootstrap flexbox to align it vertically with the align-items-center property so in order to work it needs height so I give it some height but it didn't work :
The h1 is supposed to be in place of the yellow highlights but that doesn't work.
I don't wanna use any jquery or javascript because I wanna practice bootstrap.
I don't know why but I think i should use the 2d transform property.
By the way I have read this question and it didn't solve my problema.
Here is my code :
HTML
<div class="backIMg">
<!-- Greeting -->
<div class="d-flex align-items-center flex-column text-primary greeting-container">
<h1 class="greeting col-sm-8 text-center m-auto display-1 font-weight-bold align-items-center align-self-center " >Welcome</h1>
</div>
</div>
CSS
.backIMg .greeting-container{
height:100vh
}
I'm not familiar with Bootstrap. Thanks in advance
Rather than using multiple bootstrap classes, you can use flex properties on the .greeting-container. You just have to add flex properties to justify and align the content in center.
.backIMg .greeting-container {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
<div class="backIMg">
<div class="greeting-container">
<h1>Welcome</h1>
</div>
</div>
use: class="align-middle" as described here: https://getbootstrap.com/docs/4.0/utilities/vertical-align/
<h1 class="greeting col-sm-8 text-center m-auto display-1 font-weight-bold align-items-center align-self-center align-middle" >Welcome</h1>
Related
I have a simple css div with some styling from bootstrap and this is the fiddle
https://jsfiddle.net/w9gyc0t5/
This is the code
<!--
Bootstrap docs: https://getbootstrap.com/docs
-->
<div class="container">
<div class="row">
<div class="col-md-6">
<div>
<h5 class="text-danger"><b>General</b></h5>
<h5 class="text-danger float-right"><b>General</b></h5>
</div>
</div>
</div>
I was expecting the H5 element to align perfectly with the element that has been floated right. I know i could move the element floated right to align with the one on the left, but i want to know what is causing this behavior and are there new css innovations such as flex box that solves this problem.
The simplest solution will be to remove the class float-right from second <h5> and put in on the first <h5> like this:
<div>
<h5 class="text-danger float-right"><b>General</b></h5>
<h5 class="text-danger"><b>General</b></h5>
</div>
Here is the fiddle for it: https://jsfiddle.net/6h20bwqc/3/
N.B. But FlexBox is recommended as it is a modern and clean solution.
Just add class="d-flex justify-content-between align-items-center" to the wrapper div and remove float-right for a flex-box solution:
Here is Fiddle for it: https://jsfiddle.net/6h20bwqc/4/
In the first section have a p and an image. I would really like to know how to center them vertically.
<section id="banner">
<div class="container text-center">
<div class="row">
<div class="col-md-6">
<p class="promo-title">Incubamos tus ideas para dar vida a tus sueños</p>
Lorem
</div>
<div class="col-md-6 text-center">
<img src="https://cdn.pixabay.com/photo/2017/08/18/00/23/computer-2653374_960_720.png" class="img-fluid" alt="">
</div>
</div>
</div>
</section>
You need flexbox.
<div class="col-md-6 d-flex flex-column align-items-center">
<p class="promo-title">Incubamos tus ideas para dar vida a tus sueños</p>
Lorem
</div>
In bootstrap there are easy classes you can add that will configure any element into the flex container you need. It is very important to note that flexbox properties affect the flex container and the immediate child elements which become flex elements.
Add this class to the div that wraps the image and paragraph you want to have centered:
d-flex
That adds display: flex to the element and turns it into a flex container!
To have the flex items (the direct child elements) layout in a column, add this:
flex-column
That adds flex-direction: column to the element.
Finally, you need to center them, add:
align-items-center
That adds align-items: center. It really helps to understand each of these properties do but if you add all 3 you will get the desired layout. More reading:
Bootstrap flex docs: https://getbootstrap.com/docs/4.0/utilities/flex/
My fav Flexbox resource: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
You can try this
<div class="col-md-6 d-flex justify-content-center align-middle">
<img src="https://cdn.pixabay.com/photo/2017/08/18/00/23/computer-2653374_960_720.png" class="img-fluid" alt="">
</div>
You could try adding:
p, img {
position: relative;
top: 50%;
transform: translateY(-50%);
}
Copied from here
I am trying to use this Bootstrap 4 login form.
https://startbootstrap.com/snippets/login/
I am trying to figure out how to solve these 2 troubles.
I am trying to change the opacity of .card-signin but when I change it affects the form and buttons as well. How can I change opacity only for the card, not for the elements inside it?
How can I center this card in the middle of the screen vertically? It shows in the top while I tried different combinations with vertical-align?
Add below css and you're all set...
html,body,.container,.row {
height: 100%;
}
.col-sm-9.col-md-7.col-lg-5.mx-auto {
align-items: center;
display: flex;
}
.card.card-signin.my-5 {
background-color: rgba(255, 255, 255, 0.6);
}
"How can I center this card in the middle of the screen vertically? It shows in the top while I tried different combinations with vertical-align?"
Important! Vertical center is relative to the height of the parent
If the parent of the element your trying to center has no defined height, none of the vertical centering solutions will work!
Now, onto vertical centering in Bootstrap 4...
You can use the new flexbox & size utilities to make the container full-height and display: flex. These options don't require extra CSS (except that the height of the container (ie:html,body) must be 100%).
Option 1 align-self-center on flexbox child
<div class="container d-flex h-100">
<div class="row justify-content-center align-self-center">
I'm vertically centered
</div>
enter link description here
Option 2 align-items-center on flexbox parent (.row is display:flex; flex-direction:row)
<div class="container h-100">
<div class="row align-items-center h-100">
<div class="col-6 mx-auto">
<div class="jumbotron">
I'm vertically centered
</div>
</div>
</div>
enter link description here
Option 3 justify-content-center on flexbox parent (.card is display:flex;flex-direction:column)
<div class="container h-100">
<div class="row align-items-center h-100">
<div class="col-6 mx-auto">
<div class="card h-100 border-primary justify-content-center">
<div>
...card content...
</div>
</div>
</div>
</div>
enter link description here
Instead of using opacity, you can try out following style.
.card-body {
background: rgba(255, 252, 252, 0.09);
}
Try below css.
.card {
background-color: rgba(255,255,255, 0.2) !important;
}
I want the text to look like this on my image:
which is slightly away from the "Center" point of the image(as i want to avoid the phone in the image), so text-center wouldnt work. I currently set the division of the row to "relative" and the text to "Absolute" in order to even get the text on top of the image. But when i resize the image, it will be displaced.
Code:
<section>
<div class="col-lg-12 text-center"style="margin: 0;padding: 0;position: relative;">
<img class="img-fluid" style="width:100%;" src="img/phone-transparent.png" alt=""></img>
<h2 style="color:red;position: absolute; top: 120px; width: 100%;">This is also</br>available on your mobile.</h2>
</div>
</section>
On original screensize:
On a different screensize:
This can be done using only Bootstrap 4 classes. Read the documentation on using the grid, and the utility classes for positioning and flexbox. You don't need all the inline CSS styles.
<div class="container-fluid">
<section class="row no-gutter align-items-center">
<div class="col-lg-12 text-center p-0 d-flex align-items-center">
<img class="img-fluid position-relative mx-auto" src="//placehold.it/1900x400" alt="">
<h3 class="w-100 position-absolute text-danger my-auto">This is also<br>available on your mobile.</h3>
</div>
</section>
</div>
Demo
Remember that .col-* must be placed in the .row, and the .row
should be inside a container.
You can use the spacing utils and CSS object-fit on the image to get the position and size: Demo 2 (you will need to tweak this as desired).
I've been trying to imitate what I consider is a great design for top navigation. The top navigation is from this website here: Giphy
For my layout I've been using BassCSS latest version which is the Basscss v8.0.1. Here's what I have so far:
HTML:
<div class="clearfix xs-hide mx-auto bg-white flex flex-justify md-col-12 lg-col-8 mb1">
<div class="col mx-auto center border-bottom border-red strong-border px3">
Home
</div>
<div class="col mx-auto center border-bottom border-green strong-border px3">
Categories
</div>
<div class="col mx-auto center border-bottom border-purple strong-border px3">
Tags
</div>
<div class="col mx-auto center border-bottom border-aqua strong-border px3">
Information
</div>
<div class="col mx-auto center border-bottom border-yellow strong-border px3">
Search
</div>
</div>
<div class="clearfix xs-hide flex mx-auto md-col-12 lg-col-8 mb1">
<label for="search-input" class="hide">Search</label>
<input
type="search"
id="search-input"
class="flex-auto py1 px1 m0 field not-rounded"
placeholder="Search term">
<button class="border black bg-aqua not-rounded">Go</button>
</div>
The CSS files for BassCSS can be found at the official website (I can't post more than two links). I just extended on little thing:
.strong-border{
border-bottom-width: 5px;
}
And that gives me the desire strong border. You can see my version in codepen. That's what I have already but it isn't as good looking as the original because of that white-space problem (Before the links there's some white-space) and this is caused because the links are centered in their container. Also, I don't want the background color to be black and so I was looking for it to look great on white.
Can you please help me to get it a little bit more like the original?
BTW, here's a codepen link with my version on it so you can go ahead and see/play it. :-)
You could use :first-child and :last-child to specify that you don't want the margin left respectively right on the extremity items.
Something like this:
div.mb1 div:first-child {
margin-left: 0;
}
div.mb1 div:last-child {
margin-right: 0;
}
where div.mb1 is the parent and so the properties are specified on the first and last child div.
Here is the updated codepen.
Hope I got the problem right.