i'm using bootstrap 4, i have a div that got d-flex and it's supposed to display direction row at the "lg" (screens 1200px and greater) breakpoint and when it's used on a mobile phone "sm" or "xs" breakpoint would be used and it would display direction column and behave like a column, but no matter how i try it, it just stays a row all the time
i tried
<div class="d-flex flex-sm-column flex-lg-row justify-content-lg-around">
and
<div class="d-flex flex-xs-column flex-lg-row justify-content-lg-around">
but it doesn't work..am i misunderstanding the breakpoint system or something? i mean i would do the same using the CSS media queries.
here is the full code
<div class="w-75 my-5 mx-auto">
<h1 class=" text-center my-3">Awards won</h1>
<div class="d-flex flex-sm-column flex-lg-row justify-content-lg-around">
<div class="d-flex flex-column col-sm-4 align-items-center">
<img src="./assets/award1.PNG" width="150" height="150" class="award-img">
<span> Award title </span>
<hr class="bg-dark w-50 m-0"/>
<span class="w-75 text-center text-break">Best cake made in 2019</span>
</div>
<div class="d-flex flex-column col-sm-4 align-items-center">
<img src="./assets/award2.PNG" width="150" height="150" class="award-img">
<span> Award title </span>
<hr class="bg-dark w-50 m-0"/>
<span class="w-75 text-center text-break">Winners of the national cake baking contest</span>
</div>
<div class="d-flex flex-column col-sm-4 align-items-center">
<img src="./assets/award3.PNG" width="150" height="150" class="award-img">
<span> Award title </span>
<hr class="bg-dark w-50 m-0"/>
<span class="w-75 text-center text-break">Most satisfied customers award</span>
</div>
</div>
</div>
solved it, it seems bootstrap handles the xs breakpoint by not including a breakpoint value in the class utility
<div class="d-flex flex-column flex-lg-row justify-content-around">
this works
You should be using css to accomplish this. Bootstrap should be used for the grid. CSS to style elements. It'll make your markup a whole lot clearer and avoids using unnecessary inline classes. Heres an example
html
<div class="col-sm-4">
<div class="item">
<div class="item__title">Heres a title</div>
<div class="item__content">
some content
</div>
</div>
</div>
css
.item{
display: flex;
flex-direction: column;
#media (min-width: 1200px){
flex-direction: row;
}
}
Related
I am working on an angular project where I am getting the data in image and title and location. I tried to make a responsive div but unable to make them in one size.
<div *ngFor="let company of companies" class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-12">
<div class="card">
<div class="card-content">
<div class="card-body py-0 text-center">
<input [checked]="true" type="radio" formControlName="scope" (click)="nextFormPostion(nextFormPostionName)" (change)="nextFormPostion(nextFormPostionName)" id="img{{company.scope}}" class="d-none imgbgchk" value="{{company.scope}}">
<label for="img{{company.scope}}">
<div class="row justify-content-center">
<div class="col-12" style="height: 6rem ; display:table-cell; vertical-align: middle;">
<img src="{{company.logo}}" class="mt-1 img-fluid mh-100" alt="Image 1">
</div>
<div class="col-12 mt-2" style="min-height: 3rem;font-size: 12px;text-transform: none;">
<span>{{company.company}}</span>
</div>
<div class="col-12 mt-1" style="min-height: 2.5rem;font-size: 12px;text-transform: none;">
<span>{{company.country}}</span>
</div>
</div>
<div class="tick_container">
<div class="tick"><i class="fa fa-check"></i></div>
</div>
</label>
</div>
</div>
</div>
</div>
company.logo is the image path and company.company is the name of the company. I want to make image in vertical and horizontal align center and if company name length is new line it change the size of all divs.
You don't need bootstrap exactly to do that you can use JavaScript to get the div side you want and apply as width + height.
Also you can use CSS with, for example:
width: 100%
The first thing you need to check if you have any border, margin, padding that is affecting your code. I don't know, I don't have enough information. But I believe it could be because Bootstrap puts automatic padding on .row
For this you can put
<div class="row g-0">
</div>
Bootstrap 5 - No gutters
Or if it is in another element, simply add the px-0 class that removes the padding from the widths.
I have 3 columns all in a row, each with a nested row and 3 more columns.
.row
.col
.row
.col
.col <-- needs to be full height
.col
.row
.col
.col <-- needs to be full height
.col
.row
.col
.col <-- needs to be full height
As you can see, the middle column is not stretching the full height
I tried align-items-stretch and h-100 but no luck.
Any help is much appreciated! Thanks!
Full code here
<div class="container bg-secondary pt-5">
<div class="row">
<div class="col mx-5 px-5">
<div class="row">
<div class="col-12">
<img src="/imgs/1.jpg" alt="" />
</div>
<div class="col-12 bg-light">
<p>Submitting an issue through Orem 311 is a great way to get the ball rolling.</p>
<p>Submitting an issue through Orem 311 is a great way to get the ball rolling.</p>
</div>
</div>
</div>
<div class="col mx-5 px-5">
<div class="row">
<div class="col-12">
<img src="/imgs/2.jpg" alt="" />
</div>
<div class="col-12 bg-light">
<p>Submitting an issue through Orem 311 is a great way to get the ball rolling.</p>
</div>
</div>
</div>
<div class="col mx-5 px-5">
<div class="row">
<div class="col-12">
<img src="/imgs/3.jpg" alt="" />
</div>
<div class="col-12 bg-light">
<p>Submitting an issue through Orem 311 is a great way to get the ball rolling.</p>
<p>Submitting an issue through Orem 311 is a great way to get the ball rolling.</p>
</div>
</div>
</div>
</div>
</div>
You can use Bootstrap's FlexBox Utilities for this.
Give the .row under .col.mx-5 these classes: row flex-row h-100.
Give the .col-12, which is supposed to be small, flex-shrink-1 class.
Give the .col-12, which is supposed to be longer, h-100 flex-grow-1 class.
Full Code:
<div class="col mx-5 px-5">
<div class="row flex-row h-100">
<div class="col-12 flex-shrink-1">
<img src="/imgs/2.jpg" alt="" />
</div>
<div class="col-12 bg-light flex-grow-1 h-100">
<p>Submitting an issue through Orem 311 is a great way to get the ball rolling.</p>
</div>
</div>
</div>
I have checked it and it works.
I've made bootstrap cards that appear on two different pages. One on the landing page which I want to increase the spacing and one on the books page which I want to increase the width of the cards. Here's the code that I've written and used in both pages. The only thing that I've changed is on the 6th line from '...col-lg-3' to '...col-lg-2'. If anyone can assist me in adding the spacing and increasing the with of the card, help me if you can. d-flex justify-content-evenly doesn't work when i use col-lg-3.
<section id="about" class="ts-block" >
<div id="cards_landscape_wrap-2">
<div class="container " style="width:70%">
<div class="row d-flex justify-content-around">
#foreach($products as $product)
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
<a href="{{route("products.show",$product->slug)}}">
<div class="card-flyer ">
<div class="text-box">
<div class="image-box">
<img src="{{asset($product->image)}}" alt="{{$product->title}}" class="img-fluid rounded mx-auto d-block" width="100%"/>
</div>
<div class="card-footer">
<i class="text-muted"><strike>Ksh.{{$product->old_price}}</strike></i>
<span class="text-primary font-weight-bold">Ksh.{{$product->price}}</span><br>
<span class="mybuttonoverlap btn btn-primary">View</span>
</div>
</div>
</div>
</a>
</div>
#endforeach
</div>
</div>
</div>
</section>
Try including d-flex justify-content-around to a direct parent containing the cards instead of
<div class="row d-flex justify-content-around">. And add margin to the card.
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 d-flex justify-content-around">
<a href="{{route("products.show",$product->slug)}}">
<div class="card-flyer m-2">
<div class="text-box">
<div class="image-box">
<img src="{{asset($product->image)}}" alt="{{$product->title}}" class="img-fluid rounded mx-auto d-block" width="100%"/>
</div>
<div class="card-footer">
<i class="text-muted"><strike>Ksh.{{$product->old_price}}</strike></i>
<span class="text-primary font-weight-bold">Ksh.{{$product->price}}</span><br>
<span class="mybuttonoverlap btn btn-primary">View</span>
</div>
</div>
</div>
</a>
</div
I'm using bootstrap version 4.1, on portrait screens it works correctly, but when I leave it on smaller devices and landscape orientation the content gets "bigger" than the screen and on top of everything, what can I do to fix this?
<style>html, body { height: 100%; }</style>
<main class="h-100">
<div class="container d-flex flex-column justify-content-center h-100">
<div>
<img src="/img/icons/over18.svg" alt="OVER 18 YEARS OLD" class="img-fluid OYOI mx-auto d-block">
</div>
<div class="mt-3">
<h1 class="text-center ml-4">WOW !!!</h1>
<h1 class="text-center"><span class="font-weight-bold">{{ person.name }}</span>, you are <span class="font-weight-bold">{{ person.age }} years old!</span></h1>
</div>
<div class="mt-4">
<h3 class="font-weight-light text-center text-white">You are now responsible for yourself, Welcome adult life!</h3>
</div>
<div class="mt-4">
<button type="button" class="btn btn-lg bg-dark text-white mx-auto d-block w-100">BACK</button>
</div>
</div>
</main>
I want to have a image at left and at right some information. This information div at right have a orange border around. And I want that this information area occupies the same height of the image. So i created a div .details with display flex and align-items stretch. But its not working, the image and the information area dont occupy the same width. Do you know why?
example: https://jsfiddle.net/wjvwovy2/
html:
<div class="container py-4">
<div class="row">
<div class="details">
<div class="col-8 px-0" style="background-color: red">
<img style="width: 100%" src="http://via.placeholder.com/700x350"/>
</div>
<div class="col-4 px-0">
<div class="details-title d-flex flex-column align-items-start">
<span class="font-size-sm font-weight-semi-bold">Date</span>
<h1 class="h5 font-weight-bold">Title</h1>
<span class="details-title-subtitle font-size-sm font-weight-bold">Subtitle</span>
Subtitle2
</div>
</div>
</div>
</div>
</div>
This is because you have applied the visual styles in a descendant which is not a direct child of the .details element. There are several ways to fix this, depending on what you are trying to achieve.
A quick one is to apply d-flex class in <div class="col-4 px-0"> and flex-grow: 1 in <div class="details-title d-flex flex-column align-items-start">.
https://jsfiddle.net/todorito/32ukpemr/1/
In your fiddle it's just the closing bracket of details-title in the CSS which is missing:
https://jsfiddle.net/468p5rj7/2/