I have a jsfiddle here - http://jsfiddle.net/7bjxtm36/3/
I need a simple rollover where the image has a colored opacity and the text shows on rollover.
I need to use this structure where the image is in a div above the text.
This is working here but I need the text to be white.
How can I do this so the text is white.
<div class="card-container">
<div class="card">
<div class="front block">
<img src="http://lorempixel.com/g/400/300/" class="img-responsive"/>
</div>
<div class="back block">
<h3>Heading</h3>
<h4>Sub-Heading</h4>
<p>Dummy text Dummy text Dummy text Dummy text
Dummy text Dummy text Dummy text Dummy text Dummy text
</p>
</div>
</div>
</div>
Related
I have a situation of two columns inside a bootstrap row and I want to achieve the result depicted on the following image using only css/flexbox(not js at all):
Result
That means I want the space on the left column to be distrubted so that the two inputs (one on the left column and one on the right column) fall exactly one next to each other with the input in the left column having the exact same space bellow it as the height of the "TEXT TEXT" that is below the input of the right column.
Result Explained
My code is bellow.I came close enougt but I can not calculate or leave the space bellow the left columns input somehow.
<div class="row">
<div class="col-xl-6 d-flex flex-column justify-content-between">
<div>
<label for="deliverypoint_code">TEXT</label>
</div>
<div>
<div>
<input type="text" id="deliverypoint_code" name="deliverypoint_code" class="w-100 p-3">
</div>
</div>
</div>
<div class="col-xl-6 d-flex flex-column justify-content-between">
<div>
<label for="deliverypoint_code">TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT</label>
</div>
<div>
<div>
<input type="text" id="deliverypoint_code" name="deliverypoint_code" class="w-100 p-3">
</div>
<div class="mt-2">
<span class="error-message">TEXT TEXT</span>
</div>
</div>
</div>
</div>
Here is how my result looks like:
Fail Result
You can use an empty col-6 element to achieve what you want.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.bundle.min.js"></script>
<div class="container">
<div class="row">
<div class="col-6 d-flex flex-column justify-content-between">
<div>
<label for="deliverypoint_code">TEXT</label>
</div>
<div>
<div>
<input type="text" id="deliverypoint_code" name="deliverypoint_code" class="w-100 p-3">
</div>
</div>
</div>
<div class="col-6 d-flex flex-column justify-content-between">
<div>
<label for="deliverypoint_code">TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT</label>
</div>
<div>
<div>
<input type="text" id="deliverypoint_code" name="deliverypoint_code" class="w-100 p-3">
</div>
</div>
</div>
<div class="col-6"></div>
<div class="col-6 mt-2">
<span class="error-message">TEXT TEXT</span>
</div>
</div>
</div>
I'm trying to do some vertical aligning in Bootstrap and can't seem to achieve it with the various flex box classes (align-items-center etc).
I need the text content in the boxes of the below codepen to be vertically centered ... whilst also each box should match the height of the tallest box (as is currently working)... can anyone help?!
The inner divs need to be wrapped in a link - don't know if thats affecting things?
https://codepen.io/jwacreative/pen/VwjePEj
<div class="container">
<div class="row">
<div class="col-md-6 col-lg-4 mb-4">
<a href="http://">
<div class="summary-box h-100" style="background:red">
<h2>Title</h2>
<p>Some text</p>
</div>
</a>
</div>
<div class="col-md-6 col-lg-4 mb-4">
<a href="http://">
<div class="summary-box h-100" style="background:green">
<h2>Title</h2>
<p>Some text longer text Some text longer text Some text longer text Some text longer text Some text longer text Some text longer text<< /p>
</div>
</a>
</div>
<div class="col-md-6 col-lg-4 mb-4">
<div class="summary-box h-100" style="background:blue">
<h2>Title</h2>
<p>Some text</p>
</div>
</div>
</div>
CSS Grid should be able to help with this...
.summary-box {
display: grid;
align-content: center;
}
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>
I am trying to implement 3 panels with text and images with a different background color for the images (darker) and another color for the text.
this is my current code which works for the desktop version of the website but breaks on mobile.
At the moment the layout is IMAGE->IMAGE->IMAGE. Text->Text->Text and it should be IMAGE -> Text. Image -> Text. Image -> Text:
current code
So as per my comment, you need to include both your image and text into a column, then all three columns into a row. Something like this:
<div class="row">
<div class="col-md-4">
<div><img src="#"></div>
<div>Some text</div>
</div>
<div class="col-md-4">
<div><img src="#"></div>
<div>Some text</div>
</div>
<div class="col-md-4">
<div><img src="#"></div>
<div>Some text</div>
</div>
</div>
You should check out the bootstrap site for guidance on using their grid layout :)
In bootstarp to using panels you must use panel codes
you can see the bootstrap panels here Bootstrap Panels
<div class="row">
<div class="container">
<div class="panel panel-default">
<div class="panel-heading">Panel heading without title</div>
<div class="panel-body">
<img src="#">
<p>text Here</p>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">Panel heading without title</div>
<div class="panel-body">
<img src="#">
<p>text Here</p>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">Panel heading without title</div>
<div class="panel-body">
<img src="#">
<p>text Here</p>
</div>
</div>
</div>
</div>
Automatically all three columns put in the one row if you want use different column grid you must the another div tag to specify the grids
also panels have the panel title class but I used panel heading class you can use panel title if you want
So the new Bootstrap v3 code looks like this:
<div class="row">
<div class="col-md-4 bg-red">
<h2>Heading</h2>
<p>My text here...</p>
</div>
<div class="col-md-4 bg-green">
<h2>Heading</h2>
<p>My text here...</p>
</div>
<div class="col-md-4 bg-blue">
<h2>Heading</h2>
<p>My text here...</p>
</div>
</div>
Because Bootstrap 3 has removed column margins (now has padding left and right). How can I put a background color on the class="col-lg-4" div and have the page background gap between each div?
Note: it must be a background color on the class="col-lg-4" div.
One way is to use the background-clip property with the content-box value so that the painting area is clipped to the content box of .col-lg-4 instead of the border box like it is by default.
Use .col-*-3 and add margin to it. You have 4 columns but the 4th is unused and then you have room for the margins. Here's an example:
http://www.bootply.com/R9iSDcNuzY
HTML
<div class="row">
<div class="col-md-3 bg-danger col-margin">
<h2>Heading</h2>
<p>My text here...</p>
</div>
<div class="col-md-3 bg-success col-margin">
<h2>Heading</h2>
<p>My text here...</p>
</div>
<div class="col-md-3 bg-primary col-margin">
<h2>Heading</h2>
<p>My text here...</p>
</div>
</div>
CSS
/* CSS used here will be applied after bootstrap.css */
.col-margin{
margin: 10px;
}