How to fix spaces in bootstrap justified text columns? - html

I'm creating a div that needs to have two columns, each one with justified alignment. Problem is: it looks good when I use two divs bootstrap col-lg6- , but when it comes to col-md-6, col-sm-6, it results in a lot of spaces between words in order to maintain the justified alignment when dealing with different sized words.
https://imgur.com/a/Fm4gSMB [link for image samples]
1) I've already tried using pure CSS:
#third-div{
background-color: #904e45;
text-align: justify;
column-count:2;
-webkit-column-gap: 40px;
-moz-column-gap: 40px;
column-gap: 40px;
}
2) tried to use word-break: break-all;
but ofc this breaks the words with no grammatical logic.
3) Now I'm trying to use two Bootstrap cols inside a bootstrap row, like:
<div id="third-div" class="page-div">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6">
<h1>Lots of text</h1>
<h2 class="fio">But divided: two columns</h2>
<p> a lot of text here </p>
</div>
<div class="col-lg-6 col-md-6 col-sm-6">
<p> a lot of text here </p>
</div>
</div>
</div>
.page-div{
padding: 15%;
padding-left: 15%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
#third-div{
background-color: #904e45;
text-align: justify;
}

That's the way as text-align: justify works. It appends equal space between words to keep the text justified, if you fix it it wouldn't be justified anymore.
I think the solution is keeping one column on a small screen
<div id="third-div" class="page-div">
<div class="row">
<div class="col-lg-6 col-md-12 col-sm-12">
<h1>Lots of text</h1>
<h2 class="fio">But divided: two columns</h2>
<p> a lot of text here </p>
</div>
<div class="col-lg-6 col-md-12 col-sm-12">
<p> a lot of text here </p>
</div>
</div>
</div>
This way they should go under each other like a single column and there would be enough space to optimize the justifying the text.

In some browsers (FireFox) you can set the justification the spacing to use letter spacing (acts similar to adjusting kerning in software like In-Design) instead of the default word spacing. I think it looks better for some text in narrow columns.
See CSS-tricks' Text-Justify

Related

Resizing two images at the same line on Bootstrap 3

I'm trying to put two images at the same line with Bootstrap, using two different columns. I aligned them, used some background color two see the result, etc.
But, when I change the resolution to see the responsive effect, they not resize by equal! the images haven't the same width, but yes, the same height. Does anyone have a guess?
Here is the HTML:
.coresq {
background-color: #131313;
}
.cordir {
background-color: #AAAAAA;
}
.top-shows {
margin-left: 0;
margin-right: 0;
}
.top-shows [class^="col-"] {
padding-right: 0;
padding-left: 0;
}
<div class="container">
<div class="row top-shows">
<div class="col-xs-4 coresq ">
<img src="img/slogan_part_1.jpg" alt="imagem" class="slogan_l img-responsive"/>
</div>
<div class="col-xs-8 cordir">
<img src="img/slogan_part_2.jpg" alt="imagem" class="slogan_r img-responsive"/>
</div>
</div>
</div>
When the display reduces, the responsive properties don't resize equally. Shouldn't? Aren't they at the same line?
You have two different column sizes.
col-xs-4 and col-xs-8
you need to use same solumn size for both images if you want them to have same width.
col-xs-6 and col-xs-6 would be the sizes you are looking for.
One image is using double cols (xs-8) than the other (xs-4), so when resizing, the smaller column gets eaten.
Try resizing this external JSFIDDLE with equal cols
(Also, make sure the images are equal size as in the fiddle above)
After some research, I have looking about Flex, that can do it, and saw the new version of bootstrap (4, but still in alpha).
I've reading a lot about, and decided to test. It works! Exactly the way I asked before, with little changes on code.
Well, the custom css is the same, but the Bootstrap is 4 (alpha, for testing) and the HTML is here:
<div class="container">
<div class="d-flex flex-row">
<div class="col-xs-4 coresq ">
<img src="img/slogan_part_1.jpg" alt="imagem" class="slogan_l img-fluid"/>
</div>
<div class="col-xs-8 cordir">
<img src="img/slogan_part_2.jpg" alt="imagem" class="slogan_r img-fluid"/>
</div>
</div>
</div>
.
PS: I don't know why, but the code on snippet preview is cutting the last div ending the code. There is a single point on finish.

Bootstrap 3.0: Full-Width Color Background, Compact Columns in Center

