I have this code:
<div class="well details-form">
<div class="row">
<div class="col-md-6">Test:</div>
<div class="col-md-6" style="white-space: pre-wrap">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</div>
</div>
</div>
I am trying to get the div that contains the long text to wrap. That is just a test, but the length could be the same, hence the need for wrapping.
How do I get this to wrap?
Here is a Bootply.
Any help is appreciated.
Use word-break: break-all instead of white-space: pre-wrap.
Read more at MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/word-break
.details-form {
width: 70%;
margin: auto;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<div class="well details-form">
<div class="row">
<div class="col-md-6">Test:</div>
<div class="col-md-6" style="
word-break: break-all;
">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</div>
</div>
</div>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
The style style="white-space: pre-wrap" only works where there's a space encountered in the text.
Related
So bit of background on my issue. I'm using an external carousel and I am trying to modify each image section to include text. There seems to be an overflow:hidden on the sp-carousel-frame class that is making it not visible but without this the unselected images on either side go full size.
I basically need the item-text class to be displayed.
I really hope I explained this ok.
I'm going include an image that shows the issue below.
HTML
<script src="https://wordpress-84115-1849710.cloudwaysapps.com/wp-content/themes/inspiration-marketing-theme/assets/js/carousel.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<div class="container collaboration-header">
<div class="row">
<div class="col-md-12">
<h1>Collaboration and Teamwork</h1>
</div>
</div>
</div>
<div class="container main-carousel">
<div class="row">
<div class="col-md-12">
<div class="sp-carousel-frame sp-carousel-frame-pos">
<div class="sp-carousel-inner">
<div class="sp-carousel-item" style="overflow: visible !important;">
<img src="https://gdxdesigns.com/wp-content/uploads/2021/04/Main-Slider-Image.jpg"/>
<div class="item-text">
Hello World
</div>
</div>
<div class="sp-carousel-item"><img src="https://gdxdesigns.com/wp-content/uploads/2021/04/Left-Slider-Image.jpg"/>
</div>
<div class="sp-carousel-item"><img src="https://gdxdesigns.com/wp-content/uploads/2021/04/Right-Slider-Image.jpg"/>
</div>
</div>
</div>
</div>
</div>
</div>
CSS
.collaboration-header h1{
text-align: center;
padding: 1.5em 0;
}
.main-carousel {
margin-bottom: 20% !important;
}
The JSFiddle Below:
Here is my JSFiddle
Add Class this carousel-caption on item-text
<div class="item-text carousel-caption">
Hello World
</div>
https://jsfiddle.net/lalji1051/3hyb82fg/1/
OK I got it solved basically although I probably need to tweak it a bit to get it perfect what I did was disable the overflow:hidden on the sp-carousel-frame and change it to visible. Then on the parent div col-md-12 I attached another class called overflow:
HTML
<div class="col-md-12 overflow">
<div class="sp-carousel-frame sp-carousel-frame-pos">
<div class="sp-carousel-inner">
<div class="sp-carousel-item" style="overflow: visible !important;">
<img src="/wp-content/uploads/2021/04/Main-Slider-Image.jpg"/>
<div class="item-text">
Hello Hows it going like
</div>
</div>
<div class="sp-carousel-item"><img src="/wp-content/uploads/2021/04/Left-Slider-Image.jpg"/>
</div>
<div class="sp-carousel-item"><img src="/wp-content/uploads/2021/04/Right-Slider-Image.jpg"/>
</div>
</div>
</div><!-- End sp-carousel-frame -->
<hr />
</div><!-- Close Col-md-12 -->
CSS:
.sp-carousel-frame {
overflow: visible !important;
}
.overflow {
overflow: hidden !important;
padding: 0 !important;
}
Updated JSFiddle
Here is the jsfiddle
fiddle
code:
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container-fluid">
<div class="col-xs-12">
<div class="col-xs-5" style="padding-right:0px;">
<img src="https://images-na.ssl-images-amazon.com/images/M/MV5BMjI4NzA5OTg1OF5BMl5BanBnXkFtZTgwNzc0MjU5OTE#._V1_SY1000_CR0,0,675,1000_AL_.jpg" class="img-responsive"/></div>
<div class="col-xs-7" style="background-color:#CBD4C2; padding-left:0;">
<p>asjkfnaskjdnkasdnkasnsdkjasndkjansdkjnasjdbaskjsdnbjhbdskajad</p>
kjadsbnjkasndkjasndkjasndkjasndkjasndkjnaskdjnaskjdnsakjdnaskjdnkjasdn
</div>
</div>
</div>
You can use some css to fix this:
.wrap-text {
word-wrap: break-word;
}
And then:
<p class="wrap-text">asjkfnaskjdnkasdnkasnsdkjasndkjansdkjnasjdbaskjsdnbjhbdskajad
kjadsbnjkasndkjasndkjasndkjasndkjasndkjnaskdjnaskjdnsakjdnaskjdnkjasdn</p>
jsfiddle
add word-break:break-word to its container
see below snippet or fiddle > jsFiddle
.col-xs-7{
word-break:break-word;
}
<div class="container-fluid">
<div class="col-xs-12">
<div class="col-xs-5" style="padding-right:0px;">
<img src="https://images-na.ssl-images-amazon.com/images/M/MV5BMjI4NzA5OTg1OF5BMl5BanBnXkFtZTgwNzc0MjU5OTE#._V1_SY1000_CR0,0,675,1000_AL_.jpg" class="img-responsive"/></div>
<div class="col-xs-7" style="background-color:#CBD4C2; padding-left:0;">
<p>asjkfnaskjdnkasdnkasnsdkjasndkjansdkjnasjdbaskjsdnbjhbdskajad</p>
kjadsbnjkasndkjasndkjasndkjasndkjasndkjnaskdjnaskjdnsakjdnaskjdnkjasdn
</div>
</div>
</div>
but i suggest you don't use plain text. instead wrap all the text inside a tag, for example a <p> like so :
<p>asjkfnaskjdnkasdnkasnsdkjasndkjansdkjnasjdbaskjsdnbjhbdskajad
kjadsbnjkasndkjasndkjasndkjasndkjasndkjnaskdjnaskjdnsakjdnaskjdnkjasdn</p>
( also use break-word )
I have this row and column inside container
<div class="container">
<div class="row">
<div class="col-md-4" >
<h1>About</h1>
<p>asdasdsadasdasdassdasdasdadassssssssssssssssssssssssssssssssssssssssssss</p>
</div>
</div>
</div>
How can i make it go to the next line when it reach the end of the column?
Use word-wrap: break-word
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
.break-text p {
word-wrap: break-word;
}
<div class="container break-text">
<div class="row">
<div class="col-xs-4">
<h1>About</h1>
<p>asdasdsadasdasdassdasdasdadassssssssssssssssssssssssssssssssssssssssssss</p>
</div>
</div>
</div>
Just add to your CSS
.word-wrap{word-wrap: break-word;}
Then to your paragraph add the class
<p class="word-wrap">asdasdsadasdasdassdasdasdadassssssssssssssssssssssssssssssssssssssssssss</p>
Another option is to apply it to the whole site or all paragraphs, for example:
body {word-wrap: break-word;}
OR
p{word-wrap: break-word;}
Add style to table cell
td
{
white-space: initial;
}
i'm using bootstrap 2 and I need to have 3 span, but the one in the middle should be really small to handle an image to show/hide the span on the left.
The problem is that I can't put all three span on the same line. Looks like the span with the image is taking the all place and not just 10px
Here is my code:
<style>
.myspan {
width:10px;
}
<div class="container-fluid">
<div class="row-fluid">
<div class="span3" style="background-color: red">this is fluid</div>
<div class="myspan"><img src="~/Images/bullet.png" /></div>
<div class="span9" style="background-color: blue">yeah!</div>
</div>
</div>
You can use span3, span1 and span8 to occupy the 12 column grid and line them up. Use a custom class to specify a width and remove the margin. But use the custom CSS in a higher priority order i.e. new file, loading it after all the CSS so that you need not use !important. Try to avoid inline styles as well.
$('.span1').on('click', function() {
$('.span3').toggle('slow');
});
.small-span img {
margin-left: -15px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row-fluid">
<div class="span3" style="background-color: tomato">this is fluid</div>
<div class="span1 small-span">
<img src="http://placehold.it/25x25" />
</div>
<div class="span8" style="background-color: lightblue">yeah!</div>
</div>
</div>
Just started playing around with bootstrap 3 and I can't get gutters between columns to work.
I created the most basic code to test with:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/js/bootstrap.min.js"> </script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/css/bootstrap.min.css" rel="stylesheet" media="screen" />
<style>
.box1 {
background-color: green;
}
.box2 {
background-color: blue;
}
</style>
</head>
<div class="container">
<div class="row">
<div class="col-lg-4 box1">
<h1>Test</h1>
</div>
<div class="col-lg-8 box2">
<h1>Test2</h1>
</div>
</div>
</div>
</html>
And the result is just one big green/blue box without any gutter in between the two columns.
I have also tried it on a fiddle with no luck http://jsfiddle.net/Tgkkb/
What am I missing?
Bootstrap 3 switched to using padding for the gutters rather than margins. So, the content is parted, but the boxes aren't. And a background-color will fill the padding as well.
Though, you should be able to get the desired effect by setting the background on inner boxes:
<div class="row">
<div class="col-sm-4">
<div class="box1">
<h1>Test</h1>
</div>
</div>
<div class="col-sm-8">
<div class="box2">
<h1>Test2</h1>
</div>
</div>
</div>
http://jsfiddle.net/PFxUk/
Though, the goal is just to apply the background to a single, wrapping child. So, if the headers definitely won't have any siblings, then you can possibly forgo the additional <div>s:
<div class="row">
<div class="col-sm-4">
<h1 class="box1">Test</h1>
</div>
<div class="col-sm-8">
<h1 class="box2">Test2</h1>
</div>
</div>
http://jsfiddle.net/G2gbG/
If you want to set the padding or margin for your columns, you can use the row-no-gutters class on the row (introduced in v3.4.0) and add your own padding and background.
https://getbootstrap.com/docs/3.4/css/#grid-remove-gutters