I've got a tricky problem using bootstrap 4.
In the following example, I have a row with two columns.
The first one contains a very long text without any space. The second one contains a small one, specified as "col-auto".
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<div style="background-color: red; width: 500px;" class="container">
<div class="row">
<div class="col">
THIS_IS_A_SUPER_LONG_TEXT_AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
</div>
<div class="col-auto">
RIGHT
</div>
</div>
</div>
</body>
</html>
But, unfortunately, my columns are rendered on two distinct lines, as shown in the example below.
Instead, I would like my text to wrap, and display something like that (without the spaces):
Do you know if this possible? If yes, which CSS property should I apply on which tag? I searched for something like forcing the width:auto attribute to be effective, but I don't know how.
Thanks a lot
Use break-word:
Since col will let bootstrap handle the grid automatically this is not achievable with col and the only thing you can do is adding break-word to col class and avoid the text to overflow the parent div.
.col {
overflow-wrap: break-word;
}
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<div style="background-color: red; width: 500px;" class="container">
<div class="row">
<div class="col">
THIS_IS_A_SUPER_LONG_TEXT_AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
</div>
<div class="col-auto">
RIGHT
</div>
</div>
</div>
</body>
</html>
Use bootstrap col-x-x:
On the other hand, you can achieve it with col-6 and add it to both child div to let the browser now there is two-column with the same height in the same row but since your text is too long you still have to add break-word to the related div to avoid further mess up. For better understanding bootstrap grid and find the better solution to fit your exact need I suggest to read get the bootstrap document from here or w3school document on bootstrap grid system from here.
Here's the snippet to let it happen:
div.row>div:first-of-type.col-6 {
overflow-wrap: break-word;
}
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<div style="background-color: red;" class="container">
<div class="row">
<div class="col-6">
THIS_IS_A_SUPER_LONG_TEXT_AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
</div>
<div class="col-6">
RIGHT
</div>
</div>
</div>
</body>
</html>
NOTE: to avoid further issues I suggest to remove width: 500px; from the parent division.
Use bootstrap's .text-break if text is a plain text.
.text-break {
word-break: break-word !important; // IE & < Edge 18
overflow-wrap: break-word !important;
}
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<div style="background-color: red; width: 500px;" class="container">
<div class="row">
<div class="col text-break">
THIS_IS_A_SUPER_LONG_TEXT_AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
</div>
<div class="col-auto">
RIGHT
</div>
</div>
</div>
</body>
</html>
If it is preformatted text, text-break does not work. And since bootstrap does not have any class that wraps long preformatted text, you need to write some custom CSS.
.pre-text-wrap {
white-space: normal !important;
word-break: break-all;
}
.pre-text-wrap {
white-space: normal !important;
word-break: break-all;
}
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<div style="background-color: red; width: 500px;" class="container">
<div class="row">
<div class="col">
<pre class="pre-text-wrap">
THIS_IS_A_SUPER_LONG_TEXT_AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
</pre>
</div>
<div class="col-auto">
RIGHT
</div>
</div>
</div>
</body>
</html>
Or you may use bootstrap's .text-wrap and only word-break: break-all;.
.text-break-all {
word-break: break-all;
}
Related
I found that button inside h1 element in Skeleton isn't aligned vertically in the following snippet
https://jsfiddle.net/zzmaster/to8xcLdk/2/
<div class="row">
<div class="twelve columns">
<h2>
i am button
i am header
</h2>
</div>
</div>
</div>
I have a sneaking suspicion that line-height is the problem, but setting the equal values to h1 and to .button do not resolve this.
Make the h2 a flexbox with align-items:center and remove the margin-bottom from the a tag:
h2 {
display: flex;
align-items: center;
}
h2 a{
margin-bottom: 0 !important;
margin-right: 20px;
}
<!doctype html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" />
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css" />
</head>
<body>
<div class="container">
<div class="row">
<div class="twelve columns">
<h2>
i am button i am header
</h2>
</div>
</div>
</div>
I am building a layout with bootstrap. In the design most of the elements are boxed (so I use the "container" class).
Some rows have 1 column that is inside the container but 1 other column that needs to break out of the container and be full width.
Here is an image of what I want to achieve:
I really struggle to create that layout. Any ideas?
Here is a codepen of the code below: https://codepen.io/leonfrombeawwwer/pen/bXGvQb
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<div class="container">
<div class="row">
<div class="col-6">
<div class="green-box"></div>
</div>
<div class="col-6">
<div class="blue-box"></div>
</div>
</div>
</div>
.green-box {
background: green;
height: 200px;
}
.blue-box {
background: blue;
height: 200px;
}
I tried a container-fluid container with percentage width for the one column that needs to stay inside in boxed layout. But that pushes all the other elements f.e. header navigation too.
I also tried absolute positioning and played with flexbox. Nothing ended up in a result that is useful in all viewports.
Thanks for your help.
I found the solution now. Please find it in that codepen: [https://codepen.io/leonfrombeawwwer/pen/bXGvQb][1]
[https://codepen.io/leonfrombeawwwer/pen/bXGvQb]1
or here:
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<div class="container-fluid relative-container">
<div class="row">
<div class="col-md-6 placeholder"></div>
<div class="col-6">
<div class="green-box absolute-full-width-image"></div>
</div>
</div> <!-- .row -->
</div> <!-- .container-fluid .relative-container -->
<div class="container">
<div class="row">
<div class="col-6">
<div class="blue-box"></div>
</div>
<div class="col-md-6 placeholder"></div>
</div> <!-- .row -->
</div> <!-- .container -->
.green-box {
background: green;
height: 200px;
}
.blue-box {
background: blue;
height: 200px;
width: 120%;
}
.relative-container {
position relative;
}
.absolute-full-width-image {
position: absolute;
right: 0;
width: 110%;
}
I have 3 div, I want the 2nd div to be on the right just like a chat app. How can I achieve that with standard CSS or bootstrap. I have tried pull-right but it just messes up the layout by shifting the 3rd div up and 2nd div to top right.
<div>div1</div>
<div class="pull-right">div2</div>
<div>div3</div>
by using bootstrap you can achieve this
.child{border:2px solid #000; height:200px; margin:5px 0; min-width:100px; }
<!DOCTYPE html>
<html lang="en">
<head>
<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.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4 child pull-left"></div>
</div>
<div class="row">
<div class="col-md-4 child pull-right"></div>
</div>
<div class="row">
<div class="col-md-4 child pull-left"></div>
</div>
</div>
</body>
</html>
I have the following code using bootstrap 3:
<div class="row">
<div class="col-lg-12">
<div class="row">
<div id="test1" style="text-align:center; border-style:double; font-size:14px" class="col-lg-6">
JVM Infotech is a multifunctional company that can serve many of your educational needs.
</div>
<div id="test2" style=" border-style:double" class="col-lg-6" >
<img style="margin:auto" src="cinq1.jpg" class="img-responsive">
</div>
</div>
</div>
</div>
The size of div test1 is based on the amount of text and fontsize of test1. So the bottom border does not automatically align with div test2. I am able to fix this by changing padding values of test1. But that means each change of text to test1 will require change of padding values as well which is not good stable coding. I thought the grid system of Bootstrap 3 would adjust for this so is there something I'm missing?
There is no default way in Bootstrap 3 (There will be in 4) to make to columns of dynamic data equal height... but you could use jQuery. Here I made your two columns "sm" so they show up side by side here in the snippet, and changed the broken image to some short text:
$(function() {
var leftHeight = $('#test1').height();
var rightHeight = $('#test2').height();
if (leftHeight > rightHeight) {
$('#test2').height(leftHeight);
} else {
$('#test1').height(rightHeight);
}
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-lg-12">
<div class="row">
<div id="test1" style="text-align:center; border-style:double; font-size:14px" class="col-sm-6">
JVM Infotech is a multifunctional company that can serve many of your educational needs.
</div>
<div id="test2" style=" border-style:double" class="col-sm-6">
Less text
</div>
</div>
</div>
</div>
Without javascript you can achieve it--
It's a bootstrap experiment--the official experiment
you just need to add .row-eq-height with row class.
and add the following css.
.row-eq-height {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="row">
<div class="col-lg-12">
<div class="row row-eq-height" >
<div id="test1" style="text-align:center; border-style:double; font-size:14px;" class="col-lg-6 ">
JVM Infotech is a multifunctional company that can serve many of your educational needs.
</div>
<div id="test2" style=" border-style:double; " class="col-lg-6 " >
<img style="margin:auto" src="cinq1.jpg" class="img-responsive">
</div>
</div>
</div>
</div>
</body>
</html>
Note: it uses flex.
I feel like using margin and padding will mess with the bootstrap grid in a way that makes it not work on all devices since your going outside of the grid. If anyone can clarify this that would be awesome. Anyways I'm having issues getting the left arrow to space out away from the 3 bike images in a way that keeps everything on the page perfectly centered. I've been messing with the grid, but no matter what I do I can't get the left arrow to move away from the first bike image. See screenshot for reference. Any help is appreciated.
HTML
<!DOCTYPE html>
<html ng-app='formApp'>
<head>
<title>Bicycle App</title>
<link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
<link href="app.css" rel="stylesheet">
</head>
<body>
<div class="header">
<div class="container">
<div class='row'>
<div class='col-md-12'>
<i class="fa fa-bicycle" aria-hidden="true"><span> {{"Bike Shop"}}</span></i>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-offset-3 col-md-6">
<!-- end class not needed -->
<div class="chooseTitle">
Choose Your Bicycle
</div>
</div>
</div>
<!-- you missed md from offset, end class not needed -->
<div class="products" ng-controller="BikeController">
<div class="row">
<div class="col-md-1" id="leftArrow"><img ng-src="images/leftarrow.png"></div>
<div class="col-md-3 text-center" ng-repeat="product in products | limitTo:-3">
{{product.manufacturer}}
<img id="bikePic" ng-src="{{product.image}}">
</div>
<div class="col-md-1" id="rightArrow"><img ng-src="images/rightarrow.png"></div>
</div>
</div><!--End controller-->
</div>
<script src="bower_components/angular/angular.js"></script>
<script src="app.js"></script>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bikeimageslider.js"></script>
</body>
</html>
CSS
.header{
font-style:italic;
background-color:black;
height:60px;
color:white;
font-weight:bold;
font-size:40px;
}
.header .fa {font-style:italic;
}
.bikeSelector{
color:green;
}
.chooseTitle{
font-size:60px;
}
.products{
color: #1E90FF ;
text-align:center;
font-size:40px;
}
#bikePic{
height:100%;
width:100%;
}
<img ng-src="images/leftarrow.png">
change to
<img ng-src="images/leftarrow.png" class="img-responsive">
this will add max-width: 100%; to your image and won't break the <div class="col-md-1" id="leftArrow"> layout
In other words, your problem is that nav images is too big :)
I would rather use absolute positioning for the navigation elements.
Like
#leftArrow{
position: absolute;
left: -40px;
top: 50%;
}