What I want to achieve is to make the the columns with number 1 and 2 independent from the height size of the column with text, so if added later on another div it will be directly placed under the first 2 columns without skipping any empty gaps because of the third column long height,
like this:
Columns with gap
Columns without gap
I tried this but it didn't work.
<div class="row text-center ">
<div class="col-9 ">
<div class="row border">
<div class="col-9 border">1</div>
<div class="col-3 border">2</div>
</div>
</div>
<div class="col-3 border">
"Lorem ipsum dolor sit amet, consectetur adipiscing elit
</div>
</div>
Thanks for any help.
I think you can use align-items Property in CSS Flexbox Layout!!
Related
I have a design with 12 columns and a gap between them.
How can I code using TailwindCSS to fit guidelines for width by columns as well as align elements on separate rows?
For example, I need to have 3 rows, and each row's width is specified per amount of columns:
|O|O|O|O|O|O|X|X|X|X|X|X|
|O|O|O|O|X|X|X|X|X|X|X|X|
|O|O|X|X|X|X|X|X|X|X|X|X|
1st row takes 6 columns,
2nd row takes 4 columns and
3rd row takes 2 columns
I figured out that I can split it into separate elements and provide grid-cols-12 per each row, e.g.:
<div class="grid grid-cols-12">
<div class="col-span-6">
<h1 class="text-5xl text-white font-bold mb-3.5">lorem ipsum dolor</h1>
</div>
</div>
<div class="grid grid-cols-12">
<div class="col-span-4">
<p class="text-lg text-white mb-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer blandit velit vel dolor pharetra, a placerat justo euismod.</p>
</div>
</div>
<div class="grid grid-cols-12">
<div class="col-span-2 text-left">
Learn more
</div>
</div>
Or I can change grid-flow to column and provide number of rows, e.g.:
<div class="grid grid-flow-col grid-rows-3 grid-cols-12">
<div class="col-span-6">
<h1 class="text-5xl text-white font-bold mb-3.5">lorem ipsum dolor</h1>
</div>
<div class="col-span-4">
<p class="text-lg text-white mb-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer blandit velit vel dolor pharetra, a placerat justo euismod.</p>
</div>
<div class="col-span-2 text-left">
Learn more
</div>
</div>
But this way I always need to keep in mind that after adding a new element/row I need to change also class from grid-rows-3 to grid-rows-4 and etc. As well as all rows get the same height, but I need so it would be calculated dynamically
Is there more accurate approach to create 3 rows and manage each row width by `col-span-..``?
I'm working with bootstrap 4. I have one row with 3 columns. However, I currently have the center column set to col-7, but I need it to be a flexible column that takes up all of the remaining horizontal space in the row. I have tried flex-col, but it just seems to break everything. If you look at the jsfiddle, you'll see that the right arrow column isn't all the way at the end, which is where I'd like it to be. I also plan on adding a 4th column between the right arrow and the lore ipsum quote. When the viewport size changes to a smaller resolution, all of the elements and content should still be visible. I've found solutions where this is not the case, but that doesn't work for me. Users need to be able to click on the arrows regardless of the screen size. Any insight into this for those of you with bootstrap XP?
https://jsfiddle.net/fce1ojsp/
Code sample required when linking to jsfiddle:
<div class="container touchpointContainer">
<div class="row tall">
<div class="col-1 centerVertically">
<a onclick="advanceReview(-1)">
<img class="prev" src="leftArrow.png"/>
</a>
</div>
<div class="col-7 centerVertically mainText">
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore"
</div>
<div class="col-1 centerVertically">
<a onclick="advanceReview(1)">
<img class="next" src="rightArrow.png"/>
</a>
</div>
</div>
</div>
You can use flexbox for that. The key is flex grow 1 on the center element.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-flex flex-row">
<div class="p-2 border">Flex item 1</div>
<div class="p-2 border flex-grow-1">Flex item 2</div>
<div class="p-2 border">Flex item 3</div>
</div>
I am super new to coding and web development and I am not sure how to solve my issue:
I am trying to add an image to the column that I created using bootstrap 4 grid system. However, as soon as I add the image, a horizontal scrollbar appears on the screen and I'm not sure why.
Here is a screenshot of what happens: https://gyazo.com/c383ecb9180181349363e0636047867c
<div class="container">
<div class="row">
<div class="col-6">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>
<div class="col-6">
<img src="https://images.unsplash.com/photo-1585600270404-543d0eac85e1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3042&q=80">
</div>
</div>
My second issue is that although the horizontal scrollbar gets removed when I use the "img-fluid" class for my image, however when I change the container to container-fluid so that it covers the entire width of the screen and then use the class "px-0" for my container to remove the extra padding, I once again get horizontal scrollbars appearing on my screen.
<div class="container-fluid px-0">
<div class="row">
<div class="col-6">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>
<div class="col-6">
<img class="img-fluid" src="https://images.unsplash.com/photo-1585600270404-543d0eac85e1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3042&q=80">
</div>
</div>
The root cause of the problem is due to no restriction on 'width' being applied to the image.
The image is very big and hence, it is causing the horizontal scroll bar to appear.
Bootstrap provides a class called 'img-fluid' to resolve this common issue.
The horizontal scroll bar can be avoided by specifying the image class of 'img-fluid', as shown below.
The second problem with the use of container-fluid px-0 can be fixed by specifying the px-lg-5 class instead of px-0.
(px-lg-5 works well for wide sections / outer-most divs)
Working example with 'img-fluid' and container-fluid px-lg-5 classes:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">
<title>Bootstrap - responsive image</title>
</head>
<body>
<div class="container-fluid px-lg-5">
<div class="row">
<div class="col-6">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>
<div class="col-6">
<img class="img-fluid"
src="https://images.unsplash.com/photo-1585600270404-543d0eac85e1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3042&q=80">
</div>
</div>
</body>
</html>
Output:
More information:
https://getbootstrap.com/docs/4.0/content/images/
Either you can set overflow : hidden to the second column container if you want your page to not scroll, or you can set height and width of the image to avoid scrolling and to make the whole image visible.
<div class="col-6">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>
<div class="col-6" style="overflow: hidden">
<img height="100px" width="100px" src="https://images.unsplash.com/photo-1585600270404-543d0eac85e1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3042&q=80" />
</div>
Learn more about overflow property at https://www.w3schools.com/css/css_overflow.asp and image attributes at https://www.w3schools.com/html/html_images.asp
To solve your second problem, just add the margin:0 to the <div class="row">
Using Twitter-Bootstrap, I have a section of a page that includes a sidebar (which does not take up the whole page, just spans down to the bottom of this section). I have several sections to the right of the sidebar, each of which contain an image on one side, some text on the other, and require a bottom-border.
I'm having trouble with the bottom-border. Since each section is contained in a div, and everything's floated using Bootstrap columns, the divs are 0 height and the borders all float to the top.
EDITED for clarification: I need two distinct columns in this section - a left-hand one (spanning 3 columns) that contains only the sidebar (and takes up the 3 columns all the way to the bottom, leaving blank space after the list), and one (spanning the remaining 9 columns) that contains the story-sections but that stays on the right-hand side of the page.
EDITED to include image (grey lines are included for reference and will not show up on the page, black lines are the borders I'm trying to apply)
Attempted solutions:
Bottom-border on individual elements: I need one solid line across the bottom of each section, so I can't apply bottom-border to both the image and the text.
Clearfix: Since I have this sidebar, I can't use a clearfix, because it pushes everything down past the sidebar.
Overflow: Using overflow causes the images to shrink (which I don't quite understand, but it doesn't help with the border either).
How can I create bottom borders for each of these sections?
<section class="stories">
<div class="container">
<h2>Section header</h2>
<div class="col-sm-3 sidebar">
<h6>list of stories</h6>
<ul>
<li>list-item</li>
<li>list-item</li>
<li>list-item</li>
<li>list-item</li>
</ul>
</div>
<section class="story-section">
<div class="col-sm-3">
<img src="http://placehold.it/330x220">
</div>
<div class="col-sm-6">
<h6>keyword</h6>
<h3>Header of section</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eleifend dictum neque sed laoreet ...</p>
</div>
</section>
// (there are three more sections with the same class of "story-sections", plus other code on the page, but I've tried to simplify it as much as possible here.)
</div>
</section>
css:
html, body {
height: 100vh;
}
.stories {
.sidebar {
height: 100vh;
}
.story-section {
border-bottom: 1px solid $grey;
}
}
I'm still fairly new with Bootstrap, so there may be a very simple solution, but I haven't been able to track it down. Any help is very welcome!
if you want to have a sidebar with 3 columns + a left section with the remaining 9 columns, then you need to set col-*-9 in your story-section
Note: in bootstrap, you need to have .row right below .container or between nested col-*
html,
body {
height: 100vh;
}
.sidebar {
height: 100vh;
background: lightblue
}
.story-section {
border-bottom: 1px solid grey;
}
img {
margin-top: 10px
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<section class="stories">
<div class="container">
<div class="row">
<h2>Section header</h2>
<div class="col-xs-3 col-sm-3 sidebar">
<h6>list of stories</h6>
<ul>
<li>list-item</li>
<li>list-item</li>
<li>list-item</li>
<li>list-item</li>
</ul>
</div>
<section class="story-section col-xs-9 col-sm-9">
<div class="row">
<div class="col-xs-6 col-sm-6">
<img class="img-responsive" src="http://placehold.it/330x220">
</div>
<div class="col-xs-6 col-sm-6">
<h6>keyword</h6>
<h3>Header of section</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eleifend dictum neque sed laoreet ...</p>
</div>
</div>
</section>
<section class="story-section col-xs-9 col-sm-9">
<div class="row">
<div class="col-xs-6 col-sm-6">
<img class="img-responsive" src="http://placehold.it/330x220">
</div>
<div class="col-xs-6 col-sm-6">
<h6>keyword</h6>
<h3>Header of section</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eleifend dictum neque sed laoreet ...</p>
</div>
</div>
</section>
</div>
</div>
</section>
as you can see on this jsfiddle, if you play with the window size, the lorem ipsum text sometimes goes outside the white container.
I can't figure out why, because when I look at the code, everything seems to be embedded within the main container so I would expect the text to adapt the fluidly adapt to the window size.
What is the issue?
Thanks,
<section>
<div class="container content">
<div class="row">
<div class="col-md-3 bordering">
<h2>Qui <b>sommes-nous?</b></h2>
<h3>Actifs depuis </h3></div>
<div class="col-md-9">
<div class="title-block">
<p>
Lorem ipsum dolor sit amet, connecteur adipiscin
<p>
etc.
It is because you have applied a fixed width to .container:
.container {
width: 1260px; /* remove or edit this line */
}