Twitter Bootstrap Text in Div extends beyond its column - html

I created a test html page using Twitter Bootstrap 4 Alpha 2. As shown below I have three divs with col-md-4 each. The first div has text wrapped in p. The problem is the text extends beyond it's container occupying the space of the other 2 divs. How do you keep the text in its own column?
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Bootstrap Template</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" />
<style>
div {
border-style: solid;
border-color: #0000ff;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4"><p>Box 1 aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p></div>
<div class="col-md-4"><p>Box 2</p></div>
<div class="col-md-4"><p>Box 3</p></div>
</div>
</div>
<script src="bower_components/jquery/dist/jquery.mi1n.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>
</body>
</html>

This is 100% work for you:
p{word-break: break-all;}

Just Add 'overflow:auto;' to your Style code.
border-style: solid;
border-color: #0000ff;
overflow:auto;

Related

make the two parallels lines vertically at the center of an content from left and right

I am facing one issue, maybe not a big one but I am not able to figure out how can I do
I want the double line in between the content of a div left (Subtotal) and right ($200).
Can anyone help me with this?
I have tried but I am not able to make it vertically middle.
Attaching screenshot of how I want it to look:
enter image description here
CODE SNIPPET I AHVE TRIED:
.row{
display: flex;
}
.dividerLine{
display: table-cell;
vertical-align: middle;
text-align: right;
border: 2px solid red;
height: 7px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-3 start-lines">
<p class="order-receipt-label light-label">
<span>Subtotal</span>
</p>
</div>
<div class="col-sm-4 dividerLine" style="background-color:lavenderblush;">
</div>
<div class="col-3 start-lines">
<p class="order-receipt-label light-label">
<span>Subtotal</span>
</p>
</div>
</div>
</div>
</body>
</html>
product total and I want to make the double line in between them
Attaching the screenshot how it looks:
You can achieve this by giving .row the align-items: center; property and removing margin from the p tags inside .start-lines.
You can use CSS flex align center option for this.
.row {
display: flex;
align-items: center;
}
.mb-0 {
margin-bottom: 0 !important;
}
.dividerLine {
border-top: 2px solid red;
border-bottom: 2px solid red;
height: 7px;
background-color: lavenderblush;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-sm-3">
<p class="order-receipt-label light-label mb-0">
<span>Subtotal</span>
</p>
</div>
<div class="col-sm-6">
<div class="dividerLine"></div>
</div>
<div class="col-sm-3">
<p class="order-receipt-label light-label mb-0">
<span>Subtotal</span>
</p>
</div>
</div>
</div>
</body>
</html>
That looks like a giant equals sign, so let's make it a giant equals sign. That way we can be sure that it will align with the other characters vertically correctly without us having to do any other vertical positioning.
The way this can be done is to put an = character in the central column at the standard font-size but scale in the x direction. We put a huge scale in just so it will cover the whole central column whatever the width. Of course this isn't seen as overflow is set to hidden.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
text-align: center;
}
p.wide-font {
transform: scale(10000, 1);
color: gold;
overflow: hidden;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-3" style="text-align: right;">
<p style="text-align: right;">SUBTOTAL</p>
</div>
<div class="col-sm-4" style="overflow: hidden;">
<p class="wide-font">=</p>
</div>
<div class="col-3">
<p style="text-align: left;">SUBTOTAL</p>
</div>
</div>
</div>
</body>
</html>

How to add colors on the corner of card CSS?

I have an example basic bootstrap card like below
Example 1:
I want to draw blue and green color side by side but I only could draw blue like below
Example 2:
When I try to give both classes at the same time it doesnt work.The one is always getting overwritten.
<div class="card blue green">
<div class="card-body">Basic card</div>
</div>
How to add them side by side?Seems like :before doesnt help.
Expected
Snippet is available below
.green:before{border-left: 5px solid #73BD07;}
.blue:before{border-left: 5px solid #4D33DC;}
.card:before{content: '';position: absolute;top: 0;left: 0;height: 100%;}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Card</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Basic Card</h2>
<div class="card blue green">
<div class="card-body">Basic card</div>
</div>
</div>
</body>
</html>
The problem is your green:before is overwritten by card:before since these classes are on the same div element. You can avoid this by using .green:after instead.
.green:after{
content: '';
border-left: 5px solid #73BD07;
position: absolute;
left: 5px;
top: 0;
height: 100%;
}
.blue:before{border-left: 5px solid #4D33DC;}
.card:before{content: '';position: absolute;top: 0;left: 0;height: 100%;}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Card</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Basic Card</h2>
<div class="card blue green">
<div class="card-body">Basic card</div>
</div>
</div>
</body>
</html>
Add a green border ::before pseudo elements.
.green{position:relative;}
.green::before{
border-left: 5px solid #73BD07;
position:absolute;
content:'';
top:0;left:0;bottom:0;
}
.blue{border-left: 5px solid #4D33DC !important;}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Card</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Basic Card</h2>
<div class="card blue green">
<div class="card-body">Basic card</div>
</div>
</div>
</body>
</html>

Bootstrap: overlapping columns

I have the following code :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.class1 {height: 100px; background-color: DarkSlateGrey}
</style>
</head>
<body>
<div class="container-fluid class1">
<div class="row">
<div class="col-xs-6">Website</div>
<div class="col-xs-1">Services</div>
<div class="col-xs-1">Services</div>
<div class="col-xs-1">Services</div>
<div class="col-xs-1">Services</div>
<div class="col-xs-1">Services</div>
<div class="col-xs-1">Services</div>
</div>
</div>
</body>
</html>
The problems with me are:
When i do "inspect" to see the website on mobile:
-the background doesn't take all the width of mobile.
-Words "services" are overlapped, i want them to be separated with some spaces between them
How can I avoid these problems? Any help will be appreciated
Your width for each child inside the row is simply too small. For mobile size, you are setting the div to only 1/12 width of the mobile screen. You can add padding and overflow: hidden to it so it doesn't go over the desired width, but that doesn't seem ideal to me. I added a sample code based on your codes as an option for you to explore. If the screen is less than >=720px (col-md) then your first child in the row will take full width, and give more space for the rest so it looks more presentable.
.class1 {
height: 100px;
background-color: DarkSlateGrey
}
.tomato{
background: tomato;
}
.white{
background: white;
}
row div{
text-align: center
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
</style>
</head>
<body>
<div class="container-fluid class1">
<div class="row">
<div class="tomato col-xs-12 col-md-6">Website</div>
<div class="white col-xs-4 col-md-1">Services</div>
<div class="tomato col-xs-4 col-md-1">Services</div>
<div class="white col-xs-4 col-md-1">Services</div>
<div class="tomato col-xs-4 col-md-1">Services</div>
<div class="white col-xs-4 col-md-1">Services</div>
<div class="tomato col-xs-4 col-md-1">Services</div>
</div>
</div>
</body>
</html>

Foundation 6 columns grid classes not being applied

I am just trying to get a simple project started using foundation 6. My very simple html is:
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Foundation for Sites</title>
<link rel="stylesheet" href="css/foundation.min.css">
</head>
<body>
<div class="row">
<div class="large-2 columns">
<h1>test</h1>
</div>
<div class="large-2 columns">
<h1>test2</h1>
</div>
</div>
<script src="js/vendor/jquery.js"></script>
<script src="js/vendor/what-input.js"></script>
<script src="js/vendor/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
However, when testing the website, the column classes are not getting applied and the grid is not working as it should be. Is there something I am missing?
Unless you're using < foundation 6, you need to be using the XY-grid because the old float grid was deprecated.
Check this out: https://foundation.zurb.com/sites/docs/xy-grid.html
Your html would look something like this using the XY-grid:
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Foundation for Sites</title>
<link rel="stylesheet" href="css/foundation.min.css">
</head>
<body>
<div class="grid-x">
<div class="cell large-2">
<h1>test</h1>
</div>
<div class="cell large-2">
<h1>test2</h1>
</div>
</div>
<script src="js/vendor/jquery.js"></script>
<script src="js/vendor/what-input.js"></script>
<script src="js/vendor/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
Just wanted to add that you can still use the float grid in Foundation 6. If you visit the download page, you can select "Float Grid" under "Grid" in the left column and download that custom build. You do not have to use the XY Grid.
If you do that, your existing grid markup will work.

There is extra vertical space between block-level elements when setting initial-scale=1.x in Chrome

If I add the following meta tag to my mobile web page , there is extra space between block-level elements in vertical direction.
<meta name="viewport" content="initial-scale=1.2,user-scalable=no" id="metaViewwport">
How to solve the problem?
The complete code:
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.2,user-scalable=no" id="metaViewwport">
<title>test</title>
<style type="text/css">
html,body
{width:100%;height: 100%;margin:0px;padding:0px;}
.slide-container
{height:200px;width:100%;background-color:black;color:white;
box-sizing:border-box;
box-shadow:none;
border:0px;
padding:0px;
margin:0px;
}
</style>
</head>
<body>
<article style="height:100%;width:100%;">
<section class="slide-container" style="">
1
</section>
<section class="slide-container">2</section>
<section class="slide-container">
3
</section>
<section class="slide-container">
4
</section>
</article>
</body>
</html>
your problem is your viewport more than likely. Its set to 1.2, rather than 1.
add this line instead
<meta name="viewport" content="width=device-width, initial-scale=1">
I fixed by add height=device-height to the meta viewport. Just like:
<meta name="viewport" content="initial-scale=1.171875,height=device-height,width=320px, user-scalable=no">