Vertical Text text alignment in bootstraps column - html

<div class="container">
<div class="row">
<div class="col-sm-1">
<p style=" writing-mode: vertical-rl; text-align: center; transform:scale(-1);">Total Number of Correct and Wrong Number</p>
</div>
<div class="col-sm-11">
<div class="row" style="height: 400px">
<canvas id="{{ answer.id }}_barChart" class="bar_chart"></canvas>
</div>
</div>
</div>
</div>
Above is the code for my work, i tried to make the text align to middle by put text-align:center or <center> xxx </center> , but it's still not in the middle
https://prnt.sc/m8hPkJ3N5x4v here is the image


Just add the following 3 more bootstrap classes d-flex align-items-center justify-content-center, in your heading div.
so your heading div will be <div class="col-sm-1 d-flex align-items-center justify-content-center">
check below.
.container{
background-color:aqua;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-sm-1 d-flex align-items-center justify-content-center">
<p style=" writing-mode: vertical-rl; transform:scale(-1);" class="align-middle">
Total Number of Correct and Wrong Number
</p>
</div>
<div class="col-sm-11">
<div class="row" style="height: 400px">
Your Chart.
</div>
</div>
</div>
</div>

Related

How can I create a Bootstrap grid layout with a responsive but minimum width left column and scrollable right column?

I am close to achieving this look and behavior but I am having issues with the scrolling of the right column. The scroll bar appears but does not scroll the content on the right column. Should look like this:
.
Currently looks like this:
There are probably multiple approaches or changes I can take or make but any suggestions are welcome! Code is provided below.
.scroller {
overflow-x: scroll;
white-space: nowrap;
}
.row {
display: flex;
flex-wrap: nowrap;
}
.col-md-4 {
min-width: 240px;
}
.col-md-8 {
flex-grow: 1;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<div class="row">
<div class="col-4" style="min-width: 240px;">
<div class="row pb-1">
<div class="col-3 offset-3">
<b>NAME</b>
</div>
</div>
<div class="row row-striped align-items-center pb-1 pt-1">
<div class="col-3">
<img src="https://media.api-sports.io/football/players/730.png" alt="player photo" width="40px" height="40px">
</div>
<div class="col-9 player-table-text">
<div>
Thibaut Courtois
<span class="ps-1 player-number-text">1</span>
</div>
</div>
</div>
</div>
<div class="col scroller" style="min-width: 500px;">
<div class="row pb-1">
<div class="col-2 offset-1">
<b>POS</b>
</div>
<div class="col-2">
<b>AGE</b>
</div>
<div class="col-2">
<b>HT</b>
</div>
<div class="col-2">
<b>WT</b>
</div>
<div class="col-2">
<b>NAT</b>
</div>
</div>
<div class="row row-striped align-items-center pb-1 pt-1 player-table-text" style="height:48px;">
<div class="col-2 offset-1">
GK
</div>
<div class="col-2">
30
</div>
<div class="col-2">
6' 7"
</div>
<div class="col-2">
212 lbs
</div>
<div class="col-2">Belgium</div>
</div>
</div>
</div>

How to truncate text with screen size using ellipses

I have this Stackblitz and the Stackblitz Url that has 2 bootstrap cards inside a page layout with columns.
Problem - With the Name (.card-title) of the card being greater than 11 characters longs (max 15), when I shrink the screen between 768px-1200px the name at the top of the card squishes the star/rating down to the next line.
Question - Is there a way to truncate the name (ex. AnneMariesPlace) between 768px-1200px with ellipses, so that the star/rating remains on the same line?
ex. AnneMari...
This would mean the max length would be 8 plus the ellipses (3 chars)
Can it be done with pure CSS using?
FYI - I tried a couple of things with text-overflow: ellipsis; and white-space: nowrap;
but I didn't have much luck.
Here is the code I'm using
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<div class="container my-3 my-xl-5">
<div class="row">
<div class="col-lg-3">
something here
</div>
<div class="col-lg-9">
<div class="row">
<div class="col">
<div class="mb-4">
</div>
<div class="row row-cols-1 row-cols-sm-2">
<div class="col mb-4">
<div class="card">
<div class="row no-gutters">
<div class="col-md-5">
<img class="yogaband-img img-fluid w-100" style="object-fit: cover; object-position: center; min-height: 100%;" src="https://res.cloudinary.com/k9dapp/image/upload/c_scale,w_1450,h_1450/f_auto/v1569538700/mainpage/iStock-860080282_bkhfsu.jpg" alt="yogaband">
</div>
<div class="col-md-7">
<div class="card-body py-1">
<div class="row">
<div class="col-12">
<b class="card-title d-inline">AnneMariesPlace</b>
<span class="float-right center-star">
★3.43
</span>
</div>
</div>
<div class="row">
<div class="col-12">
<span>Access</span>
<span class="float-right">Private</span>
</div>
<div class="col-12">
<span>Max Size</span>
<span class="float-right">10</span>
</div>
<div class="col-12">
<span>Events</span>
<span class="float-right">323</span>
</div>
<div class="col-12">
<span>Type</span>
<span class="float-right">Park</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card">
<div class="row no-gutters">
<div class="col-md-5">
<img class="yogaband-img img-fluid w-100" style="object-fit: cover; object-position: center; min-height: 100%;" src="https://res.cloudinary.com/k9dapp/image/upload/c_scale,w_1450,h_1450/f_auto/v1569538700/mainpage/iStock-860080282_bkhfsu.jpg" alt="yogaband">
</div>
<div class="col-md-7">
<div class="card-body py-1">
<div class="row">
<div class="col-12">
<b class="card-title d-inline">AnneiMaries</b>
<span class="float-right center-star">
★3.43
</span>
</div>
</div>
<div class="row">
<div class="col-12">
<span>Access</span>
<span class="float-right">Private</span>
</div>
<div class="col-12">
<span>Max Size</span>
<span class="float-right">10</span>
</div>
<div class="col-12">
<span>Events</span>
<span class="float-right">323</span>
</div>
<div class="col-12">
<span>Type</span>
<span class="float-right">Park</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

To make ellipsis work you need conditions. First, the element must NOT be inline. Yours it is even with an !important condition (which I don't know why you set it), second it needs a width set (it does not matter if percent or fixed) and last, it needs overflow:hidden and white-space:nowrap (so the content won't ever take a second line).
Basically, and based on your example, you need this:
.d-inline {
display: inline-block;
overflow: hidden;
width: calc(100% - 44px);
white-space: nowrap;
}
Unfortunately, it looks like your "score" will never get more width space than 44px. Use a bit more to feel safe just in case (browser zooming and such.)

How to break col when text is too large?

I have a row with two cols:
a) For the name of the list
b) For an edit button.
col-md-6 works great for when the list's name is short, but when is longer it renders clunky.
Clunky:
html
<div class="row">
<div class="col-md-6">
<h1 class="box">Lista: {{ lista.name }}</h1>
</div>
<div class="col-md-6">
<button id="editList" class="btn btn-primary">Editar</button>
</div>
</div>
<hr>
It gets worse for mobiles, where the list's name should be on top of the button "Editar".