I was looking to make a striped business theme, similar to the one created by W3Schools. The theme can be found here. It is characterized by horizontal sections, separated by different background colors.
The one issue I had with it was that the columns in Services, Portfolio and Pricing, spanned pretty much the full width of the page, which I did not think looked great, particularly for the three pricing boxes, which i feel should be much narrower and still centered. Let's take those pricing boxes as the example for the purpose of the questions.
So, I embarked upon the task of squeezing these three pricing boxes into a narrower shape, centered on the page, while still maintaining the full-width alternating background color. I came up with three ways to do it:
1) Place a Container inside a Container-Fluid:
<div id="pricing" class="container-fluid">
<div class="container">
<div class="row">
<div class="col-sm-4 col-xs-12">
BlaBlaBla
</div>
...
</div>
</div>
</div>
2) Make the following additions/changes to the css and html:
.fixed-width {
display: inline-block;
float: none;
width: 300px;
}
.row-centered {
text-align: center;
}
-
<div id="pricing" class="container-fluid">
<div class="row row-centered">
<div class="col-sm-4 col-xs-12 fixed-width">
BlaBlaBla
</div>
...
</div>
</div>
3) 3x col-sm-2, with empty columns on each side
Keep the container-fluid layout, but instead of having three col-sm-4, I have an empty col-sm-3, three col-sm-2, and finally an empty col-sm-3 (for a total of 12 columns).
4) 3x col-sm-2, with offset-3 to center
Instead of having three col-sm-4, I have one col-sm-2 col-sm-offset-3, then two col-sm-2 (this does not add to 12, but i center with offset).**
The problem with both (3) and (4) is that once i shrink the browser window, the boxes become too small before they wrap to the next line (i.e. the text flows out of the box). In (4) it seems if i use container (as opposed to container-fluid), the boxes become too narrow in full-screen even.
What is the correct way of doing this? I assume this is an issue almost everyone making business websites stumbles across, yet I was not able to find the answer online having worked on it for hours.
Thanks in advance,
Magnus
Below follows what I think is the best way to solve this. I will divide it up in whether or not it is a background image or color we are looking to apply accross the full width.
CSS (formatting for illustration purposes and fixed width)
.content{
padding:20px;
border: 1px solid #269abc;
background:#d6ec94;
}
[class*="col-"] {
padding-top:10px; /* 15px side paddings automatically applied */
padding-bottom:10px;
border: 1px solid grey;
background: transparent;
}
.fixed-width {
display:inline-block;
float:none;
width: 300px;
}
The key here is the fixed-width class, and follows your approach (2). The other styles are just so you can try it and easily see how it works.
CSS (background image)
#one {
background-image: url([insert-url]);
background-repeat: no-repeat;
background-size: contain;
height:500px;
}
The key here is the background-size: contain element. As long as the width/height ratio of your background image is larger than the section's ratio, the image will fill the full background.
CSS (background color)
#two {
background-color: grey;
height:500px;
}
background-color works without any tweaks.
HTML
<section id="one">
<div class="container">
<div class="row text-center">
<div class="col-sm-4 fixed-width">
<div class="content">HERE</div>
</div>
<div class="col-sm-4 fixed-width">
<div class="content">HERE</div>
</div>
<div class="col-sm-4 fixed-width">
<div class="content">HER</div>
</div>
</div>
</div>
</section>
As seen, by adding a <section> around the container, you can apply the background image or color to the full width of the page.
IN Bootstrap,
Col-lg is large screen,
Col-sm is small screen,
Col-md is medium devices,
Col-xs is Small screen.
According to the browser ,we can use the all classes.In my experience we can use the col-lg-offset-3 for large screen,Remaining screen we should use without offset,like us,
UL list format:
<style>
ul{
margin:0;padding:0;
text-align:center;
}
ul li
{
display:inline-block;
text-align:center;
width:300px;
}
</style>
<ul>
<li>box1</li>
<li>box2</li>
<li>box3</li>
</ul>
whatever screen all list will come in center position of screen.
other format:
<div class="container">
<div class="row text-center">
<div class="col-lg-offset-3 col-lg-2 col-sm-4 col-md-4 col-xs-12">contenbox..</div>
<div class="col-lg-2 col-sm-4 col-md-4 col-xs-12">contenbox..</div>
<div class="col-lg-2 col-sm-4 col-md-4 col-xs-12">contenbox..</div>
</div>
</div>
we should use all classes to our business requirement.if we can alter-ate the various offset class for col-sm-offset-,col-md-offset.,
<div class="col-sm-4 col-xs-12">
Is the important line. The col-sm-4 is saying on small screens and above, take up 4 of 12 bootstrap columns. So, try decreasing this to 3 of 12 bootstrap columns, i.e. col-sm-3. Here it is within the example source code:
<div class="col-sm-3 col-xs-12">
<div class="panel panel-default text-center">
<div class="panel-heading">
<h1>Basic</h1>
</div>
<div class="panel-body">
<p><strong>20</strong> Lorem</p>
<p><strong>15</strong> Ipsum</p>
<p><strong>5</strong> Dolor</p>
<p><strong>2</strong> Sit</p>
<p><strong>Endless</strong> Amet</p>
</div>
<div class="panel-footer plan">
<h3>$19</h3>
<h4>per month</h4>
<button class="btn btn-lg">Sign Up</button>
</div>
</div>

