I'm using the flexbox classes inside a column ( d-flex align-items-center justify-content-left ) to control the placement of the texts ( h1 and p ), but using flexbox to conflict with the content line break. paragraph tag. How do I get the content of the paragraph below the content of the h1 tag? Below is the code:
<div class="col d-flex align-items-center justify-content-left">
<h1>App Name</h1>
<p>Content em desenvolvimento</p>
</div>
If you want to align items, one per row, change h1 and p display property to block so it gets rendered in one line, do it by adding d-block class to each element:
<div class="col d-flex align-items-center justify-content-left">
<h1 class="d-block">App Name</h1>
<p class="d-block">Content em desenvolvimento</p>
</div>
You need to add .flex-wrap then add .w-100 to elements that should take the whole width.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col d-flex flex-wrap">
<h1 class="w-100 text-center">App Name</h1>
<p class="w-100">Content em desenvolvimento</p>
<p class="p-1">flex<br>paragraph</p>
<p class="p-1">flex<br>paragraph</p>
<p class="p-1">flex<br>paragraph</p>
<p class="p-1">flex<br>paragraph</p>
</div>
</div>
</div>
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'm working on a web app with Bootstrap. In the mobile version it looks the way I want: the header on the top, below is a girl image, and below is the description of the application.
In desktop version I want to have header on top left, right under that description, and a girl image at the right side. Unfortunately, the girl image makes a big gap between the header and the description.
How can I get rid of that gap?
To recap, I want to move the description upper, to have it just under header, in that way.
Part of html, responsible for it:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<div class="container mt-lg-4">
<div class="row">
<p class="col-sm-6 mt-lg-5 mt-sm-1 h1"><strong>Find perfect product for your skin</strong></p>
<img src="https://via.placeholder.com/200" class="col-sm-6" />
<div id="description" class="col-sm-6">
PrimerAI will examine your skin and find the perfect product for your skin's needs.
</div>
</div>
</div>
You have two competing layouts here, involving not just ordering but containing structure. The simplest solution might be to repeat the image and show it as needed.
Also, use semantic elements in your page structure, like headings and paragraphs, to wrap text. It's important for accessibility and it's just good practice. The strong element is intended to add emphasis, but headings already have it so I've used CSS to get bold text.
.text-bold {
font-weight: bold;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<div class="container mt-lg-4">
<div class="row">
<div class="col-sm-6">
<h1 class="mt-lg-5 mt-sm-1 text-bold">Find perfect product for your skin</h1>
<img src="https://via.placeholder.com/500x600" class="img-fluid d-sm-none" />
<p id="description">
PrimerAI will examine your skin and find the perfect product for your skin's needs.
</p>
</div>
<div class="col-sm-6">
<img src="https://via.placeholder.com/500x600" class="img-fluid d-none d-sm-block" />
</div>
</div>
</div>
you can try that, I just add d-flex align-items-center to center verticaly the title with the image
<div class="container bg-success">
<div class="row">
<div class="col-md-6 d-flex align-items-center">
<h1>Find perfect product for your skin</h1>
</div>
<div class="col-md-6">
<img src="https://picsum.photos/id/1082/1000/1000?blur=8" class="img-fluid" />
</div>
<div>
PrimerAI will examine your skin and find the perfect product for your skin's needs.
</div>
</div>
</div>
I'm using Bootstrap 5 and I'm trying to put an image next to a text, but when I insert "col-lg-6" on both cols, one column is going on the next row.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="row bg-white">
<div class="col-6">
<img src="https://via.placeholder.com/100" class="img-fluid" alt="">
</div>
<div class="col-6 mt-5 ms-5">
<h2 class="fs-1 fw-light">Why Choose Us?</h2>
<h4 class="fs-3 my-3 fw-bold">We are trusted by many costumers</h4>
</div>
</div>
<div class="row bg-white">
<div class="col-sm-12 col-md-6 col-lg-6 col-xl-6 col-xxl-6">
<img src="/images/section3/wheel.jpg" class="img-fluid" alt="">
</div>
<div class="col-sm-12 col-md-6 col-lg-6 col-xl-6 col-xxl-6 mt-5">
<h2 class="fs-1 fw-light">Why Choose Us?</h2>
<h4 class="fs-3 my-3 fw-bold">We are trusted by many costumers</h4>
</div>
</div>
please remove ms-5 class from your text because it leaves the space from left side (margin-left: 3rem!important;).
By adding margin to a column you make it wider that the space left for it by the other half-width column. Use padding instead.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="row bg-white">
<div class="col-6">
<img src="https://via.placeholder.com/100" class="img-fluid" alt="">
</div>
<div class="col-6 pt-5 ps-5">
<h2 class="fs-1 fw-light">Why Choose Us?</h2>
<h4 class="fs-3 my-3 fw-bold">We are trusted by many costumers</h4>
</div>
</div>
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/