I want to align this <i> to the right side in my <div>. This is my html code:
<div class="container-fluid p-1 bg-primary text-white d-flex align-items-center justify-content-center">
<h2>Heading</h2>
<span class="badge rounded-pill bg-success ms-3">Welcome</span>
<i class="fas fa-question-circle" style="float: right;"></i>
</div>
The above code is not working. What can I do to fix this?
Change HTML This Way
<link href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid p-1 bg-primary text-white d-flex align-items-center justify-content-between">
<div class="justify-content-center d-flex flex-fill align-items-center">
<h2>Heading</h2>
<div>
<span class="badge rounded-pill bg-success">Welcome</span>
</div>
</div>
<div>
<i class="fas fa-question-circle"></i>
</div>
</div>
Related
I have code in my bootstrap 5 website like this
<div class="row mt-3">
<div class="col-md-6 mt-3 mt-md-0">
<a href="post/good-morning-status-shayari-68346" class="h-100"><img src="https://via.placeholder.com/500x500/" class="img-fluid blog-img lzy_img" alt="Good Morning Status Shayari" width="100%" height="100%">
</a>
</div>
<div class="col-md-6 mt-3 mt-md-0">
<div class="bg-dark text-white blog_content d-flex flex-column bg-black h-100 text-center pt-3 pb-3 px-3 mx-3">
<h5>સપનાઓ ચા જેવા કડક હોવા </h5>
<div class="d-flex flex-grow-1 justify-content-center align-items-center mb-0">
<div class="">
<p class="">સપનાઓ ચા જેવા<br> કડક હોવા જોઈએ સાહેબ,<br> જે રાતની ઊંઘ છીનવી લે !!<br> 💐🌷🌹શુભ સવાર🌹🌷💐</p>
</div>
</div>
<div class="time d-flex justify-content-between align-items-center align-items-end mt-auto border-top pt-3">
<div class="left text-start">
<h6 class="mb-0"><a class="link-bold" href="https://stag.example.com/gu/category/gujarati-good-morning-status-shayari">શુભ સવાર સ્ટેટસ શાયરી</a></h6>
<p class="mb-0"><small>6 days ago</small></p>
</div>
<div class="right">
</div>
</div>
</div>
</div>
</div>
Its working fine and output like this in desktop:
But in Mobile doesn't have equal height and it's looking like:
Basically I want same height column as image in mobile device too but its not working. I am using bootstrap 5.2.
I have added code in codeplay for text.
Let me know if someone here can help me for solve the puzzle.
This can easily be accomplished by using the aspect ratio helper classes. Just apply .ratio.ratio-1x1 to the inner wrapper within the .col-md-6s.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<div class="row mt-3">
<div class="col-md-6 mt-3 mt-md-0">
<a href="post/good-morning-status-shayari-68346" class="h-100 ratio ratio-1x1"><img src="https://via.placeholder.com/500x500/" class="img-fluid blog-img lzy_img" alt="Good Morning Status Shayari" width="100%" height="100%">
</a>
</div>
<div class="col-md-6 mt-3 mt-md-0">
<div class="bg-dark text-white blog_content d-flex flex-column bg-black h-100 text-center pt-3 pb-3 px-3 mx-3 ratio ratio-1x1">
<h5>સપનાઓ ચા જેવા કડક હોવા </h5>
<div class="d-flex flex-grow-1 justify-content-center align-items-center mb-0">
<div class="">
<p class="">સપનાઓ ચા જેવા<br> કડક હોવા જોઈએ સાહેબ,<br> જે રાતની ઊંઘ છીનવી લે !!<br> 💐🌷🌹શુભ સવાર🌹🌷💐</p>
</div>
</div>
<div class="time d-flex justify-content-between align-items-center align-items-end mt-auto border-top pt-3">
<div class="left text-start">
<h6 class="mb-0"><a class="link-bold" href="https://stag.example.com/gu/category/gujarati-good-morning-status-shayari">શુભ સવાર સ્ટેટસ શાયરી</a></h6>
<p class="mb-0"><small>6 days ago</small></p>
</div>
<div class="right">
</div>
</div>
</div>
</div>
</div>
.col-md-6 img {height: 100%;}
.col-md-6 { text-align: center; height:500px; }
I'm trying to use bootstrap 5 class d-flex align-content-around flex-wrap to draw a number of cards in this shape
Unfortunately, it is not working and the cards stay in this shape
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
<div class="containr d-flex align-content-around flex-wrap" id="containe">
<div class="row" id="${id}" style="direction:rtl;">
<div class="card itemHolder shadow-lg p-3 mb-5 bg-white rounded">
<div class="card-body" style="width:650px;">
<div class="mb-1">
<div class="d-inline-flex align-items-center">
<span class="ProductName">${name}</span><br><br>
<span style="font-family: boto; font-size:15px; position: absolute; right:13px;">السعر:</span>
<span class="ProductPrice">${price}</span>
<i class="fa-solid fa-tags iconproduct"></i>
</div>
</div>
</div>
<button type="button" class="btn btn-success" style="font-family:hana; font-size:15px;">شراء</button>
</div>
</div>
<div class="row" id="${id}" style="direction:rtl;">
<div class="card itemHolder shadow-lg p-3 mb-5 bg-white rounded">
<div class="card-body" style="width:650px;">
<div class="mb-1">
<div class="d-inline-flex align-items-center">
<span class="ProductName">${name}</span><br><br>
<span style="font-family: boto; font-size:15px; position: absolute; right:13px;">السعر:</span>
<span class="ProductPrice">${price}</span>
<i class="fa-solid fa-tags iconproduct"></i>
</div>
</div>
</div>
<button type="button" class="btn btn-success" style="font-family:hana; font-size:15px;">شراء</button>
</div>
</div>
</div>
I'm trying to get a circle behind a logo using CSS but struggling as it keeps taking up the whole width of the container.
https://jsfiddle.net/leelawtondesign/hfqk6a0g/5/#&togetherjs=HAg4AK4vSo
This is how it looks...
This is how it is meant to look...
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="container">
<div class="row">
<div class="col-12 col-md-3 my-auto order-2 order-md-1">
<div class="pt-5 pt-md-3 d-flex justify-content-center">
<div class=""></div>
<button type="button" class="btn btn-social-icon btn-facebook btn-rounded mx-2"><i class="fa fa-facebook"></i></button>
<button type="button" class="btn btn-social-icon btn-twitter btn-rounded mx-2"><i class="fa fa-twitter"></i></button>
<button type="button" class="btn btn-social-icon btn-instagram btn-rounded mx-2"><i class="fa fa-instagram"></i></button>
</div>
</div>
<div class="col-12 col-md-6 order-1 order-md-2 logo d-flex position-relative">
<img class="pt-3 pt-md-5 pb-4 pb-md-5 m-auto align-content-center" src="img/safety_first_logo.png">
</div>
<div class="pt-3 pt-md-0 col-12 col-md-3 text-right my-auto order-3 d-flex justify-content-center justify-content-md-end">
<i class="fas fa-phone px-2"></i> 07460162247
</div>
</div>
</div>
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 3 years ago.
Improve this question
I have been working on this interface for few days using bootstrap4 and I cant get this one div to get a scrollbar without setting height in px's. Also a guide toward managing one page design?
Following is the link to the HTML code.
https://www.codeply.com/p/xm4bUOWFVh
To make an element within a flexbox state scrollable you can make a new container within the flexbox element and set to position: absolute;
Hopefully this helps. See my example below.
#chat-list {
position: relative;
overflow-y: scroll;
height: 100%;
}
.chat-scroll {
position: absolute;
top: 0;
left: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<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">
</head>
<body>
<div class="container border bg-success w-100" style="height: 95vh;">
<div class="row h-100">
<div class="col-md-12">
<h3>My Whatsapp</h3>
</div>
<div class="col-12 col-sm-5 col-md-4 d-flex flex-column border " id="chat-list-area" style="position:relative; ">
<!-- Navbar -->
<div class="row d-flex flex-row align-items-center p-2 bg-warning " id="navbar">
<div class="text-white font-weight-bold">My Chats</div>
<div class="nav-item dropdown ml-auto">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false"><i class="fas fa-ellipsis-v text-white"></i></a>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">New Group</a>
<a class="dropdown-item" href="#">Archived</a>
<a class="dropdown-item" href="#">Starred</a>
<a class="dropdown-item" href="#">Settings</a>
<a class="dropdown-item" href="#">Log Out</a>
</div>
</div>
</div>
<!-- Chat List -->
<div class="row" id="chat-list">
<!-- new container -->
<div class="chat-scroll">
<!-- new container -->
<div class="col-xs-12 w-100 bg-light">
<div class="chat-list-item d-flex flex-row w-100 p-2 border-bottom active" style="">
<div class="w-50">
<div class="name">Programmers</div>
<div class="small last-message">+91 98232 37261: yeah, i'm online</div>
</div>
<div class="flex-grow-1 text-right">
<div class="small time">28/03/2018</div>
<div class="badge badge-success badge-pill small d-none" id="unread-count">2</div>
</div>
</div>
<div class="chat-list-item d-flex flex-row w-100 p-2 border-bottom">
<div class="w-50">
<div class="name">Dee</div>
<div class="small last-message"><i class="fas fa-check-circle mr-1"></i> if you go to the movie, then give me a call</div>
</div>
<div class="flex-grow-1 text-right">
<div class="small time">27/03/2018</div>
</div>
</div>
<div class="chat-list-item d-flex flex-row w-100 p-2 border-bottom unread" onclick="">
<div class="w-50">
<div class="name">Jimmy</div>
<div class="small last-message"> have you seen infinity war?</div>
</div>
<div class="flex-grow-1 text-right">
<div class="small time">27/03/2018</div>
<div class="badge badge-success badge-pill small" id="unread-count">1</div>
</div>
</div>
<div class="chat-list-item d-flex flex-row w-100 p-2 border-bottom" onclick="">
<div class="w-50">
<div class="name">John</div>
<div class="small last-message"><i class="far fa-check-circle mr-1"></i> yup</div>
</div>
<div class="flex-grow-1 text-right">
<div class="small time">27/03/2018</div>
</div>
</div>
<div class="chat-list-item d-flex flex-row w-100 p-2 border-bottom" onclick=" ">
<div class="w-50">
<div class="name">Rob Mobile</div>
<div class="small last-message"><i class="far fa-check-circle mr-1"></i> i'm good too</div>
</div>
<div class="flex-grow-1 text-right">
<div class="small time">26/03/2018</div>
</div>
</div>
<div class="chat-list-item d-flex flex-row w-100 p-2 border-bottom" onclick=" ">
<div class="w-50">
<div class="name">Rob Mobile</div>
<div class="small last-message"><i class="far fa-check-circle mr-1"></i> i'm good too</div>
</div>
<div class="flex-grow-1 text-right">
<div class="small time">26/03/2018</div>
</div>
</div>
<div class="chat-list-item d-flex flex-row w-100 p-2 border-bottom" onclick=" ">
<div class="w-50">
<div class="name">Rob Mobile</div>
<div class="small last-message"><i class="far fa-check-circle mr-1"></i> i'm good too</div>
</div>
<div class="flex-grow-1 text-right">
<div class="small time">26/03/2018</div>
</div>
</div>
<div class="chat-list-item d-flex flex-row w-100 p-2 border-bottom" onclick=" ">
<div class="w-50">
<div class="name">Rob Mobile</div>
<div class="small last-message"><i class="far fa-check-circle mr-1"></i> i'm good too</div>
</div>
<div class="flex-grow-1 text-right">
<div class="small time">26/03/2018</div>
</div>
</div>
<div class="chat-list-item d-flex flex-row w-100 p-2 border-bottom" onclick=" ">
<div class="w-50">
<div class="name">Rob Mobile</div>
<div class="small last-message"><i class="far fa-check-circle mr-1"></i> i'm good too</div>
</div>
<div class="flex-grow-1 text-right">
<div class="small time">26/03/2018</div>
</div>
</div>
<div class="chat-list-item d-flex flex-row w-100 p-2 border-bottom" onclick=" ">
<div class="w-50">
<div class="name">Rob Mobile</div>
<div class="small last-message"><i class="far fa-check-circle mr-1"></i> i'm good too</div>
</div>
<div class="flex-grow-1 text-right">
<div class="small time">26/03/2018</div>
</div>
</div>
<div class="chat-list-item d-flex flex-row w-100 p-2 border-bottom" onclick=" ">
<div class="w-50">
<div class="name">Rob Mobile</div>
<div class="small last-message"><i class="far fa-check-circle mr-1"></i> i'm good too</div>
</div>
<div class="flex-grow-1 text-right">
<div class="small time">26/03/2018</div>
</div>
</div>
<div class="chat-list-item d-flex flex-row w-100 p-2 border-bottom" onclick=" ">
<div class="w-50">
<div class="name">Rob Mobile</div>
<div class="small last-message"><i class="far fa-check-circle mr-1"></i> i'm good too</div>
</div>
<div class="flex-grow-1 text-right">
<div class="small time">26/03/2018</div>
</div>
</div>
<div class="chat-list-item d-flex flex-row w-100 p-2 border-bottom" onclick=" ">
<div class="w-50">
<div class="name">Rob Mobile</div>
<div class="small last-message"><i class="far fa-check-circle mr-1"></i> i'm good too</div>
</div>
<div class="flex-grow-1 text-right">
<div class="small time">26/03/2018</div>
</div>
</div>
<div class="chat-list-item d-flex flex-row w-100 p-2 border-bottom" onclick=" ">
<div class="w-50">
<div class="name">Rob Mobile</div>
<div class="small last-message"><i class="far fa-check-circle mr-1"></i> i'm good too</div>
</div>
<div class="flex-grow-1 text-right">
<div class="small time">26/03/2018</div>
</div>
</div>
<div class="chat-list-item d-flex flex-row w-100 p-2 border-bottom" onclick=" ">
<div class="w-50">
<div class="name">Rob Mobile</div>
<div class="small last-message"><i class="far fa-check-circle mr-1"></i> i'm good too</div>
</div>
<div class="flex-grow-1 text-right">
<div class="small time">26/03/2018</div>
</div>
</div>
<div class="chat-list-item d-flex flex-row w-100 p-2 border-bottom" onclick=" ">
<div class="w-50">
<div class="name">Rob Mobile</div>
<div class="small last-message"><i class="far fa-check-circle mr-1"></i> i'm good too</div>
</div>
<div class="flex-grow-1 text-right">
<div class="small time">26/03/2018</div>
</div>
</div>
</div>
</div>
</div>
<!-- Profile Settings -->
</div>
<!-- Message Area -->
<div class="d-none d-sm-flex flex-column col-12 col-sm-7 col-md-8 p-0 " style="height: 95%;" id="message-area">
<!-- Navbar -->
<div class="row d-flex flex-row align-items-center p-2 m-0 w-100 border bg-primary" id="navbar">
<div class="d-block d-sm-none">
<i class="fas fa-arrow-left p-2 mr-2 text-white" style="font-size: 1.5rem; cursor: pointer;"></i>
</div>
<div class="d-flex flex-column">
<div class="text-white font-weight-bold" id="name">Programmers</div>
<div class="text-white small" id="details">You, Jimmy, Rob Mobile</div>
</div>
<div class="d-flex flex-row align-items-center ml-auto">
<i class="fas fa-search mx-3 text-white d-none d-md-block"></i>
<i class="fas fa-paperclip mx-3 text-white d-none d-md-block"></i>
<i class="fas fa-ellipsis-v mr-2 mx-sm-3 text-white"></i>
</div>
</div>
<!-- Messages -->
<div class="d-flex flex-column" id="messages" style="flex: 1!important;background: hsl(0, 0%, 80%);overflow: auto;">
<div class="mx-auto my-2 bg-primary text-white small py-1 px-2 rounded">
27/03/2018
</div>
<div class="align-self-start p-1 my-1 mx-3 rounded bg-white shadow-sm message-item">
<div class="options">
<i class="fas fa-angle-down text-muted px-2"></i>
</div>
<div class="small font-weight-bold text-primary">
+91 98232 63547
</div>
<div class="d-flex flex-row">
<div class="body m-1 mr-2">anyone online?</div>
<div class="time ml-auto small text-right flex-shrink-0 align-self-end text-muted" style="width:75px;">
18:20
</div>
</div>
</div>
<div class="mx-auto my-2 bg-primary text-white small py-1 px-2 rounded">
28/03/2018
</div>
<div class="align-self-start p-1 my-1 mx-3 rounded bg-white shadow-sm message-item">
<div class="options">
<i class="fas fa-angle-down text-muted px-2"></i>
</div>
<div class="small font-weight-bold text-primary">
+91 98232 37261
</div>
<div class="d-flex flex-row">
<div class="body m-1 mr-2">yeah, i'm online</div>
<div class="time ml-auto small text-right flex-shrink-0 align-self-end text-muted" style="width:75px;">
17:10
</div>
</div>
</div>
</div>
<!-- Input -->
<div class="justify-self-end align-items-center flex-row d-flex" id="input-area">
<i class="far fa-smile text-muted px-3" style="font-size:1.5rem;"></i>
<input type="text" name="message" id="input" placeholder="Type a message" class="flex-grow-1 border-0 px-3 py-2 my-3 rounded shadow-sm">
<i class="fas fa-paper-plane text-muted px-3" style="cursor:pointer;" onclick="sendMessage()"></i>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
I have a flex box container in which the children are displayed in a flex-row. Im trying to use bootstrap and make all the children the same width and height.
HTML
<div class="d-flex flex-row flex-grow">
<div class="background-orange d-flex flex-column flex-fill align-items-center p-4 py-4 ican-subPromos">
<i class="fal fa-book-heart fa-2x color-white"></i>
<div>
<p class="p-0 m-0 color-white pt-3">
Procedures</p>
</div>
</div>
<div class="background-green d-flex flex-column flex-fill align-items-center p-4 py-4 ican-subPromos">
<i class="fal fa-file-invoice-dollar fa-2x color-white"></i>
<div>
<p class="p-0 m-0 color-white pt-3" style="text-align: center;">
Quick Reference Guides </p>
</div>
</div>
<div class="background-blue d-flex flex-column flex-fill align-items-center p-4 py-4 ican-subPromos">
<i class="fal fa-file-invoice fa-2x color-white"></i>
<div class="text-center">
<p class="p-0 m-0 color-white pt-3">
<a href="http://helpdesk:8080/Templates.do?module=mergedRequest&serviceId=3002">Standardized
Forms</a></p>
</div>
</div>
<div class="background-grey d-flex flex-column flex-fill align-items-center p-4 py-4 ican-subPromos">
<i class="fal fa-file-user fa-2x color-white"></i>
<div>
<p class="p-0 m-0 color-white pt-3">
Member Forms </p>
</div>
</div>
<div class="background-orange d-flex flex-column flex-fill align-items-center p-4 py-4 ican-subPromos">
<i class="fal fa-link fa-2x color-white"></i>
<div class="text-center">
<p class="p-0 m-0 color-white pt-3">
Canvas Links </p>
</div>
</div>
<div class="background-green d-flex flex-column flex-fill align-items-center p-4 py-4 ican-subPromos">
<i class="fal fa-file-invoice-dollar fa-2x color-white"></i>
<div>
<p class="p-0 m-0 color-white pt-3" style="text-align: center;">
<a href="/compass/RatesFees/Forms/Rates%20and%20Fees.aspx">Deposit and Loan
Rates</a> </p>
</div>
</div>
<div class="background-blue d-flex flex-column flex-fill align-items-center p-4 py-4 ican-subPromos">
<i class="fal fa-book fa-2x color-white"></i>
<div>
<p class="p-0 m-0 color-white pt-3"> Policies</p>
</div>
</div>
<div class="background-grey d-flex flex-column flex-fill align-items-center p-4 py-4 ican-subPromos">
<i class="fal fa-file-download fa-2x color-white"></i>
<div>
<p class="p-0 m-0 color-white pt-3">More</p>
</div>
</div>
Here is an image of what it currently looks like. You can see that the deposit and loan rates box is wider then the more box:
Add for all children, this:
flex: 1 1 0;