CSS vertical divider between 2 columns that will match the longer column's height

I am using Bootstrap 3 and have been thinking about this problem for a few days. The simplest approach was to set a border-right for the left column or a border-left for the right column with some padding to mimic a vertical divider. The problem with such solution is it is not intelligent and so the height of it is always the height of 1 of the columns depending on whether border-right or border-left is used in the CSS.
I did some research and came across this: http://codepen.io/philhoyt/pen/ockht
It is very close to what I wish to achieve but I need some help in retrofitting the .vertical-divider into my Bootstrap 3 CSS framework and also making it responsive.
Here's the HTML I have now:
<section class="container-fluid">
<div class="row">
<div class="col-md-8">
<h4>Left column title</h4>
<p>Left column text</p>
</div>
<div class="col-md-4">
<h4>Right column title</h4>
<p>Right column text, which may be longer or shorter than the left column</p>
</div>
</div>
</section>
Anyone knows how this can be done? Thanks!
Thanks for all the comments. After experimenting with a few different approaches. In other to fulfill all my needs (listed below), I had to resort to a flexbox approach and it solves my original question nicely. Thanks again!
Hopefully this information will be helpful for everyone!
Recap of my needs:
Bootstrap 3 as backbone CSS framework
Need a vertical divider between 2 Bootstrap responsive columns
The vertical divider's height needs to match the longer column's height (which may be the left or the right column)
The vertical divider will need to disappear when the Bootstrap responsive columns become a single column for mobile
Final solution:
HTML:
<section class="container-fluid">
<div class="row row-flex">
<div class="col-md-8 col-flex-item vertical-divider">
<h4>Left column title</h4>
<p>Left column text</p>
</div>
<div class="col-md-4 col-flex-item">
<h4>Right column title</h4>
<p>Right column text, which may be longer or shorter than the left column</p>
</div>
</div>
</section>
CSS:
.row-flex {
display: flex;
flex-flow: row wrap;
}
.col-flex-item {
display: flex;
flex-flow: column;
}
.vertical-divider {
border-right: 1px solid black;
}

How to keep space between three columns in Bootstrap?

I've done quite a bit of searching here on Stackoverflow on how to solve this problem efficiently, but I still haven't seemed to find exactly what I'm looking for.
Basically, I have three columns that I want evenly spaced and centered across my page. However, when I set col-md-4 for all three columns, the end result is they are all three bunched up to each other. How can I make it so that there is space between the columns? Like 10-15px or so without forcing them onto another row.
Here is some example code:
<div class="row-fluid">
<div class="col-md-4">
<p>Stuff that fills this column</p>
</div>
<div class="col-md-4">
<p>Stuff that fills this column</p>
</div>
<div class="col-md-4">
<p>Stuff that fills this column</p>
</div>
</div>
Maybe I'm just doing something wrong but I cannot seem to figure out how to make this work. I've seen several people suggest to just put them into another div with some padding but that doesn't seem to work for me.
Thanks for any help! I'm open to all suggestions!
Actually, your code already creates spaces between columns, because in bootstrap the column has 15px padding from each side.
Your code is working normally, check here: http://www.bootply.com/H6DQGdZxGy
It's a late answer but I guess that some people can be interessed by another explanation.
Bootstrap "cols" system is not made to decorate but to place elements in pages. If you need to space column contents, you need to wrap your content:
<div class="row-fluid">
<div class="col-md-4">
<div class="col-spaced">
<p>Stuff that fills this column</p>
</div>
</div>
<div class="col-md-4">
<div class="col-spaced">
<p>Stuff that fills this column</p>
</div>
</div>
<div class="col-md-4">
<div class="col-spaced">
<p>Stuff that fills this column</p>
</div>
</div>
Then you can add spacing on ".col-spaced" by using padding
.col-spaced {
margin-left: 15px
}
Note that:
margin will change you column size because the col-* should be placed to respect column layout
you may need to change col-* first and last child to fix some problem
A 'hacky' way to do what you want is to give the columns a border that is the same color as the background.
You can do something like:
[class*="col-"] {
padding-right: 15px;
padding-left: 15px;
}
[class*="col-"]:first-child {
padding-left: 0px;
}
[class*="col-"]:last-child {
padding-right: 0px;
}
You might add a content to wrap it, otherwise you'll have those rules applied to all columns in your layout!
.spaced-columns [class*="col-"] {
padding-right: 15px;
padding-left: 15px;
}
So then you can use:
<div class="spaced-columns">
<div class="col-md-4"> your content here</div>
<div class="col-md-4"> your content here</div>
<div class="col-md-4"> your content here</div>
</div>
or you can create just a class like: spaced-col and then add a padding on it:
.spaced-col {
padding: 0px 10px;
}
and then you apply this class on your cols
<div class="col-md-4 spaced-col"> your content here</div>
<div class="col-md-4 spaced-col"> your content here</div>
<div class="col-md-4 spaced-col"> your content here</div>
So you'll have your spacing as you want :)
Cheers
If you use padding and change the background color, you may notice that the colors of the columns don't have much spacing between them.
Perhaps a better option would be
.col-md-4 {
margin-left: 5px;
}
You have the option to use column offsetting col-md-offset-*. You wouldn't be able to maintain the spacing of your columns (reduce 4 to 3), but I believe it should somewhat do the job for responsive spacing.
Check this out: twitter bootstrap grid system. Spacing between columns
You can put another div to place your content inside the .col div, as the below example:
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="content-wrapper" style="border:1px solid #000;">
<p>Some content here</p>
</div>
</div>
<div class="col-md-4">
<div class="content-wrapper" style="border:1px solid #000;">
<p>Some content here</p>
</div>
</div>
<div class="col-md-4">
<div class="content-wrapper" style="border:1px solid #000;">
<p>Some content here</p>
</div>
</div>
</div>
</div>
See it working here: https://codepen.io/pmfeo/pen/RVxPXg
That div will adjust to it's parent padding.

