I try to nest multiple rows in a column.
In the end it should look like
The problem is that I centered the whole thing vertically and the css rule seems to apply also on my child rows. How can I stop this alignment and make it look like I want?
Here is what I got so far:
.vertical-center {
min-height: 100%;
min-height: 100vh;
display: flex;
align-items: center;
}
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<body>
<div class="row justify-content-center vertical-center">
<div class="col-auto">
<span id="field1">text</span>
</div>
<div class="col-auto">
<span id="field2">text</span>
</div>
<div class="col-auto">
<span id="field3">text</span>
</div>
<div class="col-auto">
<span id="field4">=</span>
</div>
<div class="col-auto">
<div class="row">
<div class="col">
<input type="text" id="field5"/>
</div>
</div>
<div class="row">
<div class="col-auto">
<div id="xy">Bar</div>
</div>
</div>
<div class="row">
<div class="col-auto">
<div id="h">Bar2</div>
</div>
</div>
</div>
</div>
</body>
</html>
Align the container instead of aligning the content. Apply your CSS to the body
body {
min-height: 100%;
min-height: 100vh;
display: flex;
align-items: center;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="container"> <!-- this is mandatory when using row -->
<div class="row justify-content-center">
<div class="col-auto">
<span id="field1">text</span>
</div>
<div class="col-auto">
<span id="field2">text</span>
</div>
<div class="col-auto">
<span id="field3">text</span>
</div>
<div class="col-auto">
<span id="field4">=</span>
</div>
<div class="col-auto">
<div class="row">
<div class="col">
<input type="text" id="field5" />
</div>
</div>
<div class="row">
<div class="col-auto">
<div id="xy">Bar</div>
</div>
</div>
<div class="row">
<div class="col-auto">
<div id="h">Bar2</div>
</div>
</div>
</div>
</div>
</div>
Related
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>
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>
I'm trying to align a text next to an icon inside a card. The card is wrapped inside the Bootstrap "col" class which dynamically determines its size depending on how many items a row contains.
However if there isn't enough space the text gets wrapped and is displayed in a second row. Now what I'm trying to achieve is to keep the text next to the icon on one line and end it if there isn't enough space with an ellipsis (three dots).
This plunker shows my current setup
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
</head>
<body>
<div class="row mx-1">
<div class="col" style="background:lightgray">
<div class="row">
<div style="width:50px;height:50px;background:gray"></div>
<div>
<div class="title">
Normal title
</div>
</div>
</div>
</div>
<div class="col mx-1" style="background:lightgray">
<div class="row">
<div style="width:50px;height:50px;background:gray"></div>
<div>
<div class="title">
Long title which should end with ellipsis
</div>
</div>
</div>
</div>
<div class="col mx-1" style="background:lightgray">
<div class="row">
<div style="width:50px;height:50px;background:gray"></div>
<div>
<div class="title">
Long title which should end with ellipsis
</div>
</div>
</div>
</div>
<div class="col mx-1" style="background:lightgray">
<div class="row">
<div style="width:50px;height:50px;background:gray"></div>
<div>
<div class="title">
Long title which should end with ellipsis
</div>
</div>
</div>
</div>
<div class="col mx-1" style="background:lightgray">
<div class="row">
<div style="width:50px;height:50px;background:gray"></div>
<div>
<div class="title">
Long title which should end with ellipsis
</div>
</div>
</div>
</div>
</div>
</body>
</html>
What I'm trying to achieve
An idea is to make your text out of the flow using absolute position and then add some CSS properties to crop the text:
.main-title {
flex: 1;
position: relative;
}
.main-title .title {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<div class="container-fluid">
<div class="row mx-1">
<div class="col" style="background:lightgray">
<div class="row">
<div style="width:50px;height:50px;background:gray"></div>
<div class="main-title">
<div class="title">
Normal title
</div>
</div>
</div>
</div>
<div class="col mx-1" style="background:lightgray">
<div class="row">
<div style="width:50px;height:50px;background:gray"></div>
<div class="main-title">
<div class="title">
Long title which should end with ellipsis
</div>
</div>
</div>
</div>
<div class="col mx-1" style="background:lightgray">
<div class="row">
<div style="width:50px;height:50px;background:gray"></div>
<div class="main-title">
<div class="title">
Long title which should end with ellipsis
</div>
</div>
</div>
</div>
<div class="col mx-1" style="background:lightgray">
<div class="row">
<div style="width:50px;height:50px;background:gray"></div>
<div class="main-title">
<div class="title">
Long title which should end with ellipsis
</div>
</div>
</div>
</div>
<div class="col mx-1" style="background:lightgray">
<div class="row d-flex">
<div style="width:50px;height:50px;background:gray"></div>
<div class="main-title">
<div class="title">
Long title which should end with ellipsis
</div>
</div>
</div>
</div>
</div>
</div>
You can use the text-truncate class to automatically truncate (and add ellipsis) based on the available space in a column.
To achieve that you need to put your content into columns (which you should always do anyway because putting stuff directly into a row tends to lead to problems that require unnecessary css hacks).
In the following snippet, you see a much cleaner version of your code that achieves the desired result using the text-truncate class:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<style>
.grey-div {
width:50px;
height:50px;
background:gray;
display: inline-block;
vertical-align: top;
}
</style>
<div class="container-fluid">
<div class="row mx-1">
<div class="col px-0 mx-1" style="background:lightgray">
<div class="row">
<div class="grey-div"></div>
<div>
<div class="title">
Normal title
</div>
</div>
</div>
</div>
<div class="col px-0 mx-1 text-truncate" style="background:lightgray">
<div class="title text-truncate">
<div class="grey-div"></div>
Long title which should end with ellipsis
</div>
</div>
<div class="col px-0 mx-1 text-truncate" style="background:lightgray">
<div class="title text-truncate">
<div class="grey-div"></div>
Long title which should end with ellipsis
</div>
</div>
<div class="col px-0 mx-1 text-truncate" style="background:lightgray">
<div class="title text-truncate">
<div class="grey-div"></div>
Long title which should end with ellipsis
</div>
</div>
<div class="col px-0 mx-1 text-truncate" style="background:lightgray">
<div class="title text-truncate">
<div class="grey-div"></div>
Long title which should end with ellipsis
</div>
</div>
</div>
</div>
I do not want divs to come side by side. how can i solve this
search about -- > false
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="row ">
<div class="col-md-8 "></div>
<div class="col-md-4 d-flex justify-content-start">
<div class="search">
<p>search</p>
</div>
<div class="about">
<p>about</p>
</div>
</div>
</div>
Have you tried a <br/> tag between the divs?
Remove class="col-md-4" from div
.search {border: 1px solid #000; display: block!important;}
.about {border: 1px solid #000; display: block!important;}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row ">
<div class="col-md-8 ">
</div>
<div class="col-md-4">
<div class="search">
<p>search</p>
</div>
<div class="about">
<p>about</p>
</div>
</div>
</div>
on your CSS div { display: block; } , or you can give property to your classes, like:
.search { display: block;}
.about { display: block;}
if you want just to test if it works you can write it directly on the html, but change it to the CSS file as soon as you see that it works:
<div style="display: block;" class="search">
<p>search</p>
</div>
<div style="display: block;" class="about">
<p>about</p>
</div>
.search {border: 1px solid #000; display: block!important;}
.about {border: 1px solid #000; display: block!important;}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row ">
<div class="col-md-8 ">
</div>
<div class="col-md-4 d-flex justify-content-start">
<div class="search">
<p>search</p>
</div>
<div class="about">
<p>about</p>
</div>
</div>
</div>
You can try adding this css style to the div elements:
div{
clear:both;
}
It works perfectly in my browser. <div> tag is a block element by default. I think you should update your browser instead.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row ">
<div class="col-md-8 ">
</div>
<div class="col-md-4">
<div class="search">
<p>search</p>
</div>
<div class="about">
<p>about</p>
</div>
</div>
</div>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row ">
<div class="col-md-8 ">
</div>
<div class="col-md-4 d-flex justify-content-start">
<div class="search">
<p>search</p>
</div>
<div class="about">
<p>about</p>
</div>
</div>
</div>
d-flex justify-content-start -- if i add this code it does not work
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>