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.
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>
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>
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 want to put a text between two images in bootstrap grid. But images in row sections change their aspect ratio(original is 1:1) and do not resize correctly.
(Codepen: https://codepen.io/Oktocorp/pen/yMxpwX?editors=1100)
<div class="container">
<div class="row">
<img class="img-fluid rounded-circle col-lg-3 col-md-3 col-sm-12" src="https://image.ibb.co/dEZA5a/true_detective1.jpg" alt="true_detective1">
<p class="text-center col-lg-6 col-md-6 col-sm-12">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>
<img class="img-fluid rounded-circle col-lg-3 col-md-3 col-sm-12" src="https://image.ibb.co/jRigBF/true_detective2.jpg" alt="true_detective2">
</div>
</div>
Don't put the grid column classes on the img and p tags. Rather wrap those in div elements with the desired bootstrap classes. The reason for this is that bootstraps col-* classes need to use width and max-width properties so they are going override your css on img-fluid class. If you for example use col-md-6 then that element's width needs to be 50% of its parent - it cannot be both 50% and 100% at the same time. So you want to make your img elements children of those.
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-3 col-lg-3">
<img class="img-fluid rounded-circle" src="https://image.ibb.co/dEZA5a/true_detective1.jpg" alt="true_detective1">
</div>
<div class="col-lg-6 col-md-6 col-md-6 ">
<p class="text-center ">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 class="col-sm-12 col-md-3 col-lg-3">
<img class="img-fluid rounded-circle" src="https://image.ibb.co/jRigBF/true_detective2.jpg" alt="true_detective1">
</div>
</div>
</div>
Also for your img-fluid class change the css to:
.img-fluid {
width: 100%;
height: auto;
}
The grid card columns are meant to be used on images and paragraphs. They're meant to be containers of content.
http://www.codeply.com/go/5sip6gvYFE
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-12 text-center">
<img class="img-fluid rounded-circle" src="https://image.ibb.co/dEZA5a/true_detective1.jpg" alt="true_detective1">
</div>
<div class="col-lg-6 col-md-6 col-sm-12 text-center">
<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 class="col-lg-3 col-md-3 col-sm-12 text-center">
<img class="img-fluid rounded-circle" src="https://image.ibb.co/jRigBF/true_detective2.jpg" alt="true_detective2">
</div>
</div>
</div>
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>