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>
Related
I am using Bootstrap 5 and have a <div> that is wrapped in an <a>. It contains a title, a thumbnail image, and some description text. In other words, the entire block of content is a link.
I have been able to override most of Bootstrap's CSS, but when it comes to this link text it's really persistent.
If I specify display: inline-block the underlines disappear. But I want that for inline text here as well. text-decoration: none is not taking effect.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Underline</title>
<!-- Bootstrap core CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body class="py-0">
<main>
<div class="row mb-3 report-with-img-cont">
<div class="col-md-8 col-lg-9 report-previews themed-grid-col">
<a href="/">
<div>
<div>
<h5>
<span>This is a Title</span>
</h5>
</div>
<div class="row">
<div class="col-md-12 col-lg-4 themed-grid-col"><img src="https://via.placeholder.com/160x90"></div>
<div class="col-md-12 col-lg-8 themed-grid-col"><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>
</a>
</div>
</div>
</main>
</body>
</html>
You can add the text-decoration-none class in your <a> tag, and that will remove your forcing underlines on link text. and refer the below link : https://getbootstrap.com/docs/5.0/utilities/text/#text-decoration
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Underline</title>
<!-- Bootstrap core CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body class="py-0">
<main>
<div class="row mb-3 report-with-img-cont">
<div class="col-md-8 col-lg-9 report-previews themed-grid-col">
<a href="/" class="text-decoration-none">
<div>
<div>
<h5>
<span>This is a Title</span>
</h5>
</div>
<div class="row">
<div class="col-md-12 col-lg-4 themed-grid-col"><img src="https://via.placeholder.com/160x90"></div>
<div class="col-md-12 col-lg-8 themed-grid-col">
<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>
</a>
</div>
</div>
</main>
</body>
</html>
Simple! Just add class(text-decoration-none) to your link tag.
Example:
Non-underlined link
For more details:
https://getbootstrap.com/docs/4.2/utilities/text
I just added text-decoration:none; in your <a> tag as an inline-CSS and it worked like a charm.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Underline</title>
<!-- Bootstrap core CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body class="py-0">
<main>
<div class="row mb-3 report-with-img-cont">
<div class="col-md-8 col-lg-9 report-previews themed-grid-col">
<a href="/" style="text-decoration: none;">
<div>
<div>
<h5>
<span>This is a Title</span>
</h5>
</div>
<div class="row">
<div class="col-md-12 col-lg-4 themed-grid-col"><img src="https://via.placeholder.com/160x90"></div>
<div class="col-md-12 col-lg-8 themed-grid-col"><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>
</a>
</div>
</div>
</main>
</body>
</html>
Use bootstrap Property text-decoration-none in <a> tag
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Underline</title>
<!-- Bootstrap core CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body class="py-0">
<main>
<div class="row mb-3 report-with-img-cont">
<div class="col-md-8 col-lg-9 report-previews themed-grid-col">
<a href="/" class="text-decoration-none">
<div>
<div>
<h5>
<span>This is a Title</span>
</h5>
</div>
<div class="row d-flex">
<div class="col-md-12 col-lg-4 themed-grid-col"><img src="https://via.placeholder.com/160x90"></div>
<div class="col-md-12 col-lg-8 themed-grid-col"><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>
</a>
</div>
</div>
</main>
</body>
</html>
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.
Using Bootstrap 4 in my Angular 5 application I have two form groups right next to each other. When the text label of one is much longer than the other, the input fields don't line up, which ends up looking strange when there are multiple rows like this on the page.
You can see exactly what I mean at https://angular-wcd2ln.stackblitz.io/
How can I tell it that I want the two input labels to be vertically aligned together and have the label "push down" with the input field?
Use the flexbox utility classes (d-flex flex-column) on the form-group, and mt-auto (margin-top:auto) on the form-control inputs...
<div class="row">
<div class="col-6">
<div class="form-group h-100 d-flex flex-column">
<label for="left">This is a short label.</label>
<input class="form-control mt-auto" id="left" type="text">
</div>
</div>
<div class="col-6">
<div class="form-group h-100 d-flex flex-column">
<label for="right"> 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. </label>
<input class="form-control mt-auto" id="right" type="text">
</div>
</div>
</div>
https://www.codeply.com/go/z0vucbNNU9
i'm new to zurb-foundation-5.on responsive equalizer topic they said
You can specify media queries for which equalizer should activate on. Apply the data-equalizer-mq attribute to the parent container. Set
the value of the attribute to the same media queries you are use to
using in Foundation. If you use an unknown media query, Equalizer will
ignore the media query request. This is particularly useful if you
have set equalize_on_stack to true.
i didn't understand what they said clearly. any one can explain briefly with demo examples.
thank you,
Basically it allows you to equalize the height of elements on your page based on screen size. My answer assumes that you've read and understand how Foundations media queries work.
Lets say you wanted to equalize the height of a row of elements on mobile devices only. You can achieve this by adding the small-only Foundation media query to the data-equalizer-mq attribute like so: data-equalizer-mq="small-only". Your HTML would look something like this:
<!-- Example 1: Equalize height on small screens only. -->
<div class="row" data-equalizer data-equalizer-mq="small-only">
<div class="small-4 columns">
<div class="panel" data-equalizer-watch>
<h1>First panel</h1>
<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 class="small-4 columns">
<div class="panel" data-equalizer-watch>
<h1>Second panel</h1>
<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.</p>
</div>
</div>
<div class="small-4 columns">
<div class="panel" data-equalizer-watch>
<h1>Third panel</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
As you can see from the codepen the height of each panel is different on a large screen as the content within each panel varies in length. However when you drag your browser screen in and it reaches the small-only breakpoint (640px) equalize will activate and the height of each panel will become the same (equalize).
For your reference I've included a second example in the codepen that illustrates the opposite of the above.
Hope that helps.
To add to Thomas
you can also have multiple equalizers that are nested inside each other, you will have to give them names for them to work
<div class="row" data-equalizer="foo">
<div class="medium-4 columns">
<div class="panel" data-equalizer-watch="foo">
<h3>Parent panel</h3>
<div class="row" data-equalizer="bar">
<div class="panel" data-equalizer-watch="bar">
...
</div>
<div class="panel" data-equalizer-watch="bar">
...
</div>
<div class="panel" data-equalizer-watch="bar">
...
</div>
</div>
</div>
</div>
<div class="medium-4 columns">
<div class="callout panel" data-equalizer-watch="foo">
...
</div>
</div>
<div class="medium-4 columns">
<div class="panel" data-equalizer-watch="foo">
...
</div>
</div>
</div>
I have this markup:
<article class="featured">
<img class="bg-featured" src="http://placehold.it/1200x400"></img>
<div class="overlay"></div>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="featured-excerpt">
<div class="meta">
<div class="category">Watch</div>
<ul class="tags">
<li>Sustainability, Global, Learning</li>
</ul>
</div>
<div class="content">
<h1 class="title">Title</h1>
<p class="info">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 class="sponsored">Sponsored content:</div>
</div>
</div>
</div>
</div>
</div>
</article>
And I want to apply to the "content" div a full width background color.
How can I do this through CSS?
Here is a jsbin to show you exactly what I'm trying to do.
You could use the .jumbotron class for this purpose. Just make sure not to put it inside an element with .container class.
Jumbotron
So here is an example using .jumbotron.
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css');
body {
margin: 0;
}
.content {
background-color: green;
}
.jumbotron {
background-color: orange;
}
.no-left-right-padding {
padding-left: 0;
padding-right: 0;
}
#media screen and (min-width: 1200px) {
img {
width: 100%;
height: auto;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<img class="bg-featured img-responsive" src="http://placehold.it/1200x400"></img>
<div class="jumbotron">
<div class="container">
<div class="row">
<div class="col-md-12">
<h1 class="title">Title</h1>
<p class="info">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 class="sponsored">Sponsored content:</div>
</div>
</div>
</div>
</div>
I answered the same question here: Bootstrap 3.0: Full-Width Color Background, Compact Columns in Center
In summary, you simply add another element around the container, and style it as you like. It will cover the full width. A container inside a container-fluid is not considered good practice.
Just create a full width wrap element (div, section, etc.). Then, use .container class for a responsive fixed width container:
<article class="featured">
<img class="bg-featured" src="http://placehold.it/1200x400"></img>
<div class="overlay"></div>
<div class="full-width"> /* ADD FULL WIDTH WRAP CLASS */
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="featured-excerpt">
<div class="meta">
<div class="category">Watch</div>
<ul class="tags">
<li>Sustainability, Global, Learning</li>
</ul>
</div>
<div class="content">
<h1 class="title">Title</h1>
<p class="info">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 class="sponsored">Sponsored content:</div>
</div>
</div>
</div>
</div>
</div>
</div>
</article>
Bootstrap .container class adds a left and right padding of 15px. Either use negative padding to fix it (padding-left: -15px; padding-right:-15px) or you can make a new .containerNew class in another css file and add these styles. For example in a file called myStyles.css do the following:
.containerNew {
background-color: green;
margin-right: auto;
margin-left: auto;
padding-left: 0px;
padding-right: 0px;
}
<div class="containerNew">
<div class="row">
<div class="col-md-12">
<!-- Your Content Here -->
</div>
</div>
</div>