I am trying to truncate text in div.inbox-item-message using text-overflow:ellipsis, but whenever the truncation happens, it breaks the layout.
On running the example below, you can see that the second item's text gets truncated and the layout gets messed up.
How to solve this?
.inbox {
border: 1px solid black;
background-color: black;
color: white;
}
.inbox-item-display-picture {
padding: 0;
}
.inbox-item-display-picture img {
width: 100%
}
.inbox-item {
transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
cursor: pointer;
padding: 2%;
border-bottom: 0.5px solid gray;
}
.inbox-item:hover {
background: lightblue;
color: black;
}
.inbox-item-timestamp {
text-align: right;
font-size: 75%;
}
.inbox-item-message {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.inbox-header {
padding: 3%;
border-bottom: 1px solid white;
}
.inbox-header-actions {
text-align: right;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css"
integrity="sha256-NuCn4IvuZXdBaFKJOAcsU2Q3ZpwbdFisd5dux4jkQ5w=" crossorigin="anonymous" />
<link href="./style.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid">
<div class="chat-container">
<div class="row">
<div class="col inbox">
<div class="row inbox-header">
<div class="col inbox-header-title">
<span class="h5"> <span class="fa fa-comments"></span>
Conversations</span>
</div>
<div class="col-3 inbox-header-actions">
<span class="fa fa-filter"></span>
</div>
</div>
<div class="row inbox-item">
<div class="col-2 inbox-item-display-picture align-self-center">
<img src="https://cdn3.iconfinder.com/data/icons/business-round-flat-vol-1-1/36/user_account_profile_avatar_person_student_male-512.png">
</div>
<div class="col">
<div class="row">
<div class="col inbox-item-title">
<span>Chat #10</span>
</div>
<div class="col-4 inbox-item-timestamp">
8:48 AM
</div>
</div>
<div class="row">
<div class="col inbox-item-message">
<span class="inbox-item-sender">Person 1:</span> Hello, how are you?
</div>
<div class="col-2 inbox-item-unreadcount">
<span class="badge badge-pill badge-secondary">2</span>
</div>
</div>
</div>
</div>
<div class="row inbox-item">
<div class="col-2 inbox-item-display-picture align-self-center">
<img src="https://cdn3.iconfinder.com/data/icons/business-round-flat-vol-1-1/36/user_account_profile_avatar_person_employee_male-2-512.png">
</div>
<div class="col">
<div class="row">
<div class="col inbox-item-title">
<span>Chat #11</span>
</div>
<div class="col-4 inbox-item-timestamp">
8:50 AM
</div>
</div>
<div class="row">
<div class="col inbox-item-message">
<span class="inbox-item-sender">Person 2:</span> Some really long message here lorem
ipsum
</div>
<div class="col-2 inbox-item-unreadcount">
<span class="badge badge-pill badge-secondary">1</span>
</div>
</div>
</div>
</div>
<div class="row inbox-item">
<div class="col-2 inbox-item-display-picture align-self-center">
<img src="https://cdn3.iconfinder.com/data/icons/business-round-flat-vol-1-1/36/user_account_profile_avatar_person_student_male-512.png">
</div>
<div class="col">
<div class="row">
<div class="col inbox-item-title">
<span>Chat #12</span>
</div>
<div class="col-4 inbox-item-timestamp">
yesterday
</div>
</div>
<div class="row">
<div class="col inbox-item-message">
<span class="inbox-item-sender">Person 3:</span> Short message
</div>
<div class="col-2 inbox-item-unreadcount">
<span class="badge badge-pill badge-secondary">3</span>
</div>
</div>
</div>
</div>
</div>
<div class="col" class="conversation">
</div>
</div>
</div>
</div>
</body>
</html>
Thanks
.inbox {
border: 1px solid black;
background-color: black;
color: white;
}
.inbox-item-display-picture {
padding: 0;
}
.inbox-item-display-picture img {
width: 100%
}
.inbox-item {
transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
cursor: pointer;
padding: 2%;
border-bottom: 0.5px solid gray;
}
.inbox-item:hover {
background: lightblue;
color: black;
}
.inbox-item-timestamp {
text-align: right;
font-size: 75%;
}
.inbox-item-message {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.inbox-header {
padding: 3%;
border-bottom: 1px solid white;
}
.inbox-header-actions {
text-align: right;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css"
integrity="sha256-NuCn4IvuZXdBaFKJOAcsU2Q3ZpwbdFisd5dux4jkQ5w=" crossorigin="anonymous" />
<link href="./style.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid">
<div class="chat-container">
<div class="row">
<div class="col-12 inbox">
<div class="row inbox-header">
<div class="col-11 inbox-header-title">
<span class="h5"> <span class="fa fa-comments"></span>
Conversations</span>
</div>
<div class="col-1 inbox-header-actions">
<span class="fa fa-filter"></span>
</div>
</div>
<div class="row inbox-item">
<div class="col-2 inbox-item-display-picture align-self-center">
<img src="https://cdn3.iconfinder.com/data/icons/business-round-flat-vol-1-1/36/user_account_profile_avatar_person_student_male-512.png">
</div>
<div class="col-10">
<div class="row">
<div class="col-10 inbox-item-title">
<span>Chat #10</span>
</div>
<div class="col-2 inbox-item-timestamp">
8:48 AM
</div>
</div>
<div class="row">
<div class="col-11 inbox-item-message">
<span class="inbox-item-sender">Person 1:</span> Hello, how are you?
</div>
<div class="col-1 inbox-item-unreadcount">
<span class="badge badge-pill badge-secondary">2</span>
</div>
</div>
</div>
</div>
<div class="row inbox-item">
<div class="col-2 inbox-item-display-picture align-self-center">
<img src="https://cdn3.iconfinder.com/data/icons/business-round-flat-vol-1-1/36/user_account_profile_avatar_person_employee_male-2-512.png">
</div>
<div class="col-10">
<div class="row">
<div class="col-10 inbox-item-title">
<span>Chat #11</span>
</div>
<div class="col-2 inbox-item-timestamp">
8:50 AM
</div>
</div>
<div class="row">
<div class="col-11 inbox-item-message">
<span class="inbox-item-sender">Person 2:</span> Some really long message here lorem
ipsum
</div>
<div class="col-1 inbox-item-unreadcount">
<span class="badge badge-pill badge-secondary">1</span>
</div>
</div>
</div>
</div>
<div class="row inbox-item">
<div class="col-2 inbox-item-display-picture align-self-center">
<img src="https://cdn3.iconfinder.com/data/icons/business-round-flat-vol-1-1/36/user_account_profile_avatar_person_student_male-512.png">
</div>
<div class="col">
<div class="row">
<div class="col-10 inbox-item-title">
<span>Chat #12</span>
</div>
<div class="col-2 inbox-item-timestamp">
yesterday
</div>
</div>
<div class="row">
<div class="col-11 inbox-item-message">
<span class="inbox-item-sender">Person 3:</span> Short message
</div>
<div class="col-1 inbox-item-unreadcount">
<span class="badge badge-pill badge-secondary">3</span>
</div>
</div>
</div>
</div>
</div>
<!--TODO: <div class="col-12" class="conversation"></div>-->
</div>
</div>
</div>
</body>
</html>
Update: If you really must let the columns be able to automatically resize (not set the col-#), you could wrap the contents of the message body inside something like this and this will also give you your expected resulted:
Source: How to work with ellipsis in bootstrap responsive table
.inbox {
border: 1px solid black;
background-color: black;
color: white;
}
.inbox-item-display-picture {
padding: 0;
}
.inbox-item-display-picture img {
width: 100%
}
.inbox-item {
transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
cursor: pointer;
padding: 2%;
border-bottom: 0.5px solid gray;
}
.inbox-item:hover {
background: lightblue;
color: black;
}
.inbox-item-timestamp {
text-align: right;
font-size: 75%;
}
.inbox-item-message {
// overflow: hidden;
// white-space: nowrap;
// text-overflow: ellipsis;
// line-height:1;
}
.hackyWrapper {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
position: absolute;
width: 95%;
}
.hackyWrapper:before {
content: '';
display: inline-block;
}
.inbox-header {
padding: 3%;
border-bottom: 1px solid white;
}
.inbox-header-actions {
text-align: right;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" integrity="sha256-NuCn4IvuZXdBaFKJOAcsU2Q3ZpwbdFisd5dux4jkQ5w=" crossorigin="anonymous" />
<link href="./style.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid">
<div class="chat-container">
<div class="row">
<div class="col-12 inbox">
<div class="row inbox-header">
<div class="col inbox-header-title">
<span class="h5"> <span class="fa fa-comments"></span> Conversations
</span>
</div>
<div class="col-3 inbox-header-actions">
<span class="fa fa-filter"></span>
</div>
</div>
<div class="row inbox-item">
<div class="col-2 inbox-item-display-picture align-self-center">
<img src="https://cdn3.iconfinder.com/data/icons/business-round-flat-vol-1-1/36/user_account_profile_avatar_person_student_male-512.png">
</div>
<div class="col">
<div class="row">
<div class="col inbox-item-title">
<span>Chat #10</span>
</div>
<div class="col-4 inbox-item-timestamp">
8:48 AM
</div>
</div>
<div class="row">
<div class="col inbox-item-message">
<span class='hackyWrapper'>
<span class="inbox-item-sender">Person 1:</span> Hello, how are you?
</span>
</div>
<div class="col-2 inbox-item-unreadcount">
<span class="badge badge-pill badge-secondary">2</span>
</div>
</div>
</div>
</div>
<div class="row inbox-item">
<div class="col-2 inbox-item-display-picture align-self-center">
<img src="https://cdn3.iconfinder.com/data/icons/business-round-flat-vol-1-1/36/user_account_profile_avatar_person_employee_male-2-512.png">
</div>
<div class="col">
<div class="row">
<div class="col inbox-item-title">
<span>Chat #11</span>
</div>
<div class="col-4 inbox-item-timestamp">
8:50 AM
</div>
</div>
<div class="row">
<div class="col inbox-item-message">
<span class='hackyWrapper'>
<span class="inbox-item-sender">Person 2:</span> Some really long message here lorem Some really long message here lorem ipsum
</span>
</div>
<div class="col-2 inbox-item-unreadcount">
<span class="badge badge-pill badge-secondary">1</span>
</div>
</div>
</div>
</div>
<div class="row inbox-item">
<div class="col-2 inbox-item-display-picture align-self-center">
<img src="https://cdn3.iconfinder.com/data/icons/business-round-flat-vol-1-1/36/user_account_profile_avatar_person_student_male-512.png">
</div>
<div class="col">
<div class="row">
<div class="col inbox-item-title">
<span>Chat #12</span>
</div>
<div class="col-4 inbox-item-timestamp">
yesterday
</div>
</div>
<div class="row">
<div class="col inbox-item-message">
<span class='hackyWrapper'>
<span class="inbox-item-sender">Person 3:</span> Short message
</span>
</div>
<div class="col-2 inbox-item-unreadcount">
<span class="badge badge-pill badge-secondary">3</span>
</div>
</div>
</div>
</div>
</div>
<div class="col" class="conversation">
</div>
</div>
</div>
</div>
</body>
</html>
Hope this helps,
If you add col class you should always add the colspan. for instance you have a col-2 and a col class inside your .row.inbox-item. if you add all the classes on the same level up you should come to a total of 12. So if you have two divs like in your example you should add the 10 you have left after your first .col-2 div to the other div and change .col to .col-10.
The same goes for you other places where you are missing cols. Like "col inbox-item-title" should be "col-8 inbox-item-title" since there is already a col-4 on the same level.
I tried your code you should edit your col class after the col-2 class div to col-10 to make it work.
Like this:
<div class="row inbox-item">
<div class="col-2 inbox-item-display-picture align-self-center">
<img src="https://cdn3.iconfinder.com/data/icons/business-round-flat-vol-1-1/36/user_account_profile_avatar_person_student_male-512.png">
</div>
<div class="col-10">
<div class="row">
<div class="col-8 inbox-item-title">
<span>Chat #10</span>
</div>
<div class="col-4 inbox-item-timestamp">
8:48 AM
</div>
</div>
<div class="row">
<div class="col-10 inbox-item-message">
<span class="inbox-item-sender">Person 1:</span> Hello, how are you?
</div>
<div class="col-2 inbox-item-unreadcount">
<span class="badge badge-pill badge-secondary">2</span>
</div>
</div>
</div>
</div>
Related
This will look like an obvious question about making the page responsive, but I was not able to resolve the issue so far.
I did this page with Bootstrap 4 and HTML.
The issue I have is, that the page does not fit completely in the screen, but need to use the vertically scroll to see everything. But, using Chrome, when I put this to 75% zoom and also resize the browser window 2/3 of the full size (with the developer's tools I see that the page take a size of 1810 x 1189, in that case, everything looks good and the proportion of all the elements as well.
The final result I am waiting is: use the 100% of the browser zoom and the browser window to take all the screen (not reduced to make it smaller) and it should look equals that when I put the browser zoom to 75% and resize the browser window 2/3 making the page 1810 x 1189.
In other words, I need to make all the content be visible in the screen, keep the proporsion of the elements without using any vertical or horizontal scroll.
I tried also changing the viewport, with no success. I know I am doing a lot of things wrong, and the response will look obvious but I am very confused.
Here is the code
<!DOCTYPE html>
<html lang="en">
<head>
<title>Marketing Demo</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", { packages: ["corechart"] });
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['DR', 60],
['LI', 20],
['Events', 10],
['Other', 10]
]);
var options = {
legend: 'none',
pieSliceText: 'label',
backgroundColor: '#343a40',
colors: ['#2F5499', '#3965B8', '#708CCE', '#4A6BAD'],
is3D: true,
fontSize: '15',
chartArea: { width: 460, height: 260 }
};
var chart1 = new google.visualization.PieChart(document.getElementById('piechart_3d_1'));
var chart2 = new google.visualization.PieChart(document.getElementById('piechart_3d_2'));
var chart3 = new google.visualization.PieChart(document.getElementById('piechart_3d_3'));
chart1.draw(data, options);
chart2.draw(data, options);
chart3.draw(data, options);
}
</script>
</head>
<body>
<style>
body {
font-family: sans-serif;
}
.card-body {
padding: 0.01rem
}
.padding-header {
padding: 0.6rem
}
.bg-light-blue {
background-color: #4671C3;
}
.bg-lila {
background-color: #6F339F;
}
.bg-dark {
background-color: #424242;
}
.black-box-size {
max-width: 100%;
height: 325px;
}
.shape-round {
height: 150px;
width: 150px;
background-color: #6F339F;
border-radius: 50%;
display: inline-block;
text-align: center;
color: #fff;
padding: 3.5rem 1.5rem;
}
.block-container {
position: absolute;
top: 40%;
left: 50%;
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
width: 109px;
height: 38px;
}
.shadowBox {
text-decoration: none;
display: absolute;
display: block;
transition: 0.5s;
box-shadow: 6px 6px 6px rgba(0, 0, 0, 0.5);
}
.letterSpacing {
letter-spacing: 4px;
}
/*Viewport windows font size percentage*/
.vwFontSizeH1 {
font-size: 2.1vw;
}
.vwFontSizeH2 {
font-size: 1.65vw;
}
</style>
<div class="container-fluid" style="margin-top: 30px;">
<p></p><di></di>
<div class="card text-white bg-light-blue shadowBox">
<div class="card-body">
<div class="row">
<div class="col-md-3">
</div>
<div class="col-md-6">
<h1 class="text-center padding-header letterSpacing vwFontSizeH1">Marketing Performance Dashboard
</h1>
</div>
<div class="col-md-3"></div>
</div>
</div>
</div>
<p></p>
<div class="row">
<div class="col-md-4">
<div class="row">
<div class="col-md-11">
<h2
class="text-center padding-header bg-light-blue text-white letterSpacing shadowBox vwFontSizeH2">
Today</h2>
</div>
<div class="col-md-1"></div>
</div>
</div>
<div class="col-md-4">
<div class="row">
<div class="col-md-12">
<h2 class="text-center padding-header bg-light-blue text-white letterSpacing shadowBox vwFontSizeH2">This
Week</h2>
</div>
</div>
</div>
<div class="col-md-4">
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-11">
<h2 class="text-center padding-header bg-light-blue text-white letterSpacing shadowBox vwFontSizeH2">This
Month</h2>
</div>
</div>
</div>
</div>
<p></p>
<div class="row">
<div class="col-md-4">
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-3">
<span class="block-container">
<h2 class="text-center padding-header bg-light-blue text-white vwFontSizeH2">ENQ</h2>
</span>
</div>
<div class="col-md-3">
<span class="shape-round shadowBox">
<span class="text-center vwFontSizeH2">10/32</span>
</span>
<p></p>
</div>
<div class="col-md-5"></div>
</div>
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-3">
<span class="block-container">
<h2 class="text-center padding-header bg-light-blue text-white vwFontSizeH2">BOOK</h2>
</span>
</div>
<div class="col-md-3">
<span class="shape-round shadowBox">
<span class="text-center vwFontSizeH2">15/20</span>
</span>
<p></p>
</div>
<div class="col-md-5"></div>
</div>
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-3">
<span class="block-container">
<h2 class="text-center padding-header bg-light-blue text-white vwFontSizeH2">SAT</h2>
</span>
</div>
<div class="col-md-3">
<span class="shape-round shadowBox">
<h2 class="text-center vwFontSizeH2">09/17</h2>
</span>
<p></p>
</div>
<div class="col-md-5"></div>
</div>
</div>
<div class="col-md-4">
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-3">
</div>
<div class="col-md-3">
<span class="shape-round shadowBox">
<h2 class="text-center vwFontSizeH2">10/32</h2>
</span>
<p></p>
</div>
<div class="col-md-5"></div>
</div>
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-3">
</div>
<div class="col-md-3">
<span class="shape-round shadowBox">
<h2 class="text-center vwFontSizeH2">15/20</h2>
</span>
<p></p>
</div>
<div class="col-md-5"></div>
</div>
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-3">
</div>
<div class="col-md-3">
<span class="shape-round shadowBox">
<h2 class="text-center vwFontSizeH2">09/17</h2>
</span>
<p></p>
</div>
<div class="col-md-5"></div>
</div>
</div>
<div class="col-md-4">
<div class="row">
<div class="col-md-5">
</div>
<div class="col-md-3">
<span class="shape-round shadowBox">
<h2 class="text-center vwFontSizeH2">10/32</h2>
</span>
<p></p>
</div>
<div class="col-md-4"></div>
</div>
<div class="row">
<div class="col-md-5">
</div>
<div class="col-md-3">
<span class="shape-round shadowBox">
<h2 class="text-center vwFontSizeH2">15/20</h2>
</span>
<p></p>
</div>
<div class="col-md-4"></div>
</div>
<div class="row">
<div class="col-md-5"></div>
<div class="col-md-3">
<span class="shape-round shadowBox">
<h2 class="text-center vwFontSizeH2">09/17</h2>
</span>
<p></p>
</div>
<div class="col-md-4"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<h2 class="padding-header bg-light-blue text-white shadowBox letterSpacing vwFontSizeH2">Opportunity Breakdown (Sat)
</h2>
</div>
</div>
<p></p>
<div class="row">
<div class="col-md-4">
<div class="row">
<div class="col-md-11">
<div class="black-box-size bg-dark text-white shadowBox">
<h2 class="text-center padding-header letterSpacing vwFontSizeH2">Today</h2>
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-8">
<div id="piechart_3d_1" style="width: 460px; height: 260px;"></div>
</div>
<div class="col-md-3"></div>
</div>
</div>
</div>
<div class="col-md-1">
</div>
</div>
</div>
<div class="col-md-4">
<div class="black-box-size bg-dark text-white shadowBox">
<h2 class="text-center padding-header letterSpacing vwFontSizeH2">This Week</h2>
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-10">
<div id="piechart_3d_2" style="width: 510px; height: 260px;"></div>
</div>
<div class="col-md-1"></div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="row">
<div class="col-md-1">
</div>
<div class="col-md-11">
<div class="black-box-size bg-dark text-white shadowBox">
<h2 class="text-center padding-header letterSpacing vwFontSizeH2">This Month</h2>
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-8">
<div id="piechart_3d_3" style="width: 460px; height: 260px;"></div>
</div>
<div class="col-md-3"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<p></p>
<div class="card text-white bg-light-blue shadowBox">
<div class="card-body">
<div class="row">
<div class="col-md-3">
</div>
<div class="col-md-6">
<h2 class="text-center padding-header letterSpacing vwFontSizeH2" style="margin-top: 6px;">Revenue Generated this Month - £ 100,000,000
</h2>
</div>
<div class="col-md-3">
</div>
</div>
</div>
</div>
<p></p>
</div>
I want to create a grid system similar to this page using Bootstrap 4. I want to create a square box in a col-sm-4 and a longer rectangle next to it in a col-sm-8 of the same height. I'm having trouble creating a square box that is responsive. How can I do this?!
Current code:
<div class="container">
<div class="row section-box">
<div class="col-sm-4 text-center description-text">
first square box.
</div>
<div class="col-sm-8 description-image">
second rectangle box.
</div>
</div>
</div>
Things I've tried:
Using jQuery to set the height. This doesn't work with padding on the div, and isn't responsive.
This link where I managed to get a square box with a rectangle next to it, but as soon as text was added it was no longer a square.
You could use bootstrap 4 embed-responsive class and it's done
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<div class="container">
<div class="row m-5">
<div class="col-1">
<div class="embed-responsive embed-responsive-1by1 text-center">
<div class="embed-responsive-item bg-primary">col-1</div>
</div>
</div>
</div>
<div class="row m-5">
<div class="col-2">
<div class="embed-responsive embed-responsive-1by1 text-center">
<div class="embed-responsive-item bg-primary">col-2</div>
</div>
</div>
</div>
<div class="row m-5">
<div class="col-3">
<div class="embed-responsive embed-responsive-1by1 text-center">
<div class="embed-responsive-item bg-primary">col-3</div>
</div>
</div>
</div>
<div class="row m-5">
<div class="col-4">
<div class="embed-responsive embed-responsive-1by1 text-center">
<div class="embed-responsive-item bg-primary">col-4</div>
</div>
</div>
</div>
<div class="row m-5">
<div class="col-5">
<div class="embed-responsive embed-responsive-1by1 text-center">
<div class="embed-responsive-item bg-primary">col-5</div>
</div>
</div>
</div>
<div class="row m-5">
<div class="col-6">
<div class="embed-responsive embed-responsive-1by1 text-center">
<div class="embed-responsive-item bg-primary">col-6</div>
</div>
</div>
</div>
<div class="row m-5">
<div class="col-7">
<div class="embed-responsive embed-responsive-1by1 text-center">
<div class="embed-responsive-item bg-primary">col-7</div>
</div>
</div>
</div>
<div class="row m-5">
<div class="col-8">
<div class="embed-responsive embed-responsive-1by1 text-center">
<div class="embed-responsive-item bg-primary">col-8</div>
</div>
</div>
</div>
<div class="row m-5">
<div class="col-9">
<div class="embed-responsive embed-responsive-1by1 text-center">
<div class="embed-responsive-item bg-primary">col-9</div>
</div>
</div>
</div>
<div class="row m-5">
<div class="col-10">
<div class="embed-responsive embed-responsive-1by1 text-center">
<div class="embed-responsive-item bg-primary">col-10</div>
</div>
</div>
</div>
<div class="row m-5">
<div class="col-11">
<div class="embed-responsive embed-responsive-1by1 text-center">
<div class="embed-responsive-item bg-primary">col-11</div>
</div>
</div>
</div>
<div class="row m-5">
<div class="col-12">
<div class="embed-responsive embed-responsive-1by1 text-center">
<div class="embed-responsive-item bg-primary">col-12</div>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
eventually, a pseudo element could help :
.col-sm-4:before,
.col-sm-8:before {
content: '';
width: 0;
}
.col-sm-4:before,
.col-sm-8:before,
.ib {
white-space: normal;
display: inline-block;
vertical-align: middle;
max-width: 100%;
}
.col-sm-4:before {
padding-top: 100%;
/* makes expand to a square */
}
.col-sm-8:before {
padding-top: 50%;
/* makes a rectangle half the height of a square */
}
[class^="col"] {
white-space: nowrap;
box-sizing: border-box;
box-shadow: inset 0 0 0 5px white;
padding: 0;
text-align: center;
background: url(http://lorempixel.com/400/200) tomato;
background-size: cover;
}
.row {
color: white;
text-shadow: 0 0 black, 0 0 2px black;
}
.col-sm-4 {
background: gray;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row section-box">
<div class="col-sm-4 text-center description-text p-0">
first square box.
</div>
<div class="col-sm-8 description-image p-0">
second rectangle box.
</div>
</div>
<div class="row section-box">
<div class="col-sm-8 description-image p-0">
<div class="ib">second<br> rectangle box.</div>
</div>
<div class="col-sm-4 text-center description-text p-0">
first square box.
</div>
</div>
</div>
I'm trying to center the content, vertical and horizontal. I'm having some problems with the vertical part: Working Plunker
My custom css card:
.customCard {
width: 15rem;
height: 7rem;
background-color: blue;
color:#eee;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card-deck">
<div class="card-block ">
<div class="card customCard mt-2 customCursorPointer">
<div class="card-body">
<div class="container d-flex r h-100">
<div class="row justify-content-center mx-auto align-items-center">
<h4 class="card-title">AAAA</h4>
</div>
</div>
</div>
</div>
</div>
</div>
You need to add height:100% in .card-body
.customCard {
width: 15rem;
height: 7rem;
background-color: blue;
color:#eee;
}
.card-body {
height: 100%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card-deck">
<div class="card-block ">
<div class="card customCard mt-2 customCursorPointer">
<div class="card-body">
<div class="container d-flex r h-100">
<div class="row justify-content-center mx-auto align-items-center">
<h4 class="card-title">AAAA</h4>
</div>
</div>
</div>
</div>
</div>
</div>
i am new to ARIA tags. Kindly excuse if i am stupid.
What i want is a custom drop down to be visible when i click the down arrow.
The problem is the popup comes write below the icon as shown in this pic.
CSS
.vertical-align {
display: flex;
align-items: center;
justify-content: center;
flex-direction: row;
}
.bkcolor {
background-color: #009cf6;
width: 305px;
/*#008bdd*/
}
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div id="app">
<div id="container">
<div class="row" style="background:#009DF8;" id="namebardiv">
<div class="col-xs-10 col-md-5">
<div class="row">
<div class="col-xs-3 col-md-3">
</div>
<div class="col-xs-6 col-md-6">
<div class="row" style="color: white;font-size: 11px;">
</div>
</div>
<div class="col-xs-3 col-md-3">
</div>
</div>
<div class="row vertical-align">
<div class="col-xs-3 col-md-3">
<i class="icon-arrow-left21 pull-right" style="color:white;font-size:30px;"></i>
</div>
<div class="col-xs-7 col-md-7">
<div class="row vertical-align">
<div class="col-xs-7 col-md-7" style="color: white; font-size: 35px;display: inline-block;">
Benarsi Das
</div>
<div class="col-xs-1 col-md-1 dropdrown">
<div class="dropdown-toggle" style="color: white; font-size: 35px;display: inline-block;" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
</div>
<ul class="dropdown-menu bkcolor" aria-labelledby="dropdownMenu1" style="min-height: 165px;">
something
</ul>
</div>
<div class="col-xs-4 col-md-4">
<span style="color: white;font-size: 23px;padding-top: 10px;"></span>
</div>
</div>
</div>
<div class="col-xs-2 col-md-2">
</div>
</div>
</div>
<div class="col-xs-1 col-md-1"></div>
<div class="col-xs-10 col-md-5 vertical-align">
<div class="row">
</div>
</div>
<div class="col-xs-1 col-md-1"></div>
</div>
</body>
</html>
But I need it like this
I know I can achieve it with this code
.vertical-align {
display: flex;
align-items: center;
justify-content: center;
flex-direction: row;
}
.bkcolor {
background-color: #009cf6;
width: 305px;
/*#008bdd*/
}
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div id="app">
<div id="container">
<div class="row" style="background:#009DF8;" id="namebardiv">
<div class="col-xs-10 col-md-5">
<div class="row">
<div class="col-xs-3 col-md-3">
</div>
<div class="col-xs-6 col-md-6">
<div class="row" style="color: white;font-size: 11px;">
</div>
</div>
<div class="col-xs-3 col-md-3">
</div>
</div>
<div class="row vertical-align">
<div class="col-xs-3 col-md-3">
<i class="icon-arrow-left21 pull-right" style="color:white;font-size:30px;"></i>
</div>
<div class="col-xs-7 col-md-7">
<div class="row dropdown" id="dropdownrow">
<div class="dropdown-toggle" style="color: white; font-size: 35px; width:210px;display: inline-block;" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<div id="dropdownlabel" style="color: white; font-size: 35px;display: inline-block;width:180px;font-family:'Roboto-Regular',san-serif">
Benarsi Das
</div>
<span class="caret"></span>
</div>
<ul class="dropdown-menu bkcolor" aria-labelledby="dropdownMenu1" style="min-height: 165px;">
something
</ul>
</div>
</div>
<div class="col-xs-2 col-md-2">
</div>
</div>
</div>
<div class="col-xs-1 col-md-1"></div>
<div class="col-xs-10 col-md-5 vertical-align">
<div class="row">
</div>
</div>
<div class="col-xs-1 col-md-1"></div>
</div>
</body>
</html>
But this makes the dropdown(popup) visible even the text is clicked. I want it only to be visible only when the dropdown icon is clicked.
Any help would be greatly appreciated.
In your stylesheet, add the declaration
transform: translate(-60px, 26px);
to the style rules for .bkcolor.
N.B. You can alter the x-translate (-60px) and the y-translate (26px) to achieve the exact positioning that you want.
Working Example:
.vertical-align {
display: flex;
align-items: center;
justify-content: center;
flex-direction: row;
}
.bkcolor {
background-color: #009cf6;
width: 305px;
/*#008bdd*/
transform: translate(-60px, 26px);
}
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div id="app">
<div id="container">
<div class="row" style="background:#009DF8;" id="namebardiv">
<div class="col-xs-10 col-md-5">
<div class="row">
<div class="col-xs-3 col-md-3">
</div>
<div class="col-xs-6 col-md-6">
<div class="row" style="color: white;font-size: 11px;">
</div>
</div>
<div class="col-xs-3 col-md-3">
</div>
</div>
<div class="row vertical-align">
<div class="col-xs-3 col-md-3">
<i class="icon-arrow-left21 pull-right" style="color:white;font-size:30px;"></i>
</div>
<div class="col-xs-7 col-md-7">
<div class="row vertical-align">
<div class="col-xs-7 col-md-7" style="color: white; font-size: 35px;display: inline-block;">
Benarsi Das
</div>
<div class="col-xs-1 col-md-1 dropdrown">
<div class="dropdown-toggle" style="color: white; font-size: 35px;display: inline-block;" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
</div>
<ul class="dropdown-menu bkcolor" aria-labelledby="dropdownMenu1" style="min-height: 165px;">
something
</ul>
</div>
<div class="col-xs-4 col-md-4">
<span style="color: white;font-size: 23px;padding-top: 10px;"></span>
</div>
</div>
</div>
<div class="col-xs-2 col-md-2">
</div>
</div>
</div>
<div class="col-xs-1 col-md-1"></div>
<div class="col-xs-10 col-md-5 vertical-align">
<div class="row">
</div>
</div>
<div class="col-xs-1 col-md-1"></div>
</div>
</body>
</html>
i must realize this
goal
3 col with background and into col 2 div : one for png (il box - classi - open gym) one for text !
I've problem with responsive situation, when change resolution change all elements !!!
this is my code :
<div class="row full">
<div class="col-sm-4 box-home nopadding">
<img src="<?php the_field('immagine_il_box'); ?>" class="img-responsive img-box-home">
<div class="title" style="background-image: url('/crossfitpontedera/wp-content/uploads/2017/02/bottone-ilbox.png');"></div>
<div class="description" id="descr-one">
<h2><?php the_field('titolo_il_box'); ?></h2>
<p><?php the_field('descrizione_il_box'); ?></p>
</div>
</div>
<div class="col-sm-4 box-home" style="background-image: url('<?php the_field('immagine_classi'); ?>');">
<div class="title" style="background-image: url('/crossfitpontedera/wp-content/uploads/2017/02/bottone-classi.png');"></div>
<div class="description" id="descr-two">
<h2><?php the_field('titolo_classi'); ?></h2>
<p><?php the_field('descrizione_classi'); ?></p>
</div>
</div>
<div class="col-sm-4 box-home" style="background-image: url('<?php the_field('immagine_open_gym'); ?>');">
<div class="title" style="background-image: url('/crossfitpontedera/wp-content/uploads/2017/02/bottone-opengym.png');"></div>
<div class="description" id="descr-three">
<h2><?php the_field('titolo_open_gym'); ?></h2>
<p><?php the_field('descrizione_open_gym'); ?></p>
</div>
</div>
</div>
ok, there are various classes for h1 and p etc, but the problem is this
problem
As you want to have responsiveness for all screen size and you want to achieve same layout for all screen size, you have to use class="col-xs-4".
When you are using class="col-sm-4" you lose the responsiveness below 768px.
That is why you are experiencing such a problem.
Here is an example see how it works for all screen sizes
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body >
<div class="row">
<div class="col-xs-4" style="background-color: white; color: black">
<h2>some text</h2>
<p>some text</p>
</div>
<div class="col-xs-4" style="background-color: green; color: blue;">
<h2>some text</h2>
<p>some text</p>
</div>
<div class="col-xs-4" style="background-color: yellow; color: red;">
<h2>some text</h2>
<p>some text</p>
</div>
</div>
</body>
</html>
Your desired layout should look like this
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body >
<div class="container-fluid">
<div class="row">
<div class="col-xs-4" style="background-image: url('https://www.w3schools.com/css/trolltunga.jpg'); height: 400px;">
<div class="row">
<div class="col-xs-4 col-xs-offset-1" style="background-color: white; color: black; height: 100px; ">
</div>
</div>
<div class="row">
<div class="col-xs-12" style=" height: 100px;">
</div>
</div>
<div class="row">
<div class="col-xs-10 col-xs-offset-1" style="background-color: green; color: blue; height: 200px;">
</div>
</div>
</div>
<div class="col-xs-4" style="background-image: url('https://www.w3schools.com/css/trolltunga.jpg'); height: 400px;">
<div class="row">
<div class="col-xs-4 col-xs-offset-1" style="background-color: white; color: black; height: 100px; ">
</div>
</div>
<div class="row">
<div class="col-xs-12" style=" height: 100px;">
</div>
</div>
<div class="row">
<div class="col-xs-10 col-xs-offset-1" style="background-color: green; color: blue; height: 200px;">
</div>
</div>
</div>
<div class="col-xs-4 " style="background-image: url('https://www.w3schools.com/css/trolltunga.jpg'); height: 400px;">
<div class="row">
<div class="col-xs-4 col-xs-offset-1" style="background-color: white; color: black; height: 100px; ">
</div>
</div>
<div class="row">
<div class="col-xs-12" style=" height: 100px;">
</div>
</div>
<div class="row">
<div class="col-xs-10 col-xs-offset-1" style="background-color: green; color: blue; height: 200px;">
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Note
This is a good place to start learning about bootstrap
Hope this helps!