Boostrap flexbox same width children - 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">Stan​dardized
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;

Related

Equal Height Column Working Only On Desktop

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 am developing an android mobile app using WebView. My site uses bootstrap 5 and I'm in the process of converting it to a mobile app

My site is responsive on all media by displaying it in a browser. When I load it in the android webview the display is distorted. I found that there are class bootstrap 5 which work badly. Its classes are position classes.
such as: .position-relative, .position-static and .position-absolute.
The css of its class does not work with the android webview.
Does anyone have an idea for the webview to take positional css into account.
Exemple css :
.position-static
position: static !important;
.position-relative
position: relative !important;
.position-absolute
position: absolute !important;
Example HTML:
<div class="row g-0 border rounded overflow-hidden flex-md-row mb-2 shadow-sm h-md-250 position-relative">
<div class="col-auto d-lg-block">
<a href="/ad-categories/21" hreflang="zxx"><img loading="lazy" src="/sites/default/files/styles/thumbnail/public/2022-10/sauce%20pistache.jpg ?itok=RcWqSOZN" width="100" height="100" alt="" typeof="foaf:Image" class="img-fluid image-style-thumbnail">
</a>
<div class="label-top shadow-sm">
<i class="fa fa-star" aria-hidden="true"></i>
</div>
</div>
<div class="col d-flex flex-column position-static small">
<div class="d-flex bd-highlight">
<div class="flex-fill bd-highlight">
<h5 class="card-title small "><span class="field field--name-title field--type-string field--label-hidden">MAÏTE DEHYDRATED SAUCES</span>
</h5>
</div>
</div>
<div class="d-flex bd-highlight departure-date">
<div class="flex-fill bd-highlight text-muted small">
<p class="card-text address"><i class="fa fa-map-o text-info"></i> Abidjan,CI</p>
</div>
<div class="flex-fill bd-highlight small">
<span class="badge rounded-pill bg-success border border-light text-light fw-bold">
Premium
<span class="visually-hidden">New alerts</span>
</span>
</div>
</div>
<div class="d-flex bd-highlight">
<div class="flex-fill bd-highlight text-muted small">
<div class="field field--name-field-categories field--type-entity-reference field--label-hidden field__item"><div class="contextual-region term-categories-icon d-flex justify-content -start" about="/taxonomy/term/4">
<div class="field field--name-field-icon field--type-fontawesome-icon field--label-hidden field__item"><div class="fontawesome-icons">
<div class="fontawesome-icon">
<i class="fas fa-beer food-drink" data-fa-transform="" data-fa-mask="" style="--fa-primary-color: #000000; --fa-secondary-color : #000000; food-drink"></i>
</div>
</div>
</div>
<a class="link" href="/ad-categories?categories_id=4">
<div class="field field--name-name field--type-string field--label-hidden field__item">Food & drink</div>
</a>
</div></div>
</div>
<div class="flex-fill bd-highlight text-muted small">
<span class="align-middle"><i class="fa fa-map-marker"></i> Abidjan</span>
</div>
</div>
</div>
</div>

Fill row content with an image keeping the size

My problem is in containing the images within a bootstrap row. When I add the image this is not contained adapting to the size of the row but for some reason it follows its size by activating the scroll.
I would like the image to fit into the container without causing scrolling when resizing the image.
This is the correct behavior when not adding any elements in the row:
<div class="container-fluid">
<div class="row justify-content-center min-vh-100 pt-3 ps-3 pb-3">
<div class="col" style="background-color: rgba(0,0,0,.03);">
<div class="d-flex flex-column h-100">
<div class="row flex-grow-1 h-50 slot border border-3 rounded" slot="1">
<div class="container-fluid d-flex " style="background-color: rgba(0,0,0,.03);">
<div class="align-self-center mx-auto">
<button type="button" class="btn btn-xs btn-icon btn-round btn-light new-stream-btn" slot="1">
<i class="fa fa-plus text-dark"></i>
</button>
</div>
</div>
</div>
<div class="row flex-grow-1 h-50 slot border border-3 rounded" slot="1">
<div class="container-fluid d-flex " style="background-color: rgba(0,0,0,.03);">
<div class="align-self-center mx-auto">
<button type="button" class="btn btn-xs btn-icon btn-round btn-light new-stream-btn" slot="1">
<i class="fa fa-plus text-dark"></i>
</button>
</div>
</div>
</div>
</div>
</div>
<div class="col" style="background-color: rgba(0,0,0,.03);">
<div class="d-flex flex-column h-100">
<div class="row flex-grow-1 h-50 slot border border-3 rounded" slot="1">
<div class="container-fluid d-flex " style="background-color: rgba(0,0,0,.03);">
<div class="align-self-center mx-auto">
<button type="button" class="btn btn-xs btn-icon btn-round btn-light new-stream-btn" slot="1">
<i class="fa fa-plus text-dark"></i>
</button>
</div>
</div>
</div>
<div class="row flex-grow-1 h-50 slot border border-3 rounded" slot="1">
<div class="container-fluid d-flex " style="background-color: rgba(0,0,0,.03);">
<div class="align-self-center mx-auto">
<button type="button" class="btn btn-xs btn-icon btn-round btn-light new-stream-btn" slot="1">
<i class="fa fa-plus text-dark"></i>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
While this is the behavior when I add an image:
<div class="container-fluid">
<div class="row justify-content-center min-vh-100 pt-3 ps-3 pb-3">
<div class="col" style="background-color: rgba(0,0,0,.03);">
<div class="d-flex flex-column h-100">
<div class="row flex-grow-1 h-50 slot border border-3 rounded " slot="1">
<img class="img-responsive w-100 h-100 px-0 rounded" src="https://www.logo.wine/a/logo/Stack_Overflow/Stack_Overflow-Logo.wine.svg">
</div>
<div class="row flex-grow-1 h-50 slot border border-3 rounded " slot="1">
<img class="img-responsive w-100 h-100 px-0 rounded" src="https://www.logo.wine/a/logo/Stack_Overflow/Stack_Overflow-Logo.wine.svg">
</div>
</div>
</div>
<div class="col" style="background-color: rgba(0,0,0,.03);">
<div class="d-flex flex-column h-100">
<div class="row flex-grow-1 h-50 slot border border-3 rounded" slot="1">
<div class="container-fluid d-flex " style="background-color: rgba(0,0,0,.03);">
<div class="align-self-center mx-auto">
<button type="button" class="btn btn-xs btn-icon btn-round btn-light new-stream-btn" slot="1">
<i class="fa fa-plus text-dark"></i>
</button>
</div>
</div>
</div>
<div class="row flex-grow-1 h-50 slot border border-3 rounded" slot="1">
<div class="container-fluid d-flex " style="background-color: rgba(0,0,0,.03);">
<div class="align-self-center mx-auto">
<button type="button" class="btn btn-xs btn-icon btn-round btn-light new-stream-btn" slot="1">
<i class="fa fa-plus text-dark"></i>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

