In the mobile device the text is like this:
but I need it to stay like this:
The code I'm using:
<div class="container-fluid">
<div class="row" style="background-color:#071885;">
<div class="col-md-12 text-center">
<h1 style="color: #000;font-weight: bold;background: gold;font-size: 24px; padding: 5px;">
LONG TITLE LONG TITLE LONG TITLE LONG TITLE LONG TITLE
</h1>
</div>
</div>
</div>
I already tried no-wrap but that did not work.
UPDATE:
#kukkuz
You can use a flexbox for this:
Set display: inline-flex on the row and make use of the fact that an inline element will extend to its contents.
Now you can use text-nowrap class or white-space: nowrap to get the effect that you need - see demo below:
.row {
display: inline-flex; /* ensures the text stays inside */
white-space: nowrap;
min-width: 100vw; /* sets 100% width in desktop */
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<div class="container-fluid">
<div class="row" style="background-color:#071885;">
<div class="col-md-12 text-center">
<h1 style="color: #000;font-weight: bold;background: gold;font-size: 24px; padding: 5px;">
LONG TITLE LONG TITLE LONG TITLE LONG TITLE LONG TITLE
</h1>
</div>
</div>
</div>
remove this class col-md-12 and set styles that you want
Related
I have a sidebar where I want to give the heading and the description a max of two lines. However, the height of the span should always be two rows long in order to have the same vertical alignment. Also, I don't want the the last word to break, it should just replace the it with .... For example if the last word wouldn't fit in the given space, it shouldn't just break the word into the next row, instead it should look like this this is my descirpti....
The word should just be cutted and be appended by ....
Also, is it possible to add a class to every div where the text got cutted? I want to have a special style for those cases!
I want to solve this with the CSS property text-overflow
.max-width-200 {
max-width: 900px;
}
span {
overflow: hidden;
text-overflow: ellipsis;
}
.heading-wrapper ,.description-wrapper {
height: 50px
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
<div class="row max-width-200">
<div class="col-3">
<img src="https://picsum.photos/180">
</div>
<div class="col-7 d-flex flex-wrap">
<div class="col-12 no-padding align-self-start heading-wrapper">
<span>This is my heading, its not very long</span>
</div>
<div class="col-12 no-padding align-self-center description-wrapper">
<span>This is my description. This description is longer then it should be. It should only be two rows large but unfortuntly its longer then two rows.</span>
</div>
</div>
</div>
<hr>
<div class="row max-width-200">
<div class="col-3">
<img src="https://picsum.photos/180">
</div>
<div class="col-7 d-flex flex-wrap">
<div class="col-12 no-padding align-self-start heading-wrapper">
<span>This is my heading, Its longer then it should be.. someone fucked it up. Please fix me to be only two rows long!</span>
</div>
<div class="col-12 no-padding align-self-center description-wrapper">
<span>This is my description. This description is longer then it should be. It should only be two rows large but unfortuntly its longer then two rows.</span>
</div>
</div>
</div>
</div>
You can use:
span {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
Usually text-overflow: ellipsis; needs a white-space attribute to be set, in order to work. See: https://stackoverflow.com/a/7680712/8177490
You should also check for browser compatibility before using it.
If you don't want the heading to be affected change its tag from span to p or some h tag.
I need to write html page, that represent customer requests, (I do it with collapse). but a have a problem in mobile view. if the title too long, the line break to 2 lines,and I want the status always aligned right after title.
In addition I need to limit the number of characters in the title and add 3 points if needed.
How can I do this?
Example:
The HTML here:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-xs-1" >1.5.16</div>
<div class="col-md-1 hidden-xs" >235266 -</div>
<div class="col-xs-4" >Title</div>
<div class="col-md-1 hidden-xs" >1.7.16</div>
<div style="float:left;" class="col-xs-3 col-sm-3 hidden-md">| Status</div>
</div>
add this class truncate to title and
this css
.truncate { width: 150px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
and you can give 'pull-right' class to status for align right
I am using Bootstrap 4 Alpha 5 and I have the following HTML:
<div class="home-content">
<div class="container">
<div class="row flex-items-xs-middle">
<div class="col-md-7">
<h1 class="site-title text-xs-center text-md-left">
<span class="name">I'm Shivam Paw</span>
<span class="title">I create beautiful and bespoke websites to fit your needs</span>
</h1>
</div>
<div class="col-md-5">
<img src="https://www.shivampaw.com/wp-content/uploads/2016/10/shivampaw.png" class="float-md-right img-fluid logo-me mx-auto" alt="Shivam Paw">
</div>
</div>
</div>
</div>
However, if you see the image below then you will see that the content is misaligned to the left. I saw a post on this on SO but it said you have to put the row class in a container which I have already done.
You can see the site live at https://www.shivampaw.com
I looked at the .row CSS which has margin for left and right of -15px. Removing those margins fixed it but I don't think that's how it should be?
If this is what you expect then look at your CSS. This is the line centering your content
.text-xs-center {
text-align: center!important;
}
This should fix it though
.site-title {
font-size: 36px;
color: white;
font-weight: bold;
text-align: left !important;
}
Turns out I had some offending CSS in my style.css:
*, img.full-size{
max-width: 100%;
}
Changing it to:
img.full-size{
max-width: 100%;
}
Fixed the problem.
The desired display is to have the text in the left column vertically centered (middle). I have not been able to achieve that. This is because the picture in the right column is taller than the 2 paragraphs of text. Interestingly, the orange div is only as high as the paragraphs.
The inline styles are only there for debug.
The design being used is responsive so I'm assuming setting a height in px will make it non-responsive.
Edit: The inline debug styles were misleading so have been removed
<div class="row">
<div class="col-md-8">
<div class="vertical-align-center">
<p>First small paragraph with other elements in it</p>
<p>Second small paragraph with other elements in it</p>
</div>
</div>
<div class="col-md-4">
<img class="img-responsive img-md-size" src="blog.localhost/klequis/wp-content/uploads/2016/0521/DevBoxRunning.png">
</div>
</div>
In Bootstrap 4 and above, you can add the align-self-center class to the column div to vertically center it.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-8 align-self-center">
<p>First small paragraph with other elements in it</p>
<p>Second small paragraph with other elements in it</p>
</div>
<div class="col-4">
<img src="//lorempixel.com/150/300/" class="img-responsive" />
</div>
</div>
Edited Answer
If you want for the two things to be the same height, you're running into a problem that has existed since float became a thing. This Stackoverflow Question is from 2009 and it's about the same thing. You can choose to use the method described in that post, which basically equates to setting the bottom margin to some crazy huge number in order to pull the bottom edge down but that gets hidden with a overflow div, like so. Unfortunately, this doesn't net you a vertical center on the text since the thing that's actually stretching all that height is the margin/padding of the box, not the inner height.
.vertical-align-center {
display: table;
height: 100%;
width: 100%;
}
.vertical-align-center .valign-center {
display: table-cell;
vertical-align: middle;
height: 100%;
}
.vertical-align-center > div {
padding-bottom: 200em;
margin-bottom: -200em;
}
.overflow-hidden {
overflow: hidden;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div style="background-color:blue;" class="row overflow-hidden">
<div style="background-color:orange; height:1000px;" class="col-xs-8 vertical-align-center">
<div style="background-color: green;" class="valign-center">
<p>First small paragraph with other elements in it</p>
<p>Second small paragraph with other elements in it</p>
</div>
</div>
<div class="col-xs-4">
text
</div>
</div>
Alternate
Now the next part is for display:flex, something more uncommon, and it isn't fully supported by all mainstream browsers yet. According to Can I Use a good chunk of browsers can use it, but for things like IE it's going to be buggy.
NOTE: This is going to override bootstrap's display:float and it may not be exactly what you would like to see. I will leave it to you to figure out the spacing. CSS Tricks has a really nice side-by-side for the flex-container and the flex-items.
.row.flex-override {
display: -ms-flex;
display: -webkit-flex;
display: flex;
justify-content: space-around;
}
.row.flex-override > .vertical-align-center {
display: -ms-flex;
display: -webkit-flex;
display: flex;
}
.row.flex-override .vertical-align-center .valign-center {
align-self: center;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="row flex-override">
<div class="col-xs-8 vertical-align-center" style="background-color: green;">
<div class="valign-center">
<p>First small paragraph with other elements in it</p>
<p>Second small paragraph with other elements in it</p>
</div>
</div>
<div class="col-xs-4" style="background-color:orange;">
<img src="//lorempixel.com/500/500/cats/1" class="img-responsive" />
</div>
</div>
Original Answer
You had a few random little errors in your code, the biggest of which was you put height=100% in the inline style. It should read height:100%
Note: you don't really need the valign-center class, but it makes it a little bit more readable in my opinion.
Happy Coding.
.vertical-align-center {
display: table;
height: 100%;
width: 100%;
}
.vertical-align-center .valign-center {
display: table-cell;
vertical-align: middle;
height: 100%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div style="background-color:blue;" class="row">
<div style="background-color:orange; height:1000px;" class="col-xs-8 vertical-align-center">
<div style="background-color: green;" class="valign-center">
<p>First small paragraph with other elements in it</p>
<p>Second small paragraph with other elements in it</p>
</div>
</div>
<div class="col-xs-4">
text
</div>
</div>
I have a grid divided into 2. One side holds an image and the other side some text. Currently it looks as follows:
I want to make it look as follows:
I am looking to get rid of the black spot and center the text. There is no issue in centering it horizontally but unable to do it vertically to fit nicely in relation to the image. Please advice if there is any pre built class already available in bootstrap or I need to rewrite additional CSS.
The following are my current html and css.
HTML
<div class="col-md-6 custom-info">
<img src="img/test.jpg" class="img-responsive center-block">
</div>
<div class="col-md-6 custom-info text-center" style="text-align: left;">
<h1>Discover Our Latest Colourful addition</h1>
<h3>Explore our range of text text text text.</h3>
<h3>View the menu.</h3>
</div>
CSS
.custom-info{
background-color: #c0d023;
padding: 30px;
}
After Editing:
You may try this.
HTML
<div class="row xclassrow">
<div class="col-md-6 custom-info">
<img src="http://i.imgur.com/VpelmxT.png?1" class="img-responsive center-block">
</div>
<div class="col-md-6 custom-info text-left">
<div class="content">
<h1>Discover Our Latest Colourful addition</h1>
<h3>Explore our range of text text text text.</h3>
</div>
<h3>View the menu.</h3>
</div>
CSS
.xclassrow{
background-color:#C0D123
}
.content {padding:40px 0px}
.custom-info{
background-color: #c0d023;
padding: 30px;
}
Hope this works. Do comeback if still any issue.!!
EDIT : Removed the xclass and wrap the content in a new class. Check DEMO
TLDR;
Use display:table with display:table-cell to accomplish vertical centering of elements.
For newer browser you can use flexbox. I will demonstrate both approaches here.
Old but secure way (may not work for you here)
What I do most of the time is define 2 helper classes called t and td
*This works if you have a defined height of the containing element
The code then looks something like this:
HTML
<div class="col-md-6 custom-info text-center" style="text-align: left;">
<div class="t">
<div class="td">
<h1>Discover Our Latest Colourful addition</h1>
<h3>Explore our range of text text text text.</h3>
<h3>View the menu.</h3>
</div>
</div>
</div>
CSS
.t {
display: table;
height: 100%;
}
.td {
display: table-cell;
vertical-align: middle;
height: 100%;
}
Jsfiddle
Old and even more secure way
Since you know that your 2 columns are 6+6 and that makes 12 columns total width.
Make 1 long element col-md-12 and make a table inside it (either with regular table elements or the helper classes i used in the above example.
HTML
<div class="col-12 specific-class">
<div class="t">
<div class="td">
<img src="http://static.adzerk.net/Advertisers/d936d243e9de4c989a6c95b031eb11d6.png" alt="">
</div>
<div class="td">
<h1>Discover Our Latest Colourful addition</h1>
<h3>Explore our range of text text text text.</h3>
<h3>View the menu.</h3>
</div>
</div>
</div>
CSS
.specific-class .td {
width: 50%;
background: rgba(0,0,0,.2);
}
.t { display: table; height: 100%; width: 100%; }
.td { display: table-cell; vertical-align: middle; height: 100%; }
Jsfiddle
Note: added vertical align to the image to remove small spacing under it
The mighty flexbox (the future looks bright)
Flexbox is a sight for sore eyes for us fe-devs and will be an integral building block of the future www.
HTML
<div class="col-12 specific-class">
<div class="fl-element">
<img src="http://static.adzerk.net/Advertisers/d936d243e9de4c989a6c95b031eb11d6.png" alt="">
</div>
<div class="fl-element">
<h1>Discover Our Latest Colourful addition</h1>
<h3>Explore our range of text text text text.</h3>
<h3>View the menu.</h3>
</div>
</div>
CSS
.specific-class {
display: flex;
align-items: center;
}
.specific-class .fl-element {
width: 50%;
}
Jsfiddle