Bootstrap 3 | Responsive col width and height

I'm working on a Bootstrap page for the first time. Used to working in HTML/CSS and all just not bootstrap. I'm having some difficulty with the following:
I created a fluid ( full width ) container that spans 4 columns.
The 1st column contains an image, the 2nd text, the 3rd an image and the 4th text again. The next row of columns is alternating.
I want my columns to have a responsive width and height so that if i adjust the viewport, the colums are always squared and stretching the full page. I just can't seem to get this to work. Tried various things. Setting max width, using percentages, background images, img scr tags that scale to 100% etc. but nothing seems to work.
Can anyone tell me how i can make this happen?
Greatly appreciated. No problem if JS or JQuery is needed to make it work. I got the basics covered so i know how to do that if someone points me in the right direction ( not a JS wizard to figure this one out on my own just yet ).
For example, i provided my HTML markup.
The CSS is pretty basic. Just provided the background images in the ft-img columns and some styling for the fonts. Also, currently all col have a fixed height of 400 pixels but that is abviously not the way to go. :P
<div class="container-fluid main-content">
<div class="row">
<div class="col-md-3 ft-img ft-1">
</div>
<div class="col-md-3 ft-text">
<h1>Heading</h1>
<hr>
<p>Paragraph </p>
</div>
<div class="col-md-3 ft-img ft-2">
</div>
<div class="col-md-3 ft-text">
<h1>Heading</h1>
<hr>
<p>Paragraph </p>
</div>
</div>
<div class="row">
<div class="col-md-3 ft-text">
<h1>Heading</h1>
<hr>
<p>Paragraph </p>
</div>
<div class="col-md-3 ft-img ft-1">
</div>
<div class="col-md-3 ft-text">
<h1>Heading</h1>
<hr>
<p>Paragraph </p>
</div>
<div class="col-md-3 ft-img ft-2">
</div>
</div>
</div>
As asked, here's the CSS. I initially did not provide it since it's just the basics and it's just one of the things i tried. As said above.
.ft-img {
background-size: 100%;
background-position: center center;
height: 400px;
}
.ft-text {
background: url('../img/bg.png');
background-position: 10% 10%;
height: 400px;
color: #fff;
font-family: 'Lato', sans-serif;
padding: 40px;
}
.ft-text h1 {
font-size: 2.5em;
font-weight: bold;
}
.ft-text p {
font-size: 1.2em;
}
.ft-1 {
background: url('../img/ft/ft-1.jpg') no-repeat;
}
.ft-2 {
background: url('../img/ft/ft-2.jpg') no-repeat;
}
If you want to be fluid, you can't specify fixed units (px).
Consider using the vw unit to make your heights relative to their widths to maintain squares.
http://www.w3.org/TR/css3-values/#viewport-relative-lengths