How can I center an image vertically inside a div in bootstrap? - html

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

Related

How can I achieve this two-column layout with Tailwind?

I need to create three divs positioned like below:
Green div should be 75% width and red divs should have 25% width and 50% of height, placed in column. And everything should be responsive.
Right now I have something like here:
<div className="w-full">
<div className="w-3/4 float-left">
</div>
<div className="w-1/4 float-right">
<div id="red-one"></div>
<div id="red-two"></div>
</div>
</div>
but it not this same as i expected :/
can someone tell me how to do this?
thanks for any help!
Oldish option (see nowdays below that one) :you can use and mix the table-layout display and regular block display via tailwind class
Possible example
/* your scrennshot's borders */
div div {border:solid red;}
div.table-cell{border-color:green}
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet"/>
<div class="table w-full p-2">
<div class="table-cell w-3/4 p-2">hello</div>
<div class="p-2 ml-2"> the</div>
<div class="p-2 mt-2 ml-2">world</div>
</div>
any draw back ?
yes, if both content of the rights side div are shorter than the content of the left one, it wont fill the column
nowdays option: grid
Advised example:
div div {border:solid red;}
div div:first-child{border-color:green}
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet"/>
<div class="grid grid-cols-4 p-2 grid-cols-2 gap-2">
<div class="col-1 col-span-3 row-span-2 p-2">hello</div>
<div class="col-2 p-2"> the</div>
<div class="col-2 p-2">world</div>
</div>
drawbacks ? none, but you will have to create your own class to set the grid-template-colums property to match your columns's widths as commented by #bqardi
Container: grid grid-cols-4 and green div: col-span-3 row-span-2? No need to create own class

Simple css container do not align elements as it should

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/

How to center an <h1> vertically and horizontally using bootstrap

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>

Bootstrap 4: Text on image displaced on difference screen size

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).

How to center div within col-md-12 in bootstrap

I have problem with centering components within col-md-12. For example I have 12 columns with <h1> or <h2> inside. I want to <h1> to be centered.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-12">
<div id="naglowek">
<h1>Something</h1>
</div>
</div>
</div>
</div>
I tried to access css class text-center or block-center to divs, but everytime <h1> was floated to the left. I need have this centered and set padding on my own. How can I solve this?
<div class="col-md-12 text-center"> works for bootstrap, no need to add any style unless you have already some style for h1. even if that's the case, you can use .text-center for h1
seems you are using width in that parent div. don't do that ever if you need content to be 100% width. and as per background, if you need 100% area occupy the background, you can simply use it in the div if not, you better use it with some pseudo classes :before or :after
In bootstrap 4
I know it's not the direct answer to this question but it may help someone
to center the childs horizontally, use bootstrap-4 class
justify-content-center
to center the childs vertically, use bootstrap-4 class
align-items-center
but remember don't forget to use d-flex class with these
it's a bootstrap-4 utility class, like so
<div class="d-flex justify-content-center align-items-center" style="height:100px;">
<span class="bg-primary">MIDDLE</span>
</div>
copy and paste this snippet to check how it works
Note: make sure to add bootstrap-4 utilities if this code does not work.
Hope this will help someone.
Add class="text-center" to div.
<div id="naglowek" class="text-center">
<h1>Something</h1>
</div>
text-center class is from bootstrap.
You can add the text-center class to the h1.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-12">
<div id="naglowek">
<h1 class="text-center">Something</h1>
</div>
</div>
</div>
</div>