I need to make a blocks like on the picture
Left block is col-5, right is col-7, which must have two rows with 50% height of the left block.
How to make 50%-height blocks?
.row {
background: #f8f9fa;
}
.col,
.col-5,
.col-7 {
border: solid 1px #6c757d;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row">
<div class="col-5">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis distinctio at, molestias doloremque optio tempora laudantium facere sequi. Tempore aliquid exercitationem accusamus nulla culpa dolorum rerum consequatur impedit quia porro? Lorem ipsum
dolor sit amet.
</div>
<div class="col-7">
<div class="row h-50">
<div class="col">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>
</div>
<div class="row h-50">
<div class="col">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem....
</div>
</div>
</div>
</div>
</div>
You can do it this way, or use Flexbox instead of Bootstrap sizing utilities to create the layout you want. Flexbox has been designed especially to facilitate the creation of this kind of structure.
My mistake is that I set the height for a cols in the right block.
When I wrapped each .col in a .row and set a height of 50% for these rows, everything worked as it should. Like in droduit answer.
Related
i have the problem with tailwind that the w-96 show correct and w-86 show not correct, what is the problem ?
<body>
<div class="mx-auto mt-20 mx-10">
<div class="mx-auto justify-center w-98">
<img class="" src="/image-product-mobile.jpg" alt="" srcset="" />
<h1 class="font-bold">Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Incidunt, accusamus.</h1>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Cupiditate praesentium eius deserunt aliquid cum saepe quod nemo provident magni modi.</p>
</div>
</div>
</body>
</html>
here the picture
w-86 is not a Tailwind class.
https://tailwindcss.com/docs/width
See the section on "Customizing your theme" and "Arbitrary values" on the above link.
I'm trying to figure out how to dynamically calculate the width and padding-left within a custom div within a bootstrap "container-fluid".
The setup looks like this:
<div class="container-fluid">
<div class="row">
<!-- Text - Slider component -->
<div class="container-fluid">
<div class="row">
<div class="col-6 text"></div>
<div class="col-6 slider"></div>
</div>
</div>
<!-- Text - Slider component -->
<div class="container">
<div class="row">
<div class="col-12 text-to-line-up-with">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto, totam.
</div>
</div>
</div>
</div>
</div>
Within the text-slider component I would like the col-6 "text" to lineup with the text asif it lives in the regular 'container'.
I understand that I need to use some sort of calc() for the padding-left and width, but I can't wrap my head around this.
Any help or suggestions are very much welcome!
Disclaimer, this is an old project, which is still using bootstrap 3, and I can't change the html structure.
I also made a codepen to give a better picture
You don't have to calculate the width. The solution can be much easier with simply adding linear-gradient to your container-fluid background.
The HTML code structrure looks like this:
<div class="container-fluid red-blue py-4">
<div class="row">
<div class="container">
<div class="row">
<div class="col-6 red">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis dolorem, non officiis aperiam facilis dicta fugiat velit obcaecati rerum odio quo a!</div>
<div class="col-6 blue">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis dolorem, non officiis aperiam facilis dicta fugiat velit obcaecati rerum odio quo a!</div>
</div>
</div>
</div>
</div>
<br>
<div class="container">
<div class="row">
<div class="col-6 red">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis dolorem, non officiis aperiam facilis dicta fugiat velit obcaecati rerum odio quo a!</div>
<div class="col-6 blue">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis dolorem, non officiis aperiam facilis dicta fugiat velit obcaecati rerum odio quo a!</div>
</div>
</div>
And the CSS:
.red-blue {
background: linear-gradient(to right, red 50%, blue 50%,blue 100%);
}
.red {
background-color: red;
}
.blue {
background-color: blue;
}
Hope this helps.
I want to force my text to always be two lines.
If it's longer than two lines then it should have "..." at the end.
If it's shorter, then the second line should be empty.
Can this be done with CSS only?
I'm posting this again cause someone closed it as duplicate but linked a solution which isn't what I'm asking. This is the solution linked:
Limit text length to n lines using CSS
but it doesn't cover one of my cases (when the text is shorter than 2 lines)
EDIT: Here's a JSFiddle showing how in my other case it doesn't work:
https://jsfiddle.net/Lukgzefy/
<div class="cards">
<div class="card">
<div class="img"></div>
<h2>lorem ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo placeat earum, recusandae maiores unde et.</p>
</div>
<div class="card">
<div class="img"></div>
<h2>lorem ipsum dolor sit amet consectur amet adipiscing</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo placeat earum, recusandae maiores unde et.</p>
</div>
<div class="card">
<div class="img"></div>
<h2>lorem ipsum dolor sit amet consectur consectetur adipisicing elit. Explicabo</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo placeat earum, recusandae maiores unde et.</p>
</div>
</div>
As you can see, the first one should occupy 2 lines (and the second should be empty) but instead it only takes one, throwing the whole thing off.
Basically, we must have this layout where in an image must spill out of the container and the text fills in the space created by the image (that is offset to the left).
We currently have this structure:
<div class="container">
<div class="row">
<div class="col">
Some paragraph
</div>
<div class="row">
<div class="col-5 body-img-col">
<div class="body-img-wrap">
<img src="images/some-image.jpg" alt="" />
</div>
</div>
<div class="col-7">
Some paragraph
</div>
</div>
<div class="col">
Some paragraph
</div>
</div>
</div>
Where body-img-wrap img is set to margin-left: -100px;. However, there's a gap that the image creates and the text won't fill it in as it's not in the same column. What we need is for the text to fill in the gap that the image creates when it's offset to the left.
How do we achieve this kind of layout?
Here is my solution,
I divided the image and text into 2 section, Then I gave the width to the text-section equal to width of the image using
width: calc(100% - 200px);
.left-sec {
width: 200px;
height: auto;
}
.right-sec {
width: calc(100% - 200px);
padding-left: 15px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="container">
<div class="row">
<div class="col">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem error voluptas perspiciatis, possimus temporibus repudiandae facilis. Reiciendis eius eveniet voluptas est sapiente deserunt veritatis, eos earum et. Beatae, quae eaque.
</div>
<div class="row">
<img class="left-sec" src="https://placehold.it/200x200" alt="" />
<div class="right-sec">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime ab, quaerat. Necessitatibus adipisci doloremque optio aperiam placeat quis laudantium, quos quia iste hic qui rerum architecto quibusdam dolor? Perferendis, iure.
</div>
</div>
<div class="col">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam, officia, consequatur. Commodi fugit, soluta tenetur cumque eum laboriosam unde, expedita nemo eos. Praesentium velit quam itaque vel harum sit odit.
</div>
</div>
</div>
</div>
I have a job site designed with with css grid. The job listings and email subscribe are divided bygrid-template-columns: (3fr, 1fr), the problem is is that the email subscribe box is the same height as the job listings (if there are 10 listings for example this is quite a large email subscribe box), how can I change this? (Note: jsfiddle included at bottom will make it much more clear and I have tried to set a height value on #item2 and this did not work) Thanks in advance!
.grid {
display: grid;
grid-template-columns: 3fr 1fr;
}
#item1 {
margin-left: 15px;
}
#item1>h1 {
text-align: center;
}
#list_of_jobs {
list-style: none;
}
#item2 {
text-align: center;
margin-right: 15px;
border: 3px solid #eeeeee;
}
<div class="grid">
<div id="item1">
<h1>Jobs in 10529</h1>
<table>
<tbody>
<div>
<ul id="list_of_jobs">
<li>
<h2>Job 1</h2>
<p class="lead"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus itaque minus corporis earum consequuntur unde saepe consequatur commodi harum ut. </p>
</li>
<li>
<h2>Job 2</h2>
<p class="lead"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus itaque minus corporis earum consequuntur unde saepe consequatur commodi harum ut. </p>
</li>
<li>
<h2>Job 3</h2>
<p class="lead"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus itaque minus corporis earum consequuntur unde saepe consequatur commodi harum ut. </p>
</li>
<li>
<h2>Job 4</h2>
<p class="lead"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus itaque minus corporis earum consequuntur unde saepe consequatur commodi harum ut. </p>
</li>
</ul>
</div>
</tbody>
</table>
</div>
<div id="item2">
<form>
<p>Subscribe to recieve job alerts near 105</p>
<!-- query stores zip code-->
<input type="text" placeholder="Email">
<button class="btn" type="submit">Subscribe</button>
</form>
</div>
</div>
<!-- close grid div-->
http://jsfiddle.net/bmy0s93k/2/
Add this to your code:
#item2 {
align-self: start;
}
revised fiddle
A default setting in a grid container (like in a flex container) is align-items: stretch. This means that grid items (like flex items) will stretch the full length of the relevant axis in the container.
You need to override the default.
References:
ยง 6.2. Block/Cross-Axis Alignment: the align-self property
How to disable equal height columns in Flexbox?