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).
Related
The Problem
There is a space below the img in md screen size, and I try to get rid of it.
I've tried to add pa-0 in class, but still can't figure out how to achieve the result.
Restriction
Since the whole code will be received in frontend Nuxt2 in v-html to represent the description + image. So I couldn't add CSS as well. Only vanilla html+ Some Vuetify syntax.
Update
This is for Nuxt2 with Vuetify, using in v-html.
Update ver.2
Initially there is a css attribute in the section of v-html.
margin-bottom: 12px;
But the answer is a good format to code in vanilla html.
my code
<div class="py-6 pa-0">
<div class="row no-gutters align-center" style="background-color: #f6f6f6">
<div class="col-md-6 col-12 order-md-1 order-2 px-4 mb-1">
<h1 class="display-1 py-8">Main Property</h1>
<div class="align-center d-flex justify-space-between mb-1">
<h5>Water</h5>
<div class="mb-1"><small>And more</small></div>
</div>
</div>
<div class="col-md-6 col-12 order-md-2 order-1">
<img class="mx-auto" src="https://images.unsplash.com/photo-1668277280345-f3949c1b6aa2?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1974&q=80" lazy-src="https://images.unsplash.com/photo-1674707735136-3d3a8720397e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=688&q=80"
alt="test" />
</div>
</div>
</div>
Hey this sounds like an an issue with line height getting the best of things,
simply set the font-size of the image container to 0 and the bottom space should disappear.
div {
font-size: 0;
}
<div class="row mt-5 d-flex">
<div class="col-md-3 p-5 mt-3">
<img id="image" class="align-self-center"
src="background1.jpg"
width="80%" height="100%"/>
</div>
<div class="col-md-4 align-self-center">
<span id="text">
text
</span>
</div>
<div class="col-md-5 background-image">
</div>
</div>
Result:
I don't know why the empty space between the rounded image and the end of column is there. I use bootstrap. I've put borders around divs with "col-md-*" in order to see the edges correctly.
I tried setting padding and margin to 0 but there weren't any changes. I think it has to do something with the "img" tag (I also tried setting it to be displayed as a block).
Check for any padding or margin. usually bootstrap adds those properties automatically with col-md-** classes. You might have to override those classes. I would use the inspect element tool to track them.
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
Hey i was just messing with some css transforms and i can't make this happen,
https://codepen.io/simobm/pen/YvoOMO
Im using Bootstrap 4 and so i make 2 columns , on the left there is an image and on the right some text, now i want the text to to be vertical and centered so i use :
transform:rotate(90deg)
on the text and :
align-items: center;
text-align: center;
On the column itself . The problem as you can see is that on mobile, the text breaks to 2 lines and 3 lines consecutively.
There is a handy text-nowrap class that you can apply that will stop the text from becoming multiple lines.
<div class="container">
<div class="row mt-5">
<div class="col-9 ">
<img class="img-fluid" src="https://images.unsplash.com/photo-1521818372696-23e67aff37a5?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=b42f31aba73642725afa0a222d211542" alt="">
</div>
<div class="col-3 d-flex align-items-center justify-content-center">
<p class="rotate text-nowrap">Azurmendi by ENEKO ATXA</p>
</div>
</div>
</div>
CodePen
Without handling text resizing, this can have some potentially undesirable effects on mobile.
Useful Links
Bootstrap text-nowrap Documentation
Hi all I am using Bootstrap 4 and have a column with an image like below:
<div className='col-xs-12 col-sm-5 col-md-4 col-lg-3'>
<img src={movie.Poster} className='movie-poster img-fluid mx-auto d-block' />
</div>
My issue is I want to center the image as above when the screen size activates col-xs-12 and col-sm-5 but when screen is bigger such as col-md-4 or col-lg-3 I don't want to center the image. Is there a way to conditionally do things when at certain screen sizes?
Thanks in advance.
Yes. You should follow this notation: https://getbootstrap.com/docs/4.0/utilities/spacing/#notation
In your case, you should use: mx-auto mx-lg-0
<img src={movie.Poster} class='movie-poster img-fluid mx-auto mx-lg-0 d-block' />
mx-auto: for xs, sm and md with margins left and right auto.
ml-lg-0: for lg and xl with margin left 0. You can use mx-lg-0 too if you need.
Yes, the mx-auto class is responsive. So, if you use mx-md-auto, then that will apply that class only from the medium (md) screens onwards.
However, that won't make any difference in your case because you are also using the img-fluid class. That will fill out the entire column with the image. In other words, it's pointless trying to center an image while at the same having a class that auto-stretches the image to fill out the entire width of the column.
Here's a code snippet to show that it works (click "run code snippet" below and expand to full page):
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-12 col-sm-5 col-md-4 col-lg-3 bg-secondary">
<p>Lorem ipsum.</p>
<img src="https://placeimg.com/50/50/animals" class="movie-poster img-fluid mx-md-auto d-block" />
</div>
</div>
</div>