I have a component where a Bootstrap 4 auto-expand column is wrapping to another row. The presence of an element with the "text-truncate" class and long text is causing Chrome to vertically stack the column element under the row where it belongs.
In the snippet below, the <div> with ID, problem-div will wrap and consume the whole line if the child <span> element has Boostrap 4 class text-truncate applied and the element contains lengthy text. Remove the text-truncate class and the problem-div element will consume the unused portion of the first row in its container.
As it stands now, I can get the truncation feature for the child content - or I can get the parent column to fill the unused part of the first row of its parent, but not both. How do I get both at the same time?
img {
width: 16px;
height: 16px;
}
label {
margin: 0;
font-weight: 600;
}
.form-text {
margin: 0;
}
#problem-div {
background-color: #e0FFFF;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<body class="container-fluid">
...
<!-- lots of stuff -->
<div class="card">
<div class="card-header bg-warning">
<div class="row">
<div class="col-auto text-nowrap">
<img src=".../icon.png" />
<h6 class="pl-1 mt-1 font-weight-bold float-right">Label</h6>
</div>
<div class="col row small">
<div class="form-group col-3">
<label>ID</label>
<span class="form-text">1234567</span>
</div>
<div class="form-group col-3">
<label>Name</label>
<span class="form-text">My Name</span>
</div>
<div class="form-group col-3">
<label>Type</label>
<span class="form-text">Category-A</span>
</div>
<div class="form-group col-3">
<label>Code</label>
<span class="form-text">ABCDEFG</span>
</div>
</div>
</div>
</div>
<div class="card-body">
<div class="row">
<div class="col-auto text-nowrap invisible"> <img src=".../icon.png" />
<h6 class="pl-1 mt-1 font-weight-bold float-right">Label</h6>
</div>
<div class="col small">
<!-- Problem Div, breaks the auto-fill feature of its parent when "text-truncate" class is applied. -->
<div id="problem-div" class="text-truncate">
<label>Display Field Label</label>
<span class="form-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>
</div>
</div>
</div>
</div>
</div>
...
<!-- more stuff -->
</body>
When a flex item contains child elements with text that should be truncated, layout can be broken.
My first solution is add min-width: 0 to problem-div's parent (take a look at css trick article: https://css-tricks.com/flexbox-truncated-text/):
img {
width: 16px;
height: 16px;
}
label {
margin: 0;
font-weight: 600;
}
.form-text {
margin: 0;
}
#problem-div {
background-color: #e0FFFF;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<body class="container-fluid">
...
<!-- lots of stuff -->
<div class="card">
<div class="card-header bg-warning">
<div class="row">
<div class="col-auto text-nowrap">
<img src=".../icon.png" />
<h6 class="pl-1 mt-1 font-weight-bold float-right">Label</h6>
</div>
<div class="col row small">
<div class="form-group col-3">
<label>ID</label>
<span class="form-text">1234567</span>
</div>
<div class="form-group col-3">
<label>Name</label>
<span class="form-text">My Name</span>
</div>
<div class="form-group col-3">
<label>Type</label>
<span class="form-text">Category-A</span>
</div>
<div class="form-group col-3">
<label>Code</label>
<span class="form-text">ABCDEFG</span>
</div>
</div>
</div>
</div>
<div class="card-body">
<div class="row">
<div class="col-auto text-nowrap invisible"> <img src=".../icon.png" />
<h6 class="pl-1 mt-1 font-weight-bold float-right">Label</h6>
</div>
<div class="col small" style="min-width: 0">
<!-- Problem Div, breaks the auto-fill feature of its parent when "text-truncate" class is applied. -->
<div id="problem-div" class="text-truncate">
<label>Display Field Label</label>
<span class="form-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>
</div>
</div>
</div>
</div>
</div>
...
<!-- more stuff -->
</body>
Another solution is add overflow: hidden to problem-div's parent:
img {
width: 16px;
height: 16px;
}
label {
margin: 0;
font-weight: 600;
}
.form-text {
margin: 0;
}
#problem-div {
background-color: #e0FFFF;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<body class="container-fluid">
...
<!-- lots of stuff -->
<div class="card">
<div class="card-header bg-warning">
<div class="row">
<div class="col-auto text-nowrap">
<img src=".../icon.png" />
<h6 class="pl-1 mt-1 font-weight-bold float-right">Label</h6>
</div>
<div class="col row small">
<div class="form-group col-3">
<label>ID</label>
<span class="form-text">1234567</span>
</div>
<div class="form-group col-3">
<label>Name</label>
<span class="form-text">My Name</span>
</div>
<div class="form-group col-3">
<label>Type</label>
<span class="form-text">Category-A</span>
</div>
<div class="form-group col-3">
<label>Code</label>
<span class="form-text">ABCDEFG</span>
</div>
</div>
</div>
</div>
<div class="card-body">
<div class="row">
<div class="col-auto text-nowrap invisible"> <img src=".../icon.png" />
<h6 class="pl-1 mt-1 font-weight-bold float-right">Label</h6>
</div>
<!-- New CSS style -->
<div class="col small" style="overflow: hidden;">
<!-- Problem Div, breaks the auto-fill feature of its parent when "text-truncate" class is applied. -->
<div id="problem-div" class="text-truncate">
<label>Display Field Label</label>
<span class="form-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>
</div>
</div>
</div>
</div>
</div>
...
<!-- more stuff -->
</body>
Hope this help.
Related
I am using bootstrap 4 and I want the paragraph text to display across the width of the box. How can I make it spread over most of it?
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
<div class="row">
<div class="col-md-2">
</div>
<div class="col-md-8">
<div class="alert alert-info">
<div class="row">
<p class="col-xs-12">
<div class="col-xs-2 col-md-2 col-sm-2 col-lg-2"> <i class="fas fa-hand-paper fa-3x" ></i>
</div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
<H2>
Message
</H2>
<h3>
title here
</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
</div>
Your message is displaying over the majority of the element's container. Your paragraph text, I assume to be the col-xs-6 class div element under the h3 (as this is the only paragraph element with text in it) is displaying 100% of its container.
If you want it to fit the entirety of the alert you need to make the container <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6"> fit the entire row by changing the numbers 6 to 10:
<div class="col-xs-10 col-sm-10 col-md-10 col-lg-10">
This is because bootstrap runs off a 12 grid system. You had 4 unused grid spaces.
Read more here: https://getbootstrap.com/docs/4.0/layout/grid/
It should also be noted that col-xs is no longer supported in Bootstrap 4. The extra small size is now just col-number.
I've used Bootstrap's card deck but i can't seem to make it align vertically.
One of the cards has shorter text and creates a mismatch, not sure how to fix it..
I should also mention that i want a 3 card display in that page on desktop and on mobile it stacks up vertically so that why i needed the extra margin in my css file.
<div class="container mw-100 h-100">
<div class="row h-100 align-items-center">
<div class="col-12 col-md-6 col-lg-4 col-xl-4">
<div class="card">
<img class="card-img-top" src="img1.jpg" alt="img1" />
<div class="card-body">
<h5 class="card-title">Title 1</h5>
<p class="card-text">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero voluptas, vero voluptatibus odio nostrum facilis aut! Dolores, non accusamus. Sapiente et minus sint numquam. Labore laborum ut a commodi doloremque.
</p>
<p class="card-text">
<button type="button" class="btn btn-dark btn-lg" onclick="startGame()">Start</button>
</p>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-4 col-xl-4">
<div class="card">
<img class="card-img-top" src="img2.jpg" alt="img2" />
<div class="card-body">
<h5 class="card-title">Title 2<span class="badge badge-secondary">New</span></h5>
<p class="card-text">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero voluptas, vero voluptatibus odio nostrum facilis aut! Dolores, non accusamus. Sapiente et minus sint numquam. Labore laborum ut a commodi doloremque.
</p>
<p class="card-text">
<button type="button" class="btn btn-dark btn-lg">Start</button>
</p>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-4 col-xl-4">
<div class="card">
<img class="card-img-top" src="img3.jpg" alt="img3" />
<div class="card-body">
<h5 class="card-title">Title 3<span class="badge badge-secondary">New</span></h5>
<p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero voluptas, vero voluptatibus odio nostrum facilis aut! Dolores, non accusamus. Sapiente et minus sint numquam. Labore laborum ut a commodi doloremque.</p>
<p class="card-text">
<button type="button" class="btn btn-dark btn-lg">Start</button>
</p>
</div>
</div>
</div>
</div>
</div>
As for other css there is only height that is needed to align the container itself and some margins along with the regular browser reset props.
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
html,
body {
height: 100%;
}
.card {
margin-bottom: 0.75rem;
}
.row :first-child > .card {
margin-top: 0.75rem;
}
This is because you have your items aligned to the center <div class="row h-100 align-items-center"> change it to top <div class="row h-100 align-items-top"> This is in the 2nd line of your html. See here: https://jsfiddle.net/wp406n8d/4/
Also, you can get rid of this code:
.row :first-child > .card {
margin-top: 0.75rem;
}
And I'm not completely sure if you were wanting this also, but you can simply add height: 100% to the .card class to make all of the cards the same height. See here: https://jsfiddle.net/7ah6f4mo/
My navbar at the top of the page is overflowing the viewport on smaller devices. I found this on my personal device and in the Chrome developer tools.
Starting at 575px there is a whitespace on the white side of the screen. As the viewport decreases, the whitespace inversely increases. At the smallest point the content takes up about 25% and the remaining 75% is white.
How can I make this extra whitespace go away? Thanks!
< script src = "https://code.jquery.com/jquery-3.4.1.slim.min.js"
integrity = "sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
crossorigin = "anonymous" > < /script>
<
script src = "https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"
integrity = "sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin = "anonymous" > < /script>
<
script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity = "sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
crossorigin = "anonymous" > < /script>
body {
position: relative;
}
h3 {
text-align: center;
}
nav {
position: inherit;
}
#home {
background-image: url(jumbotronNewResized.jpg);
text-align: center;
margin-top: 55px;
background-size: 100%;
background-repeat: no-repeat;
}
#lowerJumbotron {
color: white;
}
i {
padding-right: 8px;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link href="fontawesome-free-5.11.2-web/css/all.min.css" rel="stylesheet">
<title>My App!</title>
</head>
<body data-spy="scroll" data-target="#topPageNavbar" data-offset="100">
<nav class="navbar navbar-expand-lg navbar-dark bg-secondary fixed-top" id="topPageNavbar">
<a class="navbar-brand font-weight-bold" href="#">My App Page</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#topNavbar" aria-controls="topNavbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="topNavbar">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#home">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#features">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#download">Download</a>
</li>
</ul>
<form class="form-inline my-2 my-xs-0">
<input class="form-control mr-sm-2" type="email" placeholder="Email Address" aria-label="Email Address">
<input class="form-control mr-sm-2" type="password" placeholder="Password" aria-label="Password">
<button class="btn btn-outline-success bg-success my-2 my-sm-0 text-white font-weight-bold" type="submit">Login</button>
</form>
</div>
</nav>
<div class="jumbotron jumbotron-fluid" id="home">
<div class="container">
<h1 class="display-4">My Awesome App!</h1>
<p class="lead">This is why YOU should download this fantastic app!</p>
<hr class="my-2">
<p id="lowerJumbotron">Want to keep updated? Join our mailing list!</p>
<form>
<div class="form-row justify-content-center">
<div class="col-auto">
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">#</div>
</div>
<input type="email" class="form-control" placeholder="Your Email Address">
</div>
</div>
<div class="col-auto">
<button type="submit" class="btn btn-success">Submit</button>
</div>
</div>
</form>
</div>
</div>
<div id="about" class="container">
<h3 class="my-3">This is all about the app!</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<hr class="container">
<div id="features" class="container mt-4">
<h3 class="mb-3">Check out some of the different features!</h3>
<div class="card-deck">
<div class="card">
<img src="seedsResized.jpg" class="card-img-top" alt="Seeds">
<div class="card-body">
<h5 class="card-title"><i class="fas fa-seedling icon"></i>Gather Your Seed</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
Click This Link!
</div>
</div>
<div class="card">
<img src="sprout.jpg" class="card-img-top" alt="Sprouting Seeds">
<div class="card-body">
<h5 class="card-title"><i class="fas fa-leaf icon"></i>Nuture Your Field</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
Click This Link!
</div>
</div>
<div class="card">
<img src="harvestResized.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title"><i class="fas fa-tractor icon"></i>Receive Your Harvest</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
Click This Link!
</div>
</div>
</div>
<div class="card-deck mt-4">
<div class="card">
<img src="calendar.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title"><i class="fas fa-tasks"></i>Plan Your Activity</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
Click This Link!
</div>
</div>
<div class="card">
<img src="meetingResized.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title"><i class="fas fa-handshake"></i>Schedule Your Success</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
Click This Link!
</div>
</div>
<div class="card">
<img src="dashboardResized.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title"><i class="fas fa-chart-line"></i>Monitor Your Growth</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
Click This Link!
</div>
</div>
</div>
</div>
<div id="download"></div>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
Link of the Website With Extra Whitespace On Small Screens
It has nothing to do with the navigation, the issue is with the horizontal ruler <hr> having a 100% width; add the following CSS to resolve:
hr.container {
width: auto;
}
complete working snippet:
body {
position: relative;
}
h3 {
text-align: center;
}
nav {
position: inherit;
}
#home {
background-image: url(jumbotronNewResized.jpg);
text-align: center;
margin-top: 55px;
background-size: 100%;
background-repeat: no-repeat;
}
#lowerJumbotron {
color: white;
}
i {
padding-right: 8px;
}
hr.container {
width: auto;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link href="fontawesome-free-5.11.2-web/css/all.min.css" rel="stylesheet">
<body data-spy="scroll" data-target="#topPageNavbar" data-offset="100">
<nav class="navbar navbar-expand-lg navbar-dark bg-secondary fixed-top" id="topPageNavbar">
<a class="navbar-brand font-weight-bold" href="#">My App Page</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#topNavbar" aria-controls="topNavbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="topNavbar">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#home">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#features">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#download">Download</a>
</li>
</ul>
<form class="form-inline my-2 my-xs-0">
<input class="form-control mr-sm-2" type="email" placeholder="Email Address" aria-label="Email Address">
<input class="form-control mr-sm-2" type="password" placeholder="Password" aria-label="Password">
<button class="btn btn-outline-success bg-success my-2 my-sm-0 text-white font-weight-bold" type="submit">Login</button>
</form>
</div>
</nav>
<div class="jumbotron jumbotron-fluid" id="home">
<div class="container">
<h1 class="display-4">My Awesome App!</h1>
<p class="lead">This is why YOU should download this fantastic app!</p>
<hr class="my-2">
<p id="lowerJumbotron">Want to keep updated? Join our mailing list!</p>
<form>
<div class="form-row justify-content-center">
<div class="col-auto">
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">#</div>
</div>
<input type="email" class="form-control" placeholder="Your Email Address">
</div>
</div>
<div class="col-auto">
<button type="submit" class="btn btn-success">Submit</button>
</div>
</div>
</form>
</div>
</div>
<div id="about" class="container">
<h3 class="my-3">This is all about the app!</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<hr class="container">
<div id="features" class="container mt-4">
<h3 class="mb-3">Check out some of the different features!</h3>
<div class="card-deck">
<div class="card">
<img src="seedsResized.jpg" class="card-img-top" alt="Seeds">
<div class="card-body">
<h5 class="card-title"><i class="fas fa-seedling icon"></i>Gather Your Seed</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
Click This Link!
</div>
</div>
<div class="card">
<img src="sprout.jpg" class="card-img-top" alt="Sprouting Seeds">
<div class="card-body">
<h5 class="card-title"><i class="fas fa-leaf icon"></i>Nuture Your Field</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
Click This Link!
</div>
</div>
<div class="card">
<img src="harvestResized.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title"><i class="fas fa-tractor icon"></i>Receive Your Harvest</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
Click This Link!
</div>
</div>
</div>
<div class="card-deck mt-4">
<div class="card">
<img src="calendar.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title"><i class="fas fa-tasks"></i>Plan Your Activity</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
Click This Link!
</div>
</div>
<div class="card">
<img src="meetingResized.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title"><i class="fas fa-handshake"></i>Schedule Your Success</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
Click This Link!
</div>
</div>
<div class="card">
<img src="dashboardResized.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title"><i class="fas fa-chart-line"></i>Monitor Your Growth</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
Click This Link!
</div>
</div>
</div>
</div>
<div id="download"></div>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
Why my text-justify class do not line feed?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-12">
<p class="text-justify">abcdefghijklmnabcdefghijklmnabcdefghijklmnabcdefghijklmnabcdefghijklmnabcdefghijklmnabcdefghijklmnabcdefghijklmnabcdefghijklmnabcdefghijklmnabcdefghijklmnabcdefghijklmnabcdefghijklmnabcdefghijklmnabcdefghijklmnabcdefghijklmnabcdefghijklmnabcdefghijklmnabcdefghijklmnabcdefghijklmnabcdefghijklmnabcdefghijklmnabcdefghijklmnabcdefghijklmnabcdefghijklmnabcdefghijklmnabcdefghijklmnabcdefghijklmnabcdefghijklmnabcdefghijklmnabcdefghijklmnabcdefghijklmnabcdefghijklmnabcdefghijklmnabcdefghijklmnabcdefghijklmnabcdefghijklmnabcdefghijklmnabcdefghijklmnabcdefghijklmnabcdefghijklmnabcdefghijklmnabcdefghijklmnabcdefghijklmnabcdefghijklmn</p>
</div>
</div>
</div>
The text in one line, why it do not wrap?
Because there are no spaces in your text; all that gibberish is one long word and so it can't break.
Your code works, you just have to use real words (or at least hit the space bar when typing random characters) when testing.
I always use Lorem Ipsum, and have a macro set up so that I just type lipsum and a full paragraph will be inserted where my cursor is.
<link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.3.1/core.js"></script>
<div class="container">
<div class="row">
<div class="col-md-12">
<p class="text-justify">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
</div>
In your code you have one very long word and the text-align: justify property avoid breaking words. You need to add some spaces to make it justified.
Style your block elements with word-wrap: break-word; to allow line breaks inside words.
.col-md-12>p { word-wrap: break-word; }
<div class="col-md-12">
<p class="text-justify">abcdefghijklmnabcdefghijklmnabcdefghijklmnabcdefghijklmnabcdefghijklmnabcdefghijklmnabcdefghijklmnabcdefghijklmnabcdefghijklmnabcdefghijklmnabcdefghijklmnabcdefghijklmnabcdefghijklmnabcdefghijklmnabcdefghijklmnabcdefghijklmnabcdefghijklmnabcdefghijklmnabcdefghijklmnabcdefghijklmnabcdefghijklmnabcdefghijklmnabcdefghijklmnabcdefghijklmnabcdefghijklmnabcdefghijklmnabcdefghijklmnabcdefghijklmnabcdefghijklmnabcdefghijklmnabcdefghijklmnabcdefghijklmnabcdefghijklmnabcdefghijklmnabcdefghijklmnabcdefghijklmnabcdefghijklmnabcdefghijklmnabcdefghijklmnabcdefghijklmnabcdefghijklmnabcdefghijklmnabcdefghijklmnabcdefghijklmnabcdefghijklmn</p>
</div>
use word-wrap to wrap'em up
Why do you need align the text justified when you have only one word!!
p{
word-wrap:break-word;
}
<link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">
<div class="container">
<div class="row">
<div class="col-md-12">
<p class="text-justify">abcdefghijklmnabcdefghijklmnabcdefghijklmnabcdefghijklmnabcdefghijklmnabcdefghijklmnabcdefghijklmnabcdefghijklmnabcdefghijklmnabcdefghijklmnabcdefghijklmnabcdefghijklmnabcdefghijklmnabcdefghijklmnabcdefghijklmnabcdefghijklmnabcdefghijklmnabcdefghijklmnabcdefghijklmnabcdefghijklmnabcdefghijklmnabcdefghijklmnabcdefghijklmnabcdefghijklmnabcdefghijklmnabcdefghijklmnabcdefghijklmnabcdefghijklmnabcdefghijklmnabcdefghijklmnabcdefghijklmnabcdefghijklmnabcdefghijklmnabcdefghijklmnabcdefghijklmnabcdefghijklmnabcdefghijklmnabcdefghijklmnabcdefghijklmnabcdefghijklmnabcdefghijklmnabcdefghijklmnabcdefghijklmnabcdefghijklmnabcdefghijklmn</p>
</div>
</div>
</div>
I'm experiencing an odd issue with the sticky positioning feature that's interfering with the scroll positioning.
My intention is fairly common: keep an advertisement in a sidebar always visible when the visitor scrolls the page.
It does work as per definition as you can see in the code below — or in the Fiddle if you prefer:
body {
margin: 6rem;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
}
.sidebar .ads {
position: sticky;
top: 1rem;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<section class="col-md-10 listing">
<div class="row">
<div class="col-md-4">
<div class="card-deck">
<div class="card" data-mh="card">
<a href="">
<img class="card-img-top thumbnail" src="https://orig00.deviantart.net/63b7/f/2013/041/9/d/free_youtube_thumbnail_template_by_imaura-d5ugja7.png" alt="Thumbnail" />
</a>
<div class="card-block">
<h3 class="card-title d-flex align-items-center hidden-sm-down lang-en">
Title
</h3>
Et aliquip non culpa pariatur quis et consectetur dolor eu laborum in nisi voluptate ut commodo dolore dolore anim est et in eu voluptate velit nulla nisi occaecat anim ut.
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card-deck">
<div class="card" data-mh="card">
<a href="">
<img class="card-img-top thumbnail" src="https://orig00.deviantart.net/63b7/f/2013/041/9/d/free_youtube_thumbnail_template_by_imaura-d5ugja7.png" alt="Thumbnail" />
</a>
<div class="card-block">
<h3 class="card-title d-flex align-items-center hidden-sm-down lang-en">
Title
</h3>
Et aliquip non culpa pariatur quis et consectetur dolor eu laborum in nisi voluptate ut commodo dolore dolore anim est et in eu voluptate velit nulla nisi occaecat anim ut.
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card-deck">
<div class="card" data-mh="card">
<a href="">
<img class="card-img-top thumbnail" src="https://orig00.deviantart.net/63b7/f/2013/041/9/d/free_youtube_thumbnail_template_by_imaura-d5ugja7.png" alt="Thumbnail" />
</a>
<div class="card-block">
<h3 class="card-title d-flex align-items-center hidden-sm-down lang-en">
Title
</h3>
Et aliquip non culpa pariatur quis et consectetur dolor eu laborum in nisi voluptate ut commodo dolore dolore anim est et in eu voluptate velit nulla nisi occaecat anim ut.
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card-deck">
<div class="card" data-mh="card">
<a href="">
<img class="card-img-top thumbnail" src="https://orig00.deviantart.net/63b7/f/2013/041/9/d/free_youtube_thumbnail_template_by_imaura-d5ugja7.png" alt="Thumbnail" />
</a>
<div class="card-block">
<h3 class="card-title d-flex align-items-center hidden-sm-down lang-en">
Title
</h3>
Et aliquip non culpa pariatur quis et consectetur dolor eu laborum in nisi voluptate ut commodo dolore dolore anim est et in eu voluptate velit nulla nisi occaecat anim ut.
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card-deck">
<div class="card" data-mh="card">
<a href="">
<img class="card-img-top thumbnail" src="https://orig00.deviantart.net/63b7/f/2013/041/9/d/free_youtube_thumbnail_template_by_imaura-d5ugja7.png" alt="Thumbnail" />
</a>
<div class="card-block">
<h3 class="card-title d-flex align-items-center hidden-sm-down lang-en">
Title
</h3>
Et aliquip non culpa pariatur quis et consectetur dolor eu laborum in nisi voluptate ut commodo dolore dolore anim est et in eu voluptate velit nulla nisi occaecat anim ut.
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card-deck">
<div class="card" data-mh="card">
<a href="">
<img class="card-img-top thumbnail" src="https://orig00.deviantart.net/63b7/f/2013/041/9/d/free_youtube_thumbnail_template_by_imaura-d5ugja7.png" alt="Thumbnail" />
</a>
<div class="card-block">
<h3 class="card-title d-flex align-items-center hidden-sm-down lang-en">
Title
</h3>
Et aliquip non culpa pariatur quis et consectetur dolor eu laborum in nisi voluptate ut commodo dolore dolore anim est et in eu voluptate velit nulla nisi occaecat anim ut.
</div>
</div>
</div>
</div>
</div>
</section>
<section class="col-md-2 hidden-sm-down sidebar">
<div class="ads">
Sticky content
</div>
</section>
</div>
</div>
<div class="hidden-sm-up">
<br /><br /><br /><br />
</div>
However, if the real sticky content takes a while to load, which is very common with Google AdSense and alike, and the user starts scrolling down the page (or press Page Down, End, arrows...) when the said slow content finally finishes loading the whole page scrolls to the top.
I've debugged my JS to make sure it wasn't my fault. Also, when I removed the position: sticky; declaration jumping stopped.
More important than how could I fix this, I would like to know why this is happening