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>
Related
I'm sure that something similar has already answered but I could not find the excact scenario that I'm dealing with right now so, here is my problem: I've a div in the right (with a fixed width) and all the left side is from another div. Ok, I can put both divs properly but my problem is that second one contents are displayed below the first div. I've tried several configurations with no success. I know that is a silly question but I would really appreciate any help you can provide.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</head>
<body>
<div>
<div style="display: inline-block; width:100%; display: inline-block;">
<div id="sidemenu" style="background-color: #004E87; position: fixed; width: 100px; height: 100%; float:left; display: inline-block;">
</div>
<div id="leftside" style="width: 100%; float:right; background-color: yellow; display: inline-block;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
</div>
<script type="text/javascript">
</script>
</body>
</html>
Updated using flex!
My problem now is that I cannot get the 100 height of the screen.. Ay help?
<div class="flex-container" style="display: flex; width: 100%; background-color: green; align-items: stretch;">
<div class="flex-item" style="background-color: yellow; width: 100px; height: 100%;">1</div>
<div class="flex-item" style="background-color: red; width: 100px;">2</div>
</div>
I would really appreciate any help you can provide.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-2" style="background-color: #004E87;height:100vh">
</div>
<div class="col" >
<div class="row" style="background-color: yellow">
<div class = "col">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<div>
<div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
</script>
</body>
</html>
Please see if this works for you. as you are using bootstrap you can divide a row into two columns 2 and 10 each to get the result you want. Let me know if you need any other help. Thanks :)
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>
This question already has answers here:
How to disable margin-collapsing?
(12 answers)
Closed 5 years ago.
I am a relatively new self taught front-end developer. I have this problem with the top margin on my documents. It remains a margin on top.
Usually I have been using the * selector, and it leaves no margin what so ever on every element. But I have been told that is not a good way of doing it, and you don't want to remove all margin and padding from every element(?).
So I have tried to use the body selector, and gave that margin: 0; and padding: 0; but still it's this margin on top. What is the "right" way of doing this?
Followed under is my html and css.
#import url('https://fonts.googleapis.com/css?family=Work+Sans:500');
body {
padding: 0;
margin: 0;
}
header {
background-color: red;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title>My Website</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div>
<header id="top">
<h1>My Website</h1>
<nav>
<ul>
<li>ABOUT</li>
<li>CONTACT</li>
</ul>
</nav>
</header>
<section id="about">
<h2>Semi heading</h2>
<p>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>
</section>
<section id="contact">
<h2>Semi Header</h2>
<p>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>
</section>
</div>
</body>
</html>
The cause is a phenomenon called "collapsing margins": Whatever element is first inside the body, its margin-top will "collapse" (=unite) with the body margin-top. So, in your case, that's the first h1 element (its default margin defined by the browser stylesheet), whose margin-top extends the body, creating a maring-top for the body.
You can apply this to avoid this phenomenon:
h1:first-of-type {
margin-top: 0;
}
Note: Usually, that h1 would be inside a header or something similar, which usually would be a DIV, with padding etc. So you wouldn't have to apply this, because the container of that h1probably wouldn't have a margin-top and the h1 wouldn't be placed at the very top of the header.
#import url('https://fonts.googleapis.com/css?family=Work+Sans:500');
body {
padding: 0;
margin: 0;
}
header {
background-color: red;
}
h1:first-of-type {
margin-top: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title>My Website</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div>
<header id="top">
<h1>My Website</h1>
<nav>
<ul>
<li>ABOUT</li>
<li>CONTACT</li>
</ul>
</nav>
</header>
<section id="about">
<h2>Semi heading</h2>
<p>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>
</section>
<section id="contact">
<h2>Semi Header</h2>
<p>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>
</section>
</div>
</body>
</html>
I'd like to display an image on the right side of a text with a caption. The HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>figure example</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.1/css/bulma.min.css">
</head>
<body>
<section class="section">
<div class="container">
<figure class="is-pulled-right">
<img src="https://bulma.io/images/placeholders/128x128.png"
width="128" height="128" alt="Example">
<figcaption>
<small>Long Text. Longer than the image is wide. Lorem ipsum dolor
sit amet.</small>
</figcaption>
</figure>
<p>
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>
</section>
</body>
</html>
The result:
Because the text of the caption is long the image gets a lot of real estate. How can I wrap the text of the caption so that is doesn't take more width than the image? I want the image to be on the right side of the text.
BTW: Is <figure class="is-pulled-right"> the right way of tackling this problem? columns work but obviously don't let the text flow around the <figure> element.
Try this. I have added css for this.
.is-pulled-right {
margin-left: 4%;
width: 128px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>figure example</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.1/css/bulma.min.css">
</head>
<body>
<section class="section">
<div class="container">
<figure class="is-pulled-right">
<img src="https://bulma.io/images/placeholders/128x128.png"
width="128" height="128" alt="Example">
<figcaption>
<small>Long Text. Longer than the image is wide. Lorem ipsum dolor
sit amet.</small>
</figcaption>
</figure>
<p>
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. 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>
</section>
</body>
</html>
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>