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>
Related
How do I vertically align elements inside a centered column using Bulma?
current results:
My code:
<template>
<div id="dataFetcher" class="box">
<h1 class="block">Data Fetcher</h1>
<div class="columns is-vcentered is-centered">
<div id="123" class="column has-background-success is-half">
<input type="text" class="">
<button type="button" :class="{ 'is-loading': isLoading } " class="block button is-vcentered" #click="fetchData">Fetch data</button>
</div>
</div>
</div>
</template>
Thinking:
I've used a .columns .is-centered div to center horizontally. Check.
But for vertical alignment, .columns .is-vcentered isn't the answer because it requires two separate columns (which feels like the wrong approach to me?).
Other references I've seen imply using .is-flex .is-align-items-center to get some Flexbox action going, but putting that on or inside the column div breaks the horizontal alignment from .columns.
It helps if the text input has a class of input, then I would put the fields into a horizontal field container:
<template>
<div id="dataFetcher" class="box">
<h1 class="block">Data Fetcher</h1>
<div class="columns is-vcentered is-centered">
<div id="123" class="column has-background-success is-narrow">
<div class="field is-horizontal">
<div class="field-body">
<div class="field">
<p class="control">
<input type="text" class="input">
</p>
</div>
<div class="field">
<p class="control">
<button type="button" class="button">Fetch data</button>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
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 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>
I need to be able to separate the two columns by a vertical line:
<div class="container">
<div class="row">
<div class="col-md-6">
<p>some text here </p>
</div>
<div class="col-md-6">
<p>some more text here</p>
</div>
</div>
</div>
use css border-right:1px solid black to achieve this. demo here: http://jsfiddle.net/swm53ran/35/
html:
<div class="container">
<div class="row">
<div class="col-md-6 border-right">
<p>some text here </p>
</div>
<div class="col-md-6">
<p>some more text here</p>
</div>
</div>
</div>
css
.border-right {
border-right: 1px solid black;
}
Must Open in Full Page to See Borders!
Added media width clauses in the CSS so there isn't any nasty borders on the mobile-friendly side of things. Hope this helps! This will resize to the length of the longest column. Tested on .col-md-4 and .col-md-6 and my assumption is it is compatible with the rest. No guarantees though.
JSFiddle
.row {
overflow: hidden;
}
.cols {
padding-bottom: 100%;
margin-bottom: -100%;
overflow: hidden;
}
#media(min-width: 992px) {
.col-md-4:not(:first-child),
.col-md-6:not(:first-child) {
border-left: 1px solid black;
}
.col-md-4:not(:last-child),
.col-md-6:not(:last-child) {
border-right: 1px solid black;
margin-right: -1px;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<h1>
.col-md-6
</h1>
<hr>
<div class="row text-center">
<div class="col-md-6 cols">
<p>Enter some text here</p>
</div>
<div class="col-md-6 cols">
<p>Enter some more text here</p>
<p>Enter some more text here</p>
<p>Enter some more text here</p>
<p>Enter some more text here</p>
<p>Enter some more text here</p>
<p>Enter some more text here</p>
<p>Enter some more text here</p>
<p>Enter some more text here</p>
<p>Enter some more text here</p>
<p>Enter some more text here</p>
<p>Enter some more text here</p>
<p>Enter some more text here</p>
<p>Enter some more text here</p>
</div>
</div>
<hr>
<h1>
.col-md-4
</h1>
<div class="row text-center">
<div class="col-md-4 cols">
<p>Enter some more text here</p>
<p>Enter some more text here</p>
<p>Enter some more text here</p>
<p>Enter some more text here</p>
<p>Enter some more text here</p>
<p>Enter some more text here</p>
<p>Enter some more text here</p>
<p>Enter some more text here</p>
<p>Enter some more text here</p>
<p>Enter some more text here</p>
<p>Enter some more text here</p>
<p>Enter some more text here</p>
<p>Enter some more text here</p>
<p>Enter some more text here</p>
<p>Enter some more text here</p>
<p>Enter some more text here</p>
<p>Enter some more text here</p>
<p>Enter some more text here</p>
</div>
<div class="col-md-4 cols">
<p>Enter some more text here</p>
<p>Enter some more text here</p>
<p>Enter some more text here</p>
<p>Enter some more text here</p>
</div>
<div class="cols col-md-4 cols">
<p>Enter some more text here</p>
<p>Enter some more text here</p>
<p>Enter some more text here</p>
<p>Enter some more text here</p>
<p>Enter some more text here</p>
<p>Enter some more text here</p>
<p>Enter some more text here</p>
<p>Enter some more text here</p>
<p>Enter some more text here</p>
<p>Enter some more text here</p>
<p>Enter some more text here</p>
<p>Enter some more text here</p>
<p>Enter some more text here</p>
</div>
</div>
</div>
I agree with previous, but I want to add one more solution.
You can use columns property and if you do that, there is a column-rule option, which adds a line perfectly between columns. Here you can read and see on examples what I meant.
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;
}