How do I add a vertical line separating the two columns? - css

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.

Related

Flexbox Distribute items specific space

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>

Vertical align centre and matching heights in Bootstrap

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;
}

Using Flexbox to Responsively Wrap 3 Boxes and their Content

I've created a jsfiddle to illustrate what I'm trying to do. When you resize the window smaller, the boxes overlap. Another problem that I'm having is getting the "read more" text to go the bottom right of each box.
https://jsfiddle.net/natetg/dhaqzy29/1/
<header>header</header>
<div id='main'>
<leftCol>left
<div class="bottom">
<div class="right">read more</div>
</div>
</leftCol>
<middleCol>middle
<div class="bottom">
<div class="right">read more</div>
</div>
</middleCol>
<rightCol>right
<div class="bottom">
<div class="right">read more</div>
</div>
</rightCol>
</div>
<footer>footer</footer>

#box-container
{
display:flex;
flex-wrap:wrap;
justify-content:space-around;
}
.box
{
display:flex;
flex-direction:column;
flex:1;
min-width:250px;
height:300px;
border:1px solid black;
}
.box-title
{
font-weight:bold;
}
.box-text
{
flex:1;
}
.box-read-more
{
align-self:flex-end;
}
<div id="box-container">
<div class="box">
<div class="box-title">
Box #1 title
</div>
<div class="box-text">
Text content for the box goes here.
</div>
<div class="box-read-more">
Read more...
</div>
</div>
<div class="box">
<div class="box-title">
Box #2 title
</div>
<div class="box-text">
Text content for the box goes here.
</div>
<div class="box-read-more">
Read more...
</div>
</div>
<div class="box">
<div class="box-title">
Box #3 title
</div>
<div class="box-text">
Text content for the box goes here.
</div>
<div class="box-read-more">
Read more...
</div>
</div>
</div>

Make a container fluid properly enclose text

I am making a page that uses Twitter Bootstrap. I just want a line to be written in a container that is responsive.
What I have tried is:
<div class="container-fluid">
<div class="row-fluid">
<div class="span10" style="background-color:red;
border-radius:30px;color:powderBlue">
<p style="font-size: 22px">My sample text here.</p>
</div>
</div>
</div>
But this is not working correctly because some of my text is going out of bounds of the red background.
Any help?
Thanks

Leaving some padding from the left might work.
Try this
<div class="container-fluid">
<div class="row-fluid" >
<div class="span10" style="background-color:red;padding-left:10px;border-radius:30px;color:powderBlue">
<p style="font-size: 22px">My sample text here.</p>
</div>
</div>
</div>

Just put padding on the span10 class
<div class="container-fluid">
<div class="row-fluid">
<div class="span10" style="background-color:red;
border-radius:30px;color:powderBlue; padding: 8px 30px;">
<p style="font-size: 22px">My sample text here.</p>
</div>
</div>
</div>

Span2 Twitter Bootstrap in a Small Div

I would like to make a small, two-column menu with bootstrap. The idea is to have a div that is 200px by 300px high. The structure would, I think, look like this:
<div id="menu">
<div class="container">
<div class="row-fluid">
<div class="span2">
<div class="span1">
<div class="filterEl">
some text
</div>
</div>
<div class="span1">
<div class="filterEl">
some text
</div>
</div>
</div>
</div>
<div class="row-fluid">
<div class="span2">
<div class="span1">
<div class="filterEl">
some text
</div>
</div>
<div class="span1">
<div class="filterEl">
some text
</div>
</div>
</div>
</div>
</div>
</div>
CSS:
.menu{
width:200px;
height: 300px;
background-color:green;
}
.filterEl{
position: relative;
height:40px;
border: solid black 2px;
}
The issue is that everything gets mashed to the upper left corner of the menu div. How can I get everything evenly spaced in the meny div as if I were using Bootstrap on a full page?

From your example, I think you want the span2 div to actually be your row-fluid as well:
<div id="menu">
<div class="container">
<div class="row-fluid span2">
<div class="span1">
<div class="filterEl">
some text
</div>
</div>
<div class="span1">
<div class="filterEl">
some text
</div>
</div>
</div>
<div class="row-fluid span2">
<div class="span1">
<div class="filterEl">
some text
</div>
</div>
<div class="span1">
<div class="filterEl">
some text
</div>
</div>
</div>
</div>
</div>
See this jsfiddle for a demo.

Parent of every column should be a row.
So, try below structure.
<div id="menu">
<div class="container">
<div class="row-fluid">
<div class="span2">
<div class="row-fluid">
<div class="span1">
<div class="filterEl">
some text
</div>
</div>
<div class="span1">
<div class="filterEl">
some text
</div>
</div>
</div>
</div>
</div>
<div class="row-fluid">
<div class="span2">
<div class="row-fluid">
<div class="span1">
<div class="filterEl">
some text
</div>
</div>
<div class="span1">
<div class="filterEl">
some text
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Reference

Resources