I have the following markup (Bootstrap 4):
<div class="col-3 d-flex flex-column">
<img class="align-self-center" src="#"/>
</div>
Since the container is flexed, the images are stretching. I'm aware align-self-center will resolve the issue, however, I don't want the image to be centered. I want the image to be align-self-left (left aligned rather than centered), but this stretched the image again.
Any way around this?
Here you go!
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="col-3 d-flex flex-column">
<img class="align-self-start" src="https://dummyimage.com/600x400/000/fff"/>
</div>
It would be align-self-start. Bootstrap flex doesn't use term left
Instead of using <img class="align-self-center" src="#"/> use <img class="align-self-start" src="#"/>. This should solve your problem (Basically it means that you image will be aligned to the start of your column)
Related
I am using Bootstrap 4, and trying to align my columns so that I have 2 images next to each-other on medium or larger viewports, but they keep aligning themselves one on top of the other.
<div class="row">
<div class="col-6">
<img class="img-fluid"
src="img/1.PNG">
</div>
<div class="col col-5 d-none d-md-block">
<img class="img-fluid"
src="img/2.PNG">
</div>
</div>
Image of code and example
That should work just fine if you take all the extra bits from the Row classes and just have class="row" Your column widths are both set to 5 though, 6 would be ideal for centering.
To assist with sleeker code, on the img classes try removing it all except for img-fluid
Your column classes are wrong. col fills all available space, and col-5 takes 5 columns on all screens. And in this case your col-5 is overriding your col anyway. What you actually need to do:
Use col-md-6 on both the images in place of col col-5. Your images will align themselves side by side from medium and up.
Also, you do NOT need to add d-none d-md-block to the parent and all the child classes. If you don't want to show a particular div in less than md, using it on the parent is enough.
For demonstration purposes I went ahead and used a dummy image that I could get to work. Your structure should be as follows.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<div class="row">
<div class="col-6 col-lg-6 col-sm-6">
<img src="https://dummyimage.com/600x400/000/fff">
</div>
<div class="col-6 col-lg-6 col-sm-6">
<img src="https://dummyimage.com/600x400/000/fff">
</div>
</div>
Using the different Large, Medium, and Small bootstrap classes allows for your row to adjust on different screen sizes, while maintaining that row structure. This link here is also very helpful for learning the system.
I want to have a full width 2 row, "1 column" layout, that takes up the entire viewport. The top row should have it's contents on the bottom of that row, and the bottom row should have it's contents on the top of that row.
Using some examples from bootstrap, I was able to achieve this: https://codepen.io/afagard/pen/QWpJWze
However, I am not sure if I am doing it correctly even though it looks as expected. Specifically, I tried to set the container to 100vh but that did not result in any changes to flexboxes so I've got each row at 50vh. I mostly do backend work and am trying to learn flexboxes.
Here is an example of a flexbox solution using just the bootstrap classes and no additional css:
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<div class="container-fluid p-0 vh-100 d-flex flex-column text-center">
<div class="flex-grow-1 d-flex flex-column bg-primary">
<div class="mt-auto">
Top half
</div>
</div>
<div class="flex-grow-1 d-flex flex-column bg-secondary">
<div class="mb-auto">
Bottom half
</div>
</div>
</div>
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).
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>
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>