I have an app that uses Bootstrap 5. In this app, I need to layout some content that looks like this:
+----------------------+-----------------------------------------------+
| Assignment Begins On | [date picker goes here] |
+----------------------+-----------------------------------------------+
| v | |
+----------------------+-----------------------------------------------+
| Continues For | [slider that fills remaining width goes here] |
+----------------------+-----------------------------------------------+
The first column need to be the same size, with the content centered. The second column needs to fill the remaining width. Based on my understanding, I should use a d-grid because I'm trying to layout things using rows and columns. However, the column sizes shouldn't be evenly sized. Instead, they should be based on a) the content of the first column and b) the space available in the parent. This made me think I should be using d-flex instead. However, if I use d-flex, I can't meet the requirements of a. So, I reverted back to using a d-grid. But now, I can't center the content in the first column because the columns aren't the same size. I currently have:
<div class="d-grid">
<div class="row">
<div class="col-auto text-center" style="background-color:yellow;">Assignment Begins On</div>
<div class="col">[date picker]</div>
</div>
<div class="row">
<div class="col-auto text-center" style="background-color:orange;">v</div>
</div>
<div class="row">
<div class="col-auto text-center" style="background-color:red;">Continues For</div>
<div class="col">[slider]</div>
</div>
</div>
I added the background-color details to show that the columns are different size. How do I display content in a grid layout in Bootstrap 5 that allows me to meet the needs of a and b?
As explained here, there's no simple solution for this problem. I'd recommend using CSS grid. It would only require a little extra CSS...
HTML
<div class="d-grid gap-2">
<div class="col text-center text-nowrap" style="background-color:yellow;">Assignment Begins On</div>
<div class="col"> Date picker</div>
<div class="col text-center" style="background-color:orange;">v</div>
<div class="col"></div>
<div class="col text-center text-nowrap" style="background-color:red;">Continues For</div>
<div class="col"> Slider </div>
</div>
CSS
.d-grid {
grid-template-columns: 0fr 1fr;
}
Codeply
Related
This question already has answers here:
Equal width flex items even after they wrap
(2 answers)
Closed 4 years ago.
I have a basic Bootstrap 4 grid like this one:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col">
some content
</div>
<div class="col">
some content
</div>
<div class="col">
some content
</div>
<div class="col">
some content
</div>
<div class="col">
some content
</div>
<div class="col">
some content
</div>
<div class="col">
some content
</div>
</div>
</div>
Columns are correctly stretching and filling out the row width, but on some viewports last column is sent to next row (since it doesn't fit) and somehow stretching too much (and taking full width of row).
How can I prevent this from happening?
Use flex-nowrap on the row...
<div class="container">
<div class="row flex-nowrap">
<div class="col">
some content
</div>
<div class="col">
some content
</div>
<div class="col">
some content
</div>
<div class="col">
some content
</div>
<div class="col">
some content
</div>
<div class="col">
some content
</div>
<div class="col">
some content
</div>
</div>
</div>
https://www.codeply.com/go/w8H4wPL8Vj
Columns inside a row can be styled using bootstrap class col-xs-* so that all your columns fit into the same row instead of going to the next row.
For example,
<div class="container">
<div class="row">
<div class="col-xs-4">
</div>
<div class="col-xs-4">
</div>
<div class="col-xs-4">
</div>
</div>
</div>
You can use the bootstrap breakpoints in col by add extra few classes such as:
col-lg-x where x is a given number in the 12 grid system provided by bootstrap, for example you want all seven column to be on one row on large screens, and it should breakdown to two on each row on mobile screen, you simply add a class col-xs-x where x is a given number from 1 to 12, by giving it col-xs-6 col-md-3 col-lg-1 where xs represents small and extra small devices, md represents medium devices and lg represents large screen devices.
You're simply translating that on xs devices it should be two on a row and on md devices it should be four on a row and lg devices should be that seven column on a row.
Link to understand more http://getbootstrap.com/docs/4.1/layout/grid/
I am having trouble with my css. I am trying to have my contact information, the quote, and my contact form to be in the same row but different columns. And also why is it that my html doesn't all fit on one page, I can scroll to the rigth and there's just empty white space. I figure its because I added -1.23em in my navbars margin; However, I only did this because my navbar was not filling the whole page. Here is a link to my gist and bitballon. Thank you in advance.
https://gist.github.com/bklynbest/a19565b1b5289f045919e76d657848ea
http://sad-goodall-e4f115.bitballoon.com
You have a .row div in the nested directly under the body on line 103 that is causing the page to spread past 100% width
Bootstrap requires a containing element to wrap site contents and
house our grid system. You may choose one of two containers to use in
your projects. Note that, due to padding and more, neither container
is nestable. bootstrap containers
Regarding the contact info your nesting and class names are not correct, you currently have the following:
<div class="container-fluid" id="contact">
<div class="row">
<div class="column">
<div class="col-xs-12 col-md-12">
<div id="quote">...</div>
</div>
<div class="col-lg-4 col-md-4">
<div class="contact">...</div>
</div>
</div>
</div>
</div>
<form>
you will need to change this to follow bootstrap3 grid conventions, something like the following:
<div class="container">
<div class="row" id="contact">
<div class="col-sm-4">
<div id="quote">...</div>
</div>
<div class="col-sm-4">
<div class="contact">...</div>
</div>
<div class="col-sm-4">
<form>
</div>
</div>
</div>
I'm using a Bootstrap grid to create a quad chart, and leveraging the CSS3 flexbox layout mode discussed here to make each column in the same row the same height. However, I want to use a Bootstrap well in each quad to highlight the "quad-ness" of the chart and I can't seem to figure out how to get the wells to fill all the space in the column divs.
<div class="row row-eq-height">
<div class="col-md-6">
<div class="well">
hello<br/>world<br/>how<br/>are<br/>you?
</div>
</div>
<div class="col-md-6">
<div class="well">
hi!
</div>
</div>
</div>
<div class="row row-eq-height">
<div class="col-md-6">
<div class="well">
hi!
</div>
</div>
<div class="col-md-6">
<div class="well">
hello<br/>world<br/>how<br/>are<br/>you?
</div>
</div>
</div>
I have a playground here (be sure to go full screen on the result to see the quad chart).
I tried modifying the well class' CSS to set height to 100%, but that just seems to increase the height of the outer divs as well (example here).
Any ideas how I can get the wells to fill up the divs they're in without increasing the height of the divs?
Edit #1
To be clear, I'm not asking how to get all of the columns in a row the same height. The Flexbox solution using the row-eq-height class does that for me.
What I'm trying to figure out is how to make the Bootstrap well within a column div be the full height of the column div, regardless of how much content the well contains.
I've updated my two examples (linked above) to include border lines around the column divs to try and better articulate what I'm talking about.
Check this DEMO
<div class="row row-eq-height">
<div class="col-xs-6 "><div class="well">column 1</div></div>
<div class="col-xs-6 "><div class="well">column 2<br>this is<br>a much<br>taller<br>column<br>than the others</div></div>
</div>
<div class="row row-eq-height">
<div class="col-xs-6 "><div class="well">column 1</div></div>
<div class="col-xs-6 "><div class="well">column 2<br>this is<br>a much<br>taller<br>column<br>than the others</div></div>
</div>
I need two divs to sit side by side, and inside those divs will be divs that have bootstrap 3 classes. The problem is that when I restrict the left div, for example, to 50% by using col-xs-6, the col-xs-... classes on the child elements then only respond to their parent's width.
For clarity:
The purple divs' widths are based on a percentage of their parent, whereas I'd like them to be the same width as though they were a direct child of container whilst being able to keep them separate (and wrap them) from the other adjacent div (each div labelled col-xs-6 will be rendered from entirely different server-side controls).
NOTE: Ignore the fact I'm styling these for an XS display for now, this is only temporary while I work out the styles then I'll amend them accordingly.
For the three purple divs you would use col-xs-4
http://getbootstrap.com/css/#grid-nesting
The sum of the inner divs should add up to 12
You should add another row internally to create a new instance of your 12 columns. You might want to have a look at what Bootstrap calls Nesting Columns
<div class="container">
<div class="row">
<div class="col-xs-6 blue-back">
<div class="row">
<div class="col-xs-4 black-back">
</div>
<div class="col-xs-4 black-back odd">
</div>
<div class="col-xs-4 black-back">
</div>
</div>
</div>
<div class="col-xs-6 blue-back">
<div class="row">
<div class="col-xs-4 black-back">
</div>
<div class="col-xs-4 black-back odd">
</div>
<div class="col-xs-4 black-back">
</div>
</div>
</div>
</div>
</div>
try this JSFiddle
I have a problem with a three column layout in bootstrap 3.
When in Full Desktop View, I have a standard 3 col layout, but on responsive, I have the 3rd column placed underneath and full width.
The problem I'm getting is that, on responsive, the 3rd column is becoming 100% height and overlapping the other 2 columns above.
See screenshots below.
I've replicated a simple example below.
<div class="row">
<div class="col-sm-2 col-lg-2"></div>
<div class="col-sm-8 col-lg-8"></div>
<div class="col-sm-12 col-lg-2"></div><!--full with on responsive view-->
</div>
Is this a known issue with bootstrap3? Or is my markup wrong?
DESKTOP LAYOUT
RESPONSIVE LAYOUT (the blue column is appearing over the top the green and red)
Cheers
Had another look over the docs. The answer is to use a clearfix ie.
<div class="row">
<div class="col-sm-2 col-lg-2"></div>
<div class="col-sm-8 col-lg-8"></div>
<!--clearfix here-->
<div class="clearfix visible-sm"></div>
<div class="col-sm-2 col-lg-2"></div><!--full with on responsive view-->
</div>
Try this,
<div class="row">
<div class="col-sm-2 col-lg-2"></div>
<div class="col-sm-8 col-lg-8"></div>
<div class="col-sm-2 col-lg-2"></div><!--full with on responsive view-->
</div>