I have two columns in a row: one column holding an album image, and the other column holding some text describing the album. Above the medium breakpoint, the columns and the content within them are aligned perfectly. But when the screen is sized below the medium breakpoint, the column holding the album image expands to the right.
Here is the code:
<div class="card mb-3">
<div class="card-header py-3">
<div class="row">
<div class="col-2 d-none d-md-block column image-col">
<img src="images/NirvanaNevermindalbumcover.jpg" class="rounded review-img" />
</div>
<div class="col-10 column text-col">
<div class="d-flex justify-content-between album-header">
<h5 class="card-title">Nirvana - Nevermind</h5>
<p>Avg. Rating: <span class="rating">8.6</span></p>
</div>
<div class="d-flex justify-content-between user-header">
<p class="text-muted">Reviewed by <a class="username" href="#">PunkyBruiser</a> on May 14, 2022</p>
<p class="text-muted">User Review: <span class="added-rating">8</span></p>
</div>
</div>
</div>
</div>
I've tried to use pe-sm-1 and other similar size measurements from Bootstrap5 on the <div class="col-2 ..."> but nothing has changed.
I've even tried putting a d-flex justify-content-start on the row but that didn't change anything either.
Related
My images wont stay on the same row once i put the <p> in, they both sit in there own row, not sure what im doing wrong here
<div class="container">
<div class="row">
<div class="image-fluid text-center">
<img class="bruno" src="resourcesnew/css/Img/bruno.jpg">
<p class="h6">Bruno</p>
<img class="anth" src="resourcesnew/css/Img/anth.jpg">
<p class="h6">Anthony</p>
</div>
</div>
</div>
I think whatever CSS you used in class="row" is not acting the way you expect, because that div has a single child.
I don't know what's in your css file, but the following HTML works as I expect you want:
<div class="container">
<div class="image-fluid text-center" style="display:flex">
<div>
<img class="bruno" src="resourcesnew/css/Img/bruno.jpg">
<p class="h6">Bruno</p>
</div>
<div>
<img class="anth" src="resourcesnew/css/Img/anth.jpg">
<p class="h6">Anthony</p>
</div>
</div>
</div>
Each image/text pair gets its own div, and what used to be your row div now has multiple children.
I'm not sure how to properly word this question, hence the sketchy title.
I'm using Bootstrap 5.2.3, two-column grid to display three cards. There is one card in the first column and two cards, one per row, in the second column.
Code
<div class="container-fluid ">
<!-- Content starts here-->
<div class="row mt-3 mb-3">
<div class="col-md-2 mb-3">
<div class="card shadow h-100 mb-3">
<div class="card-header">
<h6 class="m-0 font-weight-bold text-primary">Students</h6>
</div>
<div class="card-body">
Box C
</div>
</div>
</div>
<div class="col-md-10 mb-3">
<div class="card shadow h-100 mb-3 ">
<div class="card-header">
<h6 class="m-0 font-weight-bold text-primary">Tests</h6>
</div>
<div class="card-body">
content box a
</div>
</div>
<div class="card shadow h-100 mb-3">
<div class="card-header">
<h6 class="m-0 font-weight-bold text-primary">Questions</h6>
</div>
<div class="card-body">
content box b
</div>
</div>
</div>
</div>
</div>
<!-- /.container-fluid -->
</div>
https://jsfiddle.net/nbrvqmat/
I've used the h-100 successfully in other parts of my project when there is one on the left and one on the right.
In this scenario, the bottom of the left card, Students, is only extends to the bottom of the first card, Tests. It should be the bottom of the last card, Questions.
When I inspect the Row element, it does not contain the Questions card. The height ends at the bottom of the Students and Tests cards.
If I remove the h-100 from both cards, they are contained within the row.
How can I get bottom of the Student card to match the bottom of the Questions card?
In col-md-10 you set the first card as 100% height of its column, which causes the second card to overflow out of col-md-10 because there is no more vertical space left to allocate.
Try setting overflow:hidden on col-md-10 and you will see it be cut off.
Therefore row will only grow in height that of the first card in col-md-10. Understanding that, you should realize the only thing you need to do is making the Students card a 100% height of its parent; col-md-2 which' own height is determined by the height of row.
In the example below (or see JSFiddle) I set a min-height on .card to give the cards some height for demonstration purposes, but in the end the Students card will always grow/shrink to the combined height of its two neighboring cards, except of course when they wrap at the smaller screen size.
.card {
min-height: 10rem;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
<div class="container-fluid ">
<div class="row mt-3">
<div class="col-md-2 mb-3">
<div class="card shadow h-100">
<div class="card-header">
<h6 class="m-0 font-weight-bold text-primary">Students</h6>
</div>
<div class="card-body">
Box C
</div>
</div>
</div>
<div class="col-md-10 mb-3">
<div class="card shadow mb-3">
<div class="card-header">
<h6 class="m-0 font-weight-bold text-primary">Tests</h6>
</div>
<div class="card-body">
content box a
</div>
</div>
<div class="card shadow">
<div class="card-header">
<h6 class="m-0 font-weight-bold text-primary">Questions</h6>
</div>
<div class="card-body">
content box b
</div>
</div>
</div>
</div>
</div>
I make card wrap by container
here is my code
i make new section next to this section.. but next section is below this section..
what makes next section is below previous section, btw i am using bootstrap 5
<div class="container-fluid room">
<h2 class="room-section-title text-center"> Our Rooms</h2>
<div class="container d-flex justify-content-evenly align-items-center flex-md-column flex-lg-row flex-column ">
<div class="card mx-3">
<img src="/assets/images/room/Deluxe.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Superior Room</h5>
<p class="card-text">
Some quick example text to build on the card title and make up the bulk of the card's content.
</p>
<div class="btn">
<a class="text-primary text-decoration-none" href="#">Room detail</a>
</div>
</div>
</div>
<div class="card mx-3">
<img src="/assets/images/room/Deluxe.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Deluxe Room</h5>
<p class="card-text">
Some quick example text to build on the card title and make up the bulk of the card's content.
</p>
<div class="btn">
<a class="text-primary text-decoration-none" href="#">Room detail</a>
</div>
</div>
</div>
<div class="card mx-3">
<img src="/assets/images/room/Deluxe.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Suite Room</h5>
<p class="card-text">
Some quick example text to build on the card title and make up the bulk of the card's content.
</p>
<div class="btn">
<a class="text-primary text-decoration-none" href="#">Room detail</a>
</div>
</div>
</div>
</div>
</div>
You have to provide the whole file. Then only we can answer it.
I have tried with both order-xs-1 and order-xs-first, but none is working and i don't know why. I want on mobile the image to be first and the paragraph second.
<div class="container"> <div class="row bg-white g-0"> <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 col-xl-6 col-xxl-6 pt-5 ps-5 "> <h2 class="fs-1 fw-light">Make It The Best</h2> <h4 class="fs-3 my-3 fw-bold">Unseen experience. Join Us !</h4> <p>A wonderful serenity has taken.</p> <button type="button" class="button px-4 py-3 me-3 mt-2 fs-5">Learn More</button> </div> <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 col-xl-6 col-xxl-6 "> <img src="/images/section3/drink.jpg" class="img-fluid" alt=""> </div> </div> </div>
There are a lot of things wrong with your code. I would go back and have a proper read of the way bootstrap handles breakpoints. If you have specified col-md-6 you don't need all the other col-SZ-6, as breakpoints work from a resolution UP.
As for your exact problem, it is easily fixed by putting the column first in the HTML and then letting bootstrap move it at the iPad breakpoint with order-md-last:
<div class="container">
<div class="row bg-white g-0">
<div class="col-12 col-md-6 order-md-last mb-3">
<img src="/images/section3/drink.jpg" class="img-fluid" alt="">
</div>
<div class="col-12 col-md-6">
<h1 class="h2 fs-1 fw-light">Make It The Best</h2>
<h2 class="h4 fs-3 my-3 fw-bold">Unseen experience. Join Us !</h4>
<p>A wonderful serenity has taken.</p>
<button type="button" class="button px-4 py-3 me-3 mt-2 fs-5">Learn More</button>
</div>
</div>
</div>
You should also not use H tags to style headings, either apply a H class like I have or use CSS to change the size of your headings. Heading tags should also go in order H1->H2 etc...
Ex. Code below is represented as Blue Box, I want to expand 2 grid to Yellow one. But, the problem is; This .. need to be inside content but it always have margin left and right. I don't know how to solve this.
<div data-role="content" data-theme="d" >
<div class="ui-grid-a" >
<div class="ui-block-a"><strong>Time:</strong></div>
<div class="ui-block-b" id="price-order-timestamp">yyyy-mm-dd hh24:mi:ss</div>
</div>
<div style="width:100%;"> <!-- Here-->
<div class="ui-grid-d" id="data-table-header" >
<div class="ui-block-a">Label A</div>
<div class="ui-block-b">Label B</div>
<div class="ui-block-c">Label C</div>
<div class="ui-block-d">Label D</div>
<div class="ui-block-e">Label E</div>
</div>
<div class="ui-grid-d" id="data-table" >
<div class="ui-block-a">A</div>
<div class="ui-block-b">B</div>
<div class="ui-block-c">C</div>
<div class="ui-block-d">D</div>
<div class="ui-block-e">E</div>
</div>
</div>
</div>
If you want to remove the default padding added to the data-role=content tag, add the following override in your custom.css
#myPageId .ui-content{
padding-left:0;
padding​-right:0;
}​
http://jsfiddle.net/nirmaljpatel/LW5aC/