if you use bootstrap
<div class="row">
<div class="col-md-8 col-sm-6">
<h1>welcome to my blog</h1>
</div>
<div class="col-md-4 col-sm-6>
<button class="btn">hello</button>
</div>
</div>
just css
<div class="contains">
<div class="text">
<h1>welcome to my blog</h1>
</div>
<div class="button>
<button class="btn">hello</button>
</div>
</div>
<style>
.contains {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.text{
width: 60%;
}
.button{
width: 40%;
}
</style>

add (col col-md-6) not (col-md-6)
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col col-md-6">
<h1 class="box">Lista: Mi Primary List</h1>
</div>
<div class="col col-md-6">
<button id="editList" class="btn btn-primary">Editar</button>
</div>
</div>
<hr>

Adding space between columns in Bootstrap 4 [duplicate]

This question already has answers here:
Add spacing between vertically stacked columns in Bootstrap 4
(6 answers)
Closed 4 years ago.
How I want it to look like:
I'm trying to add horizontal and vertical space between the columns in BS4 but it keeps either messing breakpoints around (black or red) or the breakpoints of bootstrap. Is there any easy way to add space? I've tried the new margin settings of BS4, but it didn't really help (messed up the heading and background-color). Also, the 2 horizontal columns should have the same height.
btw. If you run the snippet, the columns don't display correctly because of the size of the snippet output. That's what it should look like on non-mobile: screenshot (or expand the snippet)
* {
color: white;
}
.black {
background-color: black;
}
.red {
background-color: red;
}
nav {
background-color: antiquewhite;
margin: 0px;
}
.row {}
.head {
background-color: aqua;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" >
<nav class="navbar-static-top">
Nav
</nav>
<div class="container-fluid">
<div class="row p-1">
<div class="col black">
<div class="row">
<div class="col head">
HEADING 0 COLUMN
</div>
</div>
<p>aaaa<br>
aaaa</p>
</div>
</div>
<div class="row row-eq-height p-1">
<div class="col-md-6 black">
<div class="row">
<div class="col head">
HEADING 1 COLUMNS BLACK
</div>
</div>bbbb<br>
bbbb<br>
</div>
<div class="col-md-6 red">
<div class="row">
<div class="col head">
HEADING 2 CLOUMNS RED
</div>
</div>cccc
</div>
</div>
<div class="row p-1">
<div class="col black">
dddd
</div>
</div>
<div class="row p-1">
<div class="col black">
eeee
</div>
</div>
<div class="row row-eq-height p-1">
<div class="col-md-6 black">
<div class="row">
<div class="col head">
HEADING 3 COLUMNS BLACK
</div>
</div>ffff<br>
ffff<br>
</div>
<div class="col-md-6 red">
<div class="row">
<div class="col head">
HEADING 4 CLOUMNS RED
</div>
</div>hhhh
</div>
</div>
</div>

For spacing Bootstrap 4 has responsive spacing classes p-* (for padding) and m-* (for margins).
So, in your case, you could experiment by adding p-1 or maybe p-2 to all your columns to achieve the desired effect.
Note: The Bootstrap spacing classes are based on rem units, not on px because px is the old and outdated way of doing things when it comes to responsive design and accessibility.
Here's the reference link for you:
https://getbootstrap.com/docs/4.0/utilities/spacing/
The following code snippet produces the desired result by using nesting as well as the m-1 class to create margins around the columns:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<style>
* {
color: white;
}
.black {
background-color: black;
}
.red {
background-color: red;
}
nav {
background-color: antiquewhite;
margin: 0px;
}
.head {
background-color: aqua;
}
</style>
<div class="container-fluid">
<div class="row">
<div class="col-12 col-md m-1">
<div class="row">
<div class="col black">
<div class="row">
<div class="col head">
HEADING 0 COLUMN
</div>
</div>
<p>aaaa<br>
aaaa</p>
</div>
</div>
</div>
</div>
<div class="row row-eq-height">
<div class="col-12 col-md m-1">
<div class="row">
<div class="col black">
<div class="row">
<div class="col head">
HEADING 1 COLUMNS BLACK
</div>
</div>
bbbb<br>
bbbb<br>
</div>
</div>
</div>
<div class="col-12 col-md m-1">
<div class="row h-100">
<div class="col red">
<div class="row">
<div class="col head">
HEADING 2 CLOUMNS RED
</div>
</div>cccc
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12 col-md m-1">
<div class="row">
<div class="col black">
dddd
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12 col-md m-1">
<div class="row">
<div class="col black">
eeee
</div>
</div>
</div>
</div>
<div class="row row-eq-height">
<div class="col-12 col-md m-1">
<div class="row">
<div class="col black">
<div class="row">
<div class="col head">
HEADING 3 COLUMNS BLACK
</div>
</div>
ffff<br>
ffff<br>
</div>
</div>
</div>
<div class="col-12 col-md m-1">
<div class="row h-100">
<div class="col red">
<div class="row">
<div class="col head">
HEADING 4 CLOUMNS RED
</div>
</div>hhhh
</div>
</div>
</div>
</div>
</div>

how to show 2 divs in the center of the row in bootstrap

i want to show 2 div in the center. i have divs which shows like this. i just want second row div in the center.
req design like this
output
---- ------- -------
------- -------
desired output
----- ------- -------
------- -------
code
<div class="row">
<div class="features">
<div class="col-md-4 col-sm-6 wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="600ms">
<div class="feature-wrap">
<i class="fa fa-pencil" ></i>
<h2>One</h2>
<h3>one</h3>
</div>
</div><!--/.col-md-4-->
<div class="col-md-4 col-sm-6 wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="600ms">
<div class="feature-wrap">
<i class="fa fa-line-chart"></i>
<h2>Two</h2>
<h3>Two</h3>
</div>
</div><!--/.col-md-4-->
<div class="col-md-4 col-sm-6 wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="600ms">
<div class="feature-wrap">
<i class="fa fa-database"></i>
<h2>three</h2>
<h2>Three</h2>
<h3>Three</h3>
</div>
</div><!--/.col-md-4-->
<div>
<div class="col-md-4 col-sm-6 wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="600ms" align="">
<div class="feature-wrap">
<i class="fa fa-book" align=""></i>
<h2>Four</h2>
<h3>Coming Soon...</h3>
</div>
</div><!--/.col-md-4-->
<div class="col-md-4 col-sm-6 wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="600ms">
<div class="feature-wrap">
<i class="fa fa-mobile"></i>
<h2>Five</h2>
<h3>Coming Soon...</h3>
</div>
</div><!--/.col-md-4-->
</div>
</div><!--/.services-->
</div>
</div><!--/.services-->
</div>
jsfiddle code
https://jsfiddle.net/tccu9ue8/4/

As suggested by #sahil Dhir you could use offset values for your layout like
Col-md-offset-[number of column offsets]
In your case giving column offset of 2 to the first element of second row should do the magic.
Here is a working fiddle. https://jsfiddle.net/tccu9ue8/6/
Let me know if you need more info Cheers!!!

This is one way of achieving what you asked for:[basic CSS (padding and margin) can be applied for better results]
<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
</head>
<body class="container">
<div class="row">
<div class="col-md-4 col-xs-4 col-lg-4 col-sm-4" align="center">
<button class="btn btn-primary">1ST</button>
</div>
<div class="col-md-4 col-xs-4 col-lg-4 col-sm-4" align="center">
<button class="btn btn-primary">2nd</button>
</div>
<div class="col-md-4 col-xs-4 col-lg-4 col-sm-4" align="center">
<button class="btn btn-primary">3rd</button>
</div>
</div>
<br>
<div class="row">
<div class="col-md-6 col-xs-6 col-lg-6 col-sm-6" align="center">
<button class="btn btn-primary">4th</button>
</div>
<div class="col-md-6 col-xs-6 col-lg-6 col-sm-6" align="center">
<button class="btn btn-primary">5th</button>
</div>
</div>
</body>
</html>
Hope this helps serve your purpose.

The simple way you can achieve this design by using flexbox.
You can find a good guide from MDN here.
For your implementation, You dont have to use bootstrap.
Just wrap two lines, create one line full width, another with half width, and use flexbox properties to align them as you wish.
.line {
display: flex;
justify-content: space-between;
}
.line--second {
width: 50%;
margin: 0 auto;
justify-content: space-between;
}
<div class="wrapper">
<div class="line line--first">
<div class="item">One </div>
<div class="item"> Two </div>
<div class="item"> Three </div>
</div>
<div class="line line--second">
<div class="item">Four </div>
<div class="item">Five </div>
</div>
</div>
Hope this what you meant.

you need to use display:inline-block instead of float: left for bootstrap column https://jsfiddle.net/7mbs9cjj/
.block {
height: 200px;
background: #333;
}
.h-center .col-sm-4 {
margin-bottom: 20px;
float: none;
display: inline-block;
vertical-align: top;
margin-right: -4px;
}
.row {
text-align: center;
display: block;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="row h-center">
<div class="col-sm-4">
<div class="block"></div>
</div>
<div class="col-sm-4">
<div class="block"></div>
</div>
<div class="col-sm-4">
<div class="block"></div>
</div>
<div class="col-sm-4">
<div class="block"></div>
</div>
<div class="col-sm-4">
<div class="block"></div>
</div>
</div>