I'm using some W3 CSS to accomplish dropping text area on an image. It works fine. But when I go to transparency, it makes the text and button transparent as well. Is there an easy fix to only have the backgroud transparent and not the text/button.
I've tried a few things - all W3 (first code), and then a CSS inline style (2nd code). Still get transparent button/text.
W3 CSS
<div class="w3-display-middle w3-large w3-container w3-padding w3-sand w3-opacity" align=center>
Text Here And There
<br>
Trial
<br>More Text Here
</div>
and then inline too
<div class="w3-display-middle w3-large w3-container w3-padding" align=center>
<div style="padding:4px;opacity:0.4;background:white">
Text Here And There
<br>
Trial
<br>More Text Here
</div>
</div>
ANSWER by Cris W
<div class="w3-display-middle w3-large w3-container" align=center>
<div style="padding:4px;background-color: rgba(255,255,255,.6);border:1px solid black">
Text Here And There
<br>
Trial
<br>More Text Here
</div>
</div>
Answer by Cris W
<div class="w3-display-middle w3-large w3-container" align=center>
<div style="padding:4px;background-color: rgba(255,255,255,.6);border:1px solid black">
Text Here And There
<br>
Trial
<br>More Text Here
</div>
</div>
Related
Please see code snipped: I am trying to align the divs with "Learn More" at the bottom of the columns at the same vertical height regardless of the height of the previous div.
Duplicate Disclaimer: I've been looking at How can I make Bootstrap columns all the same height? and How can I make Bootstrap 4 columns all the same height? which seem to be a similar problem. However, the solutions do not work for me as they are mostly for BS3 (e.g. I tried the examples with class="row-eq-height"), and most answers with regard to BS4 imply that the equal height is default in BS4.
However as you can see from the red borders, only the outer column height is "stretched" to the bottom by default, the inner one is only equal to text height. I'm very confused.
* { border: 1px solid red !important; }
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
</head>
<body>
<div class="row text-center no-gutters">
<div class="col-sm-4">
<div>
<h4>Components and examples</h4>
<p class="body-block-3 mx-auto">multiple line text example random text should break across multiple lines</p>
</div>
<div class="align-items-end">
Learn more 1
</div>
</div>
<div class="col-sm-4">
<div>
<h4>Components and examples</h4>
<p class="body-block-3 mx-auto">one line text example</p>
</div>
<div class="align-items-end">
Learn more 2
</div>
</div>
<div class="col-sm-4">
<div>
<h4>Components and examples</h4>
<p class="body-block-3 mx-auto">multiple line text example random text should break across multiple lines</p>
</div>
<div class="align-items-end">
Learn more 3
</div>
</div>
</div>
</body>
Also, I've tried various Bootstrap alignment options such as strechting the middle div with "align-items-stretch" and using "d-flex align-items-end" for the last div. Nothing works.
Columns in bootstrap are not display: flex and that is why the align-items-end is not working. Add the classes d-flex and flex-column to your column classes. Added the class .flex-1 and put this on your upper div.
* {
border: 1px solid red !important;
}
.body-block-3 {
max-width: 250px;
margin-left: auto;
margin-right: auto;
}
.flex-1 {
flex: 1;
}
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
</head>
<body>
<div class="row text-center no-gutters">
<div class="col-sm-4 d-flex flex-column">
<div class="flex-1">
<h4>Components and examples</h4>
<p class="body-block-3">multiple line text example random text should break across multiple lines</p>
</div>
<div>
Learn more 1
</div>
</div>
<div class="col-sm-4 d-flex flex-column">
<div class="flex-1">
<h4>Components and examples</h4>
<p class="body-block-3">one line text example</p>
</div>
<div>
Learn more 2
</div>
</div>
<div class="col-sm-4 d-flex flex-column">
<div class="flex-1">
<h4>Components and examples</h4>
<p class="body-block-3">multiple line text example random text should break across multiple lines</p>
</div>
<div>
Learn more 1
</div>
</div>
</div>
</body>
EDIT: Also wanted to mention you could use a boostrap utility class mb-auto instead of flex-1
<div class="col-sm-4 d-flex flex-column">
<div class="mb-auto">
<h4>Components and examples</h4>
<p class="body-block-3">one line text example</p>
</div>
<div>
Learn more 2
</div>
</div>
However your upper div will not take up the entire space (stretch), not sure if this is an issue with your use case. If not, you would not have to make any new classes and would be following the docs on bootstrap's with align-item section
EDIT: Updated for .body-block-3 class
Version 3 layout (https://plnkr.co/edit/XDA9EwMAzH4xDSfZaXvS?p=preview)
<div class="container">
<h1>Confirm your details</h1>
<div class="row">
<div class="col-md-12">
<div class="panel">
<h4 class="panel-heading">We need to confirm your current address details and contact information.</h4>
<p class="panel-body">With supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 text-right">
<p>
Confirm
</p>
</div>
</div>
</div>
Version 4 layout (https://plnkr.co/edit/LDy00Kk6eVHDq85ZqjgQ?p=preview)
<div class="container">
<h1>Confirm your details</h1>
<div class="row">
<div class="col">
<div class="card">
<div class="card-block">
<h4 class="card-title">We need to confirm your current address details and contact information.</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 text-right">
<p>
Confirm
</p>
</div>
</div>
</div>
Why doesn't the button have vertical space and how should I add it in Bootstrap v4?
Found the answer:
https://v4-alpha.getbootstrap.com/utilities/spacing/
Basically, they have added notation for adding margins and padding so that you can add differing amounts depending on the size of the screen. For example, I want to add margin ('m') to the top ('t') of the div for small ('-sm') sized screens. I also want it to be the default spacing ('-3'):
<div class="mt-sm-3"> <!-- footer nav -->
<a class="btn btn-primary" href="#">Confirm</a>
</div>
Updated plnker: https://plnkr.co/edit/LDy00Kk6eVHDq85ZqjgQ?p=preview
According to this link "Migrating to v4 - Bootstrap 4" Panels have been dropped, it's the Panel that is providing the pseudo HR and a margin/padding below it.
Because it's now using cards, I'm thinking you've lost that extra css formatting and it's just going to be a case of applying margins around the preceding card.
Be aware: "Avoid margin-top. Vertical margins can collapse, yielding unexpected results." Boostrap Reboot Approach
I want to align and image and an div inline. I also want the top's of the image and div to be aligned aswell. This is what I have so far
<div>
<img src="http://lorempixel.com/500/333/nature/2" class="img-fluid d-inline-block">
<div class="comment d-inline-block">
<div class="comment-header">
<span>title</span>
</div>
<blockquote>comment</blockquote>
</div>
I tried the class d-inline-block and it gets close to what I'm looking for but i need the text to be at the top.
You can see here:http://www.bootply.com/zpj12TL4wI
Bootstrap 4 includes a utility class for that: align-top. No extra CSS is needed...
<div>
<img src="http://lorempixel.com/500/333/nature/2" class="img-fluid">
<div class="comment d-inline-block align-top">
<div class="comment-header">
<span>title</span>
</div>
<blockquote>comment</blockquote>
</div>
</div>
http://www.bootply.com/wtAOA1JPn1
Just a vertical-align change is what ya need:
.comment {
vertical-align: top;
}
Why doesn't this bootstrap layout work in jsfiddle?:
https://jsfiddle.net/1mdodv7r/2/show/
<body>
<div class="container">
<div class="row">
<div class="col-xs-6"
style="border:solid black 1px;height:200px;">Map</div>
<div class="col-xs-6" style="border:solid black 1px;height:200px;">
<div style="border:solid black 1px;height:100px;width:100%;">SideViewSection1</div>
<div style="border:solid black 1px;height:100px;width:100%;">SideViewSection2</div>
</div>
</div>
<div class="row">
<div class="col-xs-6"
style="border:solid black 1px;height:200px;">MapParameters</div>
<div class="col-xs-6"
style="border:solid black 1px;height:200px;display:none;">
[Empty]
</div>
</div>
</div>
</body>
It works in my local environment withoutissue. I googled and found out that /show/ should be appended to the jsfiddle to display the view in fullscreen. However, even in full screen mode, the bootstrap styling does not seem to be getting applied. Is there a special trick for this or are there other sites which are better for sharing bootstrap code?
Beacuse you have added URL with link tag so this is not working. Just call URL "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap-grid.min.css"
I am trying to create a css ribbon on this panel of picture. But the ribbon keeps on appearing on the upper right side of the screen.
Here is my HTML Code
<li class="span4">
<div class="thumbnail">
</div>
<img src="img/placeholder-360x200.jpg" alt="product name">
<div class="caption">
<h3>Product name</h3>
<p>
Few attractive words about your product.Few attractive words about your product.
Few attractive words about your product.Few attractive words about your product.
</p>
</div>
<div class="widget-footer">
<p>
Buy now
Read more
</p>
</div>
</div>
The CSS code can be found here.
And a screenshot of what I'm trying to build
try this
http://jsfiddle.net/UBfCE/68/
.ribbon-wrapper{
margin:0 0 0 212px;
position:absolute;
}