You can use a trick sizing image to an height of 0 and a min-height of 100%
style="height:0;min-height:100%;" or via a custom class (better practice)
idea:
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row justify-content-center min-vh-100 mh-100 pt-3 ps-3 pb-3">
<div class="col" style="background-color: rgba(0,0,0,.03);">
<div class="d-flex flex-column h-100 ">
<div class="row flex-grow-1 h-50 slot border border-3 rounded " slot="1">
<img class="img-responsive px-0 rounded" style="height:0;min-height:100%;" src="https://www.logo.wine/a/logo/Stack_Overflow/Stack_Overflow-Logo.wine.svg">
</div>
<div class="row flex-grow-1 h-50 slot border border-3 rounded " slot="1">
<img class="img-responsive px-0 rounded" style="height:0;min-height:100%;" src="https://www.logo.wine/a/logo/Stack_Overflow/Stack_Overflow-Logo.wine.svg">
</div>
</div>
</div>
<div class="col" style="background-color: rgba(0,0,0,.03);">
<div class="d-flex flex-column h-100">
<div class="row flex-grow-1 h-50 slot border border-3 rounded" slot="1">
<div class="container-fluid d-flex " style="background-color: rgba(0,0,0,.03);">
<div class="align-self-center mx-auto">
<button type="button" class="btn btn-xs btn-icon btn-round btn-light new-stream-btn" slot="1">
<i class="fa fa-plus text-dark"></i>
</button>
</div>
</div>
</div>
<div class="row flex-grow-1 h-50 slot border border-3 rounded" slot="1">
<div class="container-fluid d-flex " style="background-color: rgba(0,0,0,.03);">
<div class="align-self-center mx-auto">
<button type="button" class="btn btn-xs btn-icon btn-round btn-light new-stream-btn" slot="1">
<i class="fa fa-plus text-dark"></i>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Another possibility is also to set a max-height on the conatiners
other possible example:
.max-vh-100{max-height:calc(100vh - 2em);}/* takes into account : pt-3 p-s3 pb-3 that could be turned into p-3 */
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row justify-content-center min-vh-100 p-3">
<div class="col" style="background-color: rgba(0,0,0,.03);">
<div class="d-flex flex-column h-100 max-vh-100">
<div class="row flex-grow-1 h-50 slot border border-3 rounded " slot="1">
<img class="img-responsive w-100 h-100 px-0 rounded" src="https://www.logo.wine/a/logo/Stack_Overflow/Stack_Overflow-Logo.wine.svg">
</div>
<div class="row flex-grow-1 h-50 slot border border-3 rounded " slot="1">
<img class="img-responsive w-100 h-100 px-0 rounded" src="https://www.logo.wine/a/logo/Stack_Overflow/Stack_Overflow-Logo.wine.svg">
</div>
</div>
</div>
<div class="col" style="background-color: rgba(0,0,0,.03);">
<div class="d-flex flex-column h-100 max-vh-100">
<div class="row flex-grow-1 h-50 slot border border-3 rounded" slot="1">
<div class="container-fluid d-flex " style="background-color: rgba(0,0,0,.03);">
<div class="align-self-center mx-auto">
<button type="button" class="btn btn-xs btn-icon btn-round btn-light new-stream-btn" slot="1">
<i class="fa fa-plus text-dark"></i>
</button>
</div>
</div>
</div>
<div class="row flex-grow-1 h-50 slot border border-3 rounded" slot="1">
<div class="container-fluid d-flex " style="background-color: rgba(0,0,0,.03);">
<div class="align-self-center mx-auto">
<button type="button" class="btn btn-xs btn-icon btn-round btn-light new-stream-btn" slot="1">
<i class="fa fa-plus text-dark"></i>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
.max-vh-100{max-height:calc(100vh - 2em);}takes into account : pt-3 ps-3 pb-3 that could be turned into p-3

Float <i> to the right of <div> in html

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>

How do I fix this overflow problem without setting any height? [closed]

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>