I am trying to make this text
but how can I make it same height and make inline each other
<div class="row">
<div class="col-xs-12 text-center">
<p style="display:inline">初期費用 <br> 月額費用 <br>手続き料</p>
<h3 style="display:inline">0<span>円</span></h3>
</div>
</div>
Try this:
p, h3{
display: inline-block;
}
h3 {
color: skyblue;
font-size: 70px;
}
<div class="row">
<div class="col-xs-12 text-center">
<p>初期費用 <br> 月額費用 <br>手続き料</p>
<h3>0<span>円</span></h3>
</div>
</div>
Using display flex
.col-xs-12 {
display: flex;
align-items: center;
padding: 0;
}
p {
font-size: 16px;
line-height: 1.5;
margin-right: 8px;
}
h3 {
font-size: 102px;
margin: 0;
}
h3 span {
font-size: 32px
}
<div class="row">
<div class="col-xs-12 text-center container">
<p>初期費用 <br> 月額費用 <br>手続き料</p>
<h3>0<span>円</span></h3>
</div>
</div>
Here you go with a solution
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<div class="row">
<div class="col-xs-12 text-center">
<div style="display: flex;">
<p style="display: inline-flex">初期費用 <br> 月額費用 <br>手続き料</p>
<h3 style="display: inline-flex">0<span>円</span></h3>
</div>
</div>
</div>
Solution using flex & inline-flex
Related
I'm trying to achieve this, where brown gets pushed down when pink is too long, and pink is dynamically sized based on its text content.
I was only able to achieve this using javascript and two templates, if pink length is over X use second template, but I'm wondering if there's a way to achieve this using CSS only?
I tried meddling with grid auto-fill/auto-fit with minmax, float, flex with wrap, but I couldn't get to the desired result with these.
.parent {
width: 170px;
}
.flex {
display: flex;
}
div {
outline: 2px solid rgba(255, 0,0, 0.3);
}
<div>
<p>scenario A</p>
<div class="parent flex">
<div>
<div class="one">A short title</div>
<div class="three">Some text here</div>
<div class="three">some more text</div>
</div>
<div>
<button>A button</button>
</div>
</div>
</div>
<div>
<p>scenario B</p>
<div class="parent">
<div class="one">Testing a very long title</div>
<div class="flex">
<div>
<div class="three">Some text here</div>
<div class="three">some more text</div>
</div>
<div>
<button>A button</button>
</div>
</div>
</div>
</div>
<p>can a component achieve both a and b with only css?
I found a solution, it requires having fixed height in the first row, and the right side button will basically overflow when needed.
Will wait a bit before accepting my own solution in case someone came with a better one.
.container {
width: 300px;
display: flex;
gap: 10px;
padding: 16px;
font-size: 14px;
font-family: Arial;
}
.text {
flex: 1;
min-width: 0;
}
.first-row {
height: 22px;
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 8px;
}
.image {
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #444;
}
.title {
flex-grow: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
<h2>Long title</h2>
<div class="container">
<div class="image"></div>
<div class="text">
<div class="first-row">
<div class="title">Test title test title test title</div>
<button>Visit store</button>
</div>
<div class="three">in the stores</div>
<div class="three">sponsored</div>
</div>
</div>
<h2>Short title</h2>
<div class="container">
<div class="image"></div>
<div class="text">
<div class="first-row">
<div class="title">Short title</div>
<button>Visit place</button>
</div>
<div class="three">in the stores</div>
<div class="three">sponsored</div>
</div>
</div>
<h2>Very long title</h2>
<div class="container">
<div class="image"></div>
<div class="text">
<div class="first-row">
<div class="title">Test title test titleTest title test titleTest title test title</div>
<button>Visit place</button>
</div>
<div class="three">in the stores</div>
<div class="three">sponsored</div>
</div>
</div>
I am working in my Vue.js project using Bootstrap 4 with css-only, and I'm trying to get my styling to be responsive to the content and yet inline.
I'd like to achieve 4 columns. In that 2 columns with labels and 2 columns with content. All labels I want to align into the upper left corner of the content.
<div class="row">
<div class="col">
<form>
<div class="row">
<div class="col">
<div class="label-column">
<label>Label 1</label>
<label>Label 2</label>
<label>Label 3</label>
</div>
</div>
<div class="col">
<div class="content-column">
<div>
<p>{{contentForLabel1}}</p>
</div>
<br>
<div>
<p>{{contentForLabel2}}</p>
</div>
<br>
<div>
<p>{{contentForLabel3}}</p>
</div>
</div>
</div>
<div class="col">
<label>Label 4</label>
</div>
<div class="col">
<div class="content-area">
<div>
<div>
<p
style="font-weight: bold; color: grey"
>Content displayed here in text with inline styling</p>
</div>
</div>
</div>
</div>
</div>
</form>
Here is my CSS:
form {
background-color: white;
margin-top: 30px;
margin-bottom: 30px;
justify-content: center;
align-content: center;
padding-bottom: 25px;
width: 100%;
}
.form-area {
margin-top: 30px;
}
label {
display: block;
color: black;
font-weight: bold;
}
.label-column {
padding-top: 25px;
display: flex;
display: inline-block;
width: 80%;
}
.content-column {
padding-top: 25px;
display: flex;
display: inline-block;
width: 80%;
}
.content-area {
padding-bottom: 25px;
}
I wish for my result to be something like this (expected output):
LABEL 1 content text LABEL 4 more text
with some more text and so on...
more text
LABEL 2 here starts the next and so on...
content text more text
and so on...
LABEL 3 here starts the last
line of content text.
At the moment my result looks like this (what I want to solve):
LABEL 4 more text
LABEL 1 content text and so on...
with some more text
LABEL 2
LABEL 3 here starts the next
content text
here starts the last
line of content text
anyone who has a good way of fixing this?
You can achieve it only with Bootstrap, because it is possible to stack .row and .col classes. For example like this:
form {
background-color: white;
margin-top: 30px;
margin-bottom: 30px;
justify-content: center;
align-content: center;
padding-bottom: 25px;
width: 100%;
}
.form-area {
margin-top: 30px;
}
label {
display: block;
color: black;
font-weight: bold;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col">
<form>
<div class="row">
<div class="col">
<div class="row">
<div class="col">
<label>Label 1</label>
</div>
<div class="col">
<p>{{contentForLabel1}}</p>
</div>
</div>
<div class="row">
<div class="col">
<label>Label 2</label>
</div>
<div class="col">
<p>{{contentForLabel2}}</p>
</div>
</div>
<div class="row">
<div class="col">
<label>Label 3</label>
</div>
<div class="col">
<p>{{contentForLabel3}}</p>
</div>
</div>
</div>
<div class="col">
<div class="row">
<div class="col">
<label>Label 4</label>
</div>
<div class="col">
<p style="font-weight: bold; color: grey">
Content displayed here in text with inline styling
</p>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
You can do this by proper usage of Bootstrap grid. Below is the solution for your expected result.
Note: I didn't touch any of your css
form {
background-color: white;
margin-top: 30px;
margin-bottom: 30px;
justify-content: center;
align-content: center;
padding-bottom: 25px;
width: 100%;
}
.form-area {
margin-top: 30px;
}
label {
display: block;
color: black;
font-weight: bold;
}
.label-column {
padding-top: 25px;
display: flex;
display: inline-block;
width: 80%;
}
.content-column {
padding-top: 25px;
display: flex;
display: inline-block;
width: 80%;
}
.synonym-area {
padding-bottom: 25px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<form>
<div class="row">
<div class="col-sm-6">
<div class="row">
<div class="col">
<div class="label-column">
<label>Label 1</label>
</div>
</div>
<div class="col">
<div class="content-column">
<div>
<p>{{contentForLabel1}}</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="label-column">
<label>Label 2</label>
</div>
</div>
<div class="col">
<div class="content-column">
<div>
<p>{{contentForLabel2}}</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="label-column">
<label>Label 3</label>
</div>
</div>
<div class="col">
<div class="content-column">
<div>
<p>{{contentForLabel3}}</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="row">
<div class="col">
<div class="label-column">
<label>Label 4</label>
</div>
</div>
<div class="col">
<div class="content-column">
<p style="font-weight: bold; color: grey">Content displayed here in text with inline styling</p>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</body>
</html>
All the code can be found in the JS fiddle below I thought it would be easier that way. I am trying to display the Flexbox items horizontally, so that the first 8 and 4 columns are beside each other.
I then want to add the 12 on a totally new line, underneath the 8 and 4 and not beside it, extending the pages length horiztonally and having that horrible scroll.
What have I tried?
.container {
display: flex; /* or inline-flex */
}
So the above code just makes it all go side by side, no matter how many columns you do or if it exceeds 12, I want it to work pretty much exactly like bootstraps grid system if that makes sense.
https://jsfiddle.net/d35g2mra/1/
Wrap only the wanted divs in div and dispaly:flex them (in the same way you can wrap the images section if you want to)
body {
background-color: whitesmoke;
font-family: sans-serif;
margin: 0;
}
#nav {
background-color: #333;
color: #ffff;
padding: 16px;
}
hr {
margin-top: 20px;
margin-bottom: 20px;
}
.wrap{
display:flex;
}
<!DOCTYPE html>
<html lang="en-GB">
<div id="nav">
<div class="container">
<div class="col-md-12">
lol
</div>
</div>
</div>
<div class="container"><br><br><br>
<div class="wrap">
<div class="col-md-8">
I need to put a pretty picture here.
</div>
<div class="col-md-4">
I will place some sort of box here.
</div>
</div>
<hr>
<br>
<div class="col-md-12">
Trending Pages
<div class="col-md-2"><img src="https://phpsocial.com/demo/thumb/a/112/112/1171031268_435428908_1738535611.png"></div>
<div class="col-md-2"><img src="https://phpsocial.com/demo/thumb/a/112/112/1171031268_435428908_1738535611.png"></div>
<div class="col-md-2"><img src="https://phpsocial.com/demo/thumb/a/112/112/1171031268_435428908_1738535611.png"></div>
<div class="col-md-2"><img src="https://phpsocial.com/demo/thumb/a/112/112/1171031268_435428908_1738535611.png"></div>
</div>
</div>
You can do like this:
body {
background-color: whitesmoke;
font-family: sans-serif;
margin: 0;
overflow-x:hidden;
}
#nav {
background-color: #333;
color: #ffff;
padding: 16px;
}
hr {
margin-top: 20px;
margin-bottom: 20px;
}
<html lang="en-GB">
<head>
<title>{{ config('website.name') }}</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flexboxgrid/6.3.1/flexboxgrid.css" type="text/css">
</head>
<body>
<div id="nav">
<div class="container">
<div class="col-md-12">
lol
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-8">
<img src="https://phpsocial.com/demo/thumb/a/112/112/1171031268_435428908_1738535611.png">
</div>
<div class="col-md-4">
I will place some sort of box here.
</div>
</div>
<hr>
<div class="container">
<div class="col-md-12">
<span>Trending Pages</span>
<div class="row">
<div class="col-md-2">
<img src="https://phpsocial.com/demo/thumb/a/112/112/1171031268_435428908_1738535611.png">
</div>
<div class="col-md-2"><img src="https://phpsocial.com/demo/thumb/a/112/112/1171031268_435428908_1738535611.png"></div>
<div class="col-md-2"><img src="https://phpsocial.com/demo/thumb/a/112/112/1171031268_435428908_1738535611.png"></div>
<div class="col-md-2">
<img src="https://phpsocial.com/demo/thumb/a/112/112/1171031268_435428908_1738535611.png">
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Issue: So vertical alignment issue is I have two divs in the last column and I'm trying to get one to stay at top and one to stay at the bottom regardless of how the central column grows. I can work this out by using fixed heights but that's no good in this case.
Here is my code example : JS Fiddle
HTML:
<div class="row" class="property-bundle"><!-- (x) number of these -->
<div class="col-xs-11 wrapper">
<div class="row">
<div class="col-xs-2 pull-left vendor">
<img src="http://placehold.it/100x100" />
</div>
<div class="col-xs-8 properties-list">
<div class="row" class="property-line">
<div class="col-xs-2"><img src="http://placehold.it/80x140" /></div>
<div class="col-xs-10"><p>Flat 1</p></div>
</div>
<div class="row"><hr/></div>
<div class="row" class="property-line">
<div class="col-xs-2"><img src="http://placehold.it/80x140" /></div>
<div class="col-xs-10"><p>Flat 2</p></div>
</div>
<div class="row"><hr/></div>
<div class="row" class="property-line">
<div class="col-xs-2"><img src="http://placehold.it/80x140" /></div>
<div class="col-xs-10"><p>Flat 3</p></div>
</div>
</div>
<div class="col-xs-2 costs"><!-- costs column -->
<div class="row total">
<h3 class="text-right">TOTAL: £1,2M</h3><!--stay at top-->
</div>
<div class="row" class="fees"> <!--stay at bottom-->
<div class="col-xs-12">
<hr/>
<p class="text-right">+ Materials £300K</p>
<p class="text-right">+ Build £100K</p>
</div>
</div>
</div>
</div>
</div>
</div>
CSS:
.wrapper {border: 1px solid black; padding: 10px; margin: 15px;}
.vendor {min-width: 120px;}
.properties-list {background-color: aquamarine}
.costs {vertical-align: top; min-width: 150px; vertical-align: center}
.fees {vertical-align: bottom; }
h3 {font-weight: 400}
h4 {color: green}
.total { margin-right: 0px; }
Hi you can try using flexbox
I just change your html like this:
<div class="col-xs-2 costs">
<!--stay at top-->
<div class="total">
<h3 class="text-right">TOTAL: £1,2M</h3>
</div>
<hr/>
<div class="materials">
<p class="text-right">+ Materials £300K</p>
<p class="text-right">+ Build £100K</p>
</div>
</div>
</div>
Then I add on costs div display:flex;and on total div flex-grow: 1 This flex-grow will push materials on bottom of div.
You just need to add on body, html, row and costs div height:100%
Here is css:
.costs {
vertical-align: center;
display: flex;
flex-direction: column;
height: 100%;
}
.total {
flex-grow: 1;
}
You can see example on this link: https://jsfiddle.net/3L5Lbwhn/9/
Ok I simplified this a bit, but essentially flex did what I needed so many thanks to Edin Puzic for putting me on the right lines! It also allowed me to fix the 1st and last col width and make the middle one dynamic horiontally too.
JsFiddle
<div class="row-flex">
<div class="col-flex-1">
<img src="http://placehold.it/100x100" />
</div>
<div class="col-flex-2">
<div class="row" class="property-line">
<div class="col-xs-2"><img src="http://placehold.it/80x140" /></div>
<div class="col-xs-10">
<p>Flat 1</p>
</div>
</div>
<div class="row">
<hr/>
</div>
<div class="row" class="property-line">
<div class="col-xs-2"><img src="http://placehold.it/80x140" /></div>
<div class="col-xs-10">
<p>Flat 2</p>
</div>
</div>
<div class="row">
<hr/>
</div>
<div class="row" class="property-line">
<div class="col-xs-2"><img src="http://placehold.it/80x140" /></div>
<div class="col-xs-10">
<p>Flat 3</p>
</div>
</div>
</div>
<div class="col-flex-3">
<div class="pos-top">
<div class="row right-text">
TOP right
</div>
</div>
<div class="pos-bottom">
<div class="row right-text">
<p>
BOTTOM right
</p>
</div>
</div>
</div>
</div>
CSS
.row-flex {
height: auto;
display: flex;
flex-flow: row column;
}
.col-flex-1 {
min-width: 200px;
border-left: 1px #ccc solid;
flex: 0 0;
}
.col-flex-2 {
width: 80%;
border-left: 1px #ccc solid;
flex: 1 1;
}
.col-flex-3 {
min-width: 200px;
border-left: 1px #ccc solid;
flex: 0 0;
}
.flex-container {
display: -webkit-flex;
display: flex;
width: 100%;
height: 100%;
background-color: lightgrey;
}
.pos-top {
display: -webkit-flex;
display: flex;
height: 50%;
width: 100%;
-webkit-align-items: flex-start;
align-items: flex-start;
background-color: yellow;
}
.pos-bottom {
display: -webkit-flex;
display: flex;
height: 50%;
width: 100%;
-webkit-align-items: flex-end;
align-items: flex-end;
background-color: green;
}
.right-text {
text-align: right;
width: 100%;
}
This question already has answers here:
How can I make Bootstrap columns all the same height?
(34 answers)
Closed 6 years ago.
I have a couple of widgets in line depending on screen size. Here is my layout:
<div class="col-xl-4 col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="widget">
<div class="name">
Block name
</div>
<div class="description">
Some description goes here
</div>
</div>
</div>
<div class="col-xl-4 col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="widget">
<div class="name">
Block name
</div>
<div class="description">
Some very long description goes here
</div>
</div>
</div>
<div class="col-xl-4 col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="widget">
<div class="name">
Block name
</div>
<div class="description">
Some description goes here
</div>
</div>
</div>
and styles are the following:
.widget {
width: 100%;
margin: 10px;
padding: 10px;
background-color: white;
//height: auto;
height: 80px;
border: 1px silver solid;
font-size: 18px;
}
.name {
font-weight: bold;
height: 40px;
color: #082654;
}
.description {
color: #4AB6E1;
}
Here is the jsfiddle
The problem is that I want to be them of certain height: e.g.80px, cause its the size that will look nice for almost all cases, but rarely I have some longer content inside widget description and then it goes out of the box. So in this case I'd like its height to adapt to content size and all other widgets to its height too. When I set widgets height to auto - only single widget stretches in height and they look uneven. Any ideas how to change the styles so that to achieve what I need?
I you can use jQuery look at this JSFiddle
https://jsfiddle.net/cnoof9hb/
Uses the following to set the height:-
var maxheight = 0;
$('div div.widget').each(function () {
maxheight = ($(this).height() > maxheight ? $(this).height() : maxheight);
});
$('div div.widget').height(maxheight);
This seems like a perfect time for flexbox, I've made a container div to surround all 3 elements and given it display: flex; I've also given display: flex; to each div bellow that (as these are the bits that need to change size).
Have a look
* {
box-sizing: border-box;
}
body {
margin: 0;
}
.container {
display: flex;
flex-wrap: wrap;
}
.container > div {
display: flex;
width: 33.33%;
}
.widget {
width: 100%;
margin: 10px;
padding: 10px;
background-color: white;
border: 1px silver solid;
font-size: 18px;
}
.widget .name {
font-weight: bold;
height: 40px;
color: #082654;
}
.widget .description {
color: #4AB6E1;
}
<div class="container">
<div class="col-xl-4 col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="widget">
<div class="name">
Block name
</div>
<div class="description">
Some description goes here
</div>
</div>
</div>
<div class="col-xl-4 col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="widget">
<div class="name">
Block name
</div>
<div class="description">
Some very long description goes here
</div>
</div>
</div>
<div class="col-xl-4 col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="widget">
<div class="name">
Block name
</div>
<div class="description">
Some description goes here
</div>
</div>
</div>
</div>
I hope this helps.
you can try using diplay:table
.widget {
width: 100%;
margin: 10px;
padding: 10px;
background-color: white;
//height: auto;
height: 80px;
display:table;
border: 1px silver solid;
font-size: 18px;
}
.name {
font-weight: bold;
height: 40px;
color: #082654;
}
.description {
color: #4AB6E1;
}
<div class="col-xl-4 col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="widget">
<div class="name">
Block name
</div>
<div class="description">
Some description goes here
</div>
</div>
</div>
<div class="col-xl-4 col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="widget">
<div class="name">
Block name
</div>
<div class="description">
Some very long description goes here
</div>
</div>
</div>
<div class="col-xl-4 col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="widget">
<div class="name">
Block name
</div>
<div class="description">
Some description goes here
</div>
</div>
</div>
Use float:left to float an element to make the parent element take the cumulative height of it's childrens' height. Also height:auto; to be used in the parent element, as the height is unpredictable.
.widget {
width: 100%;
margin: 10px;
padding: 10px;
background-color: white;
/*height: auto;*/ /* removed this */
border: 1px silver solid;
font-size: 18px;
/* Added these 2 lines */
float:left;
height: auto;
}
.name {
font-weight: bold;
height: 40px;
color: #082654;
}
.description {
color: #4AB6E1;
}
Try below code it does "Adapt height of the elements based on siblings height" but you may need to change it little bit to suit ur needs
<div class="t-row">
<div class="col">Some description goes here Some description goes here</div>
<div class="col">on goes here</div>
<div class="col">here</div>
<div class="col">Some description goes here Some description goes here Some description goes here Some description goes hereSome description goes here Some description goes here</div>
</div>
and css
.t-row{
display: table-row;
}
.col{
display: table-cell;
width: 25%;
border: 1px solid silver;
padding: 15px;
background-color: white;
}
see fiddle here