Bootstrap flexbox, 2 row, 1 column layout and align contents - html

I want to have a full width 2 row, "1 column" layout, that takes up the entire viewport. The top row should have it's contents on the bottom of that row, and the bottom row should have it's contents on the top of that row.
Using some examples from bootstrap, I was able to achieve this: https://codepen.io/afagard/pen/QWpJWze
However, I am not sure if I am doing it correctly even though it looks as expected. Specifically, I tried to set the container to 100vh but that did not result in any changes to flexboxes so I've got each row at 50vh. I mostly do backend work and am trying to learn flexboxes.

Here is an example of a flexbox solution using just the bootstrap classes and no additional css:
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<div class="container-fluid p-0 vh-100 d-flex flex-column text-center">
<div class="flex-grow-1 d-flex flex-column bg-primary">
<div class="mt-auto">
Top half
</div>
</div>
<div class="flex-grow-1 d-flex flex-column bg-secondary">
<div class="mb-auto">
Bottom half
</div>
</div>
</div>

Related

How can I achieve this two-column layout with Tailwind?

I need to create three divs positioned like below:
Green div should be 75% width and red divs should have 25% width and 50% of height, placed in column. And everything should be responsive.
Right now I have something like here:
<div className="w-full">
<div className="w-3/4 float-left">
</div>
<div className="w-1/4 float-right">
<div id="red-one"></div>
<div id="red-two"></div>
</div>
</div>
but it not this same as i expected :/
can someone tell me how to do this?
thanks for any help!
Oldish option (see nowdays below that one) :you can use and mix the table-layout display and regular block display via tailwind class
Possible example
/* your scrennshot's borders */
div div {border:solid red;}
div.table-cell{border-color:green}
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet"/>
<div class="table w-full p-2">
<div class="table-cell w-3/4 p-2">hello</div>
<div class="p-2 ml-2"> the</div>
<div class="p-2 mt-2 ml-2">world</div>
</div>
any draw back ?
yes, if both content of the rights side div are shorter than the content of the left one, it wont fill the column
nowdays option: grid
Advised example:
div div {border:solid red;}
div div:first-child{border-color:green}
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet"/>
<div class="grid grid-cols-4 p-2 grid-cols-2 gap-2">
<div class="col-1 col-span-3 row-span-2 p-2">hello</div>
<div class="col-2 p-2"> the</div>
<div class="col-2 p-2">world</div>
</div>
drawbacks ? none, but you will have to create your own class to set the grid-template-colums property to match your columns's widths as commented by #bqardi
Container: grid grid-cols-4 and green div: col-span-3 row-span-2? No need to create own class

Aligning Images side-by-side with columns in bootstrap 4

I am using Bootstrap 4, and trying to align my columns so that I have 2 images next to each-other on medium or larger viewports, but they keep aligning themselves one on top of the other.
<div class="row">
<div class="col-6">
<img class="img-fluid"
src="img/1.PNG">
</div>
<div class="col col-5 d-none d-md-block">
<img class="img-fluid"
src="img/2.PNG">
</div>
</div>
Image of code and example
That should work just fine if you take all the extra bits from the Row classes and just have class="row" Your column widths are both set to 5 though, 6 would be ideal for centering.
To assist with sleeker code, on the img classes try removing it all except for img-fluid
Your column classes are wrong. col fills all available space, and col-5 takes 5 columns on all screens. And in this case your col-5 is overriding your col anyway. What you actually need to do:
Use col-md-6 on both the images in place of col col-5. Your images will align themselves side by side from medium and up.
Also, you do NOT need to add d-none d-md-block to the parent and all the child classes. If you don't want to show a particular div in less than md, using it on the parent is enough.
For demonstration purposes I went ahead and used a dummy image that I could get to work. Your structure should be as follows.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<div class="row">
<div class="col-6 col-lg-6 col-sm-6">
<img src="https://dummyimage.com/600x400/000/fff">
</div>
<div class="col-6 col-lg-6 col-sm-6">
<img src="https://dummyimage.com/600x400/000/fff">
</div>
</div>
Using the different Large, Medium, and Small bootstrap classes allows for your row to adjust on different screen sizes, while maintaining that row structure. This link here is also very helpful for learning the system.

Why bootstrap 4 row doesn't expand to full available width?

As I understand flexbox fills available space in width.
I inspected the the row many times and I really do not understand why it does not fill all available space in width. It's display flex + nothing strange here. And as you can see chrome tells that there is a lot of available space to fill.
Before this row div I created another div but only d-flex and background-red; and it worked correct and filled all available width space. While this row doesnt do this. And the question is why?
I also searched internet looking for answer but could not find any.
<div class="container">
<div class="row justify-content-md-center">
<div class="col-10 pb-2 text-justify news_content">
test
</div>
</div>
</div>
https://jsfiddle.net/g1xLhz6r/
Changing the bootstrap class .container to .container-fluid and changing the class .col-10 to .col gives the result you describe. Remember that .col-10 means use 10 of the 12 available columns so puts a 1-column space on either side of that div.
.news_content {
background: yellow;
}
<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-fluid"><!-- Change to container-fluid -->
<div class="row justify-content-md-center">
<div class="col pb-2 text-justify news_content">
test
</div>
</div>
</div>
You can also just eliminate the class .container or .container-fluid from the outer div and add the bootstrap class no-gutters to the div with class of row as shown here (you still need to use .col instead of .col-10):
.news_content {
background: yellow;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div><!-- removed class = container -->
<div class="row no-gutters justify-content-md-center"><!-- added no-gutters -->
<div class="col pb-2 text-justify news_content">
test
</div>
</div>
</div>
no-gutters

Boostrap and maximum cell widths

I have the following:
<div class="container-fluid">
<div class="row">
<div class="col-lg-1">Description MKT</div>
<div class="col-lg-11">
<!-- ... -->
</div>
</div>
</div>
At 1754 pixel screen width "Description MKT" does not wrap. But at 1697px width there is a line break between "Description" and "MKT". I can make the columns col-lg-2 and col-lg-10 which looks good at the smaller end of the "large" scale resolution, but at 1700+ screen pixel width the first column is far too wide.
Is there an easy way to lay out columns in bootstrap so you don't get too much whitespace? Ideally I need a max-width on columns without breaking bootstrap.
Use col-auto on the first one, and col on the second.
This should make the first column only take the needed width, and the second take the rest of the row.
Example:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<div class="container-fluid">
<div class="row">
<div class="col-auto bg-danger">Description MKT</div>
<div class="col bg-success">
Some other content
</div>
</div>
</div>

How to center div within col-md-12 in bootstrap

I have problem with centering components within col-md-12. For example I have 12 columns with <h1> or <h2> inside. I want to <h1> to be centered.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-12">
<div id="naglowek">
<h1>Something</h1>
</div>
</div>
</div>
</div>
I tried to access css class text-center or block-center to divs, but everytime <h1> was floated to the left. I need have this centered and set padding on my own. How can I solve this?
<div class="col-md-12 text-center"> works for bootstrap, no need to add any style unless you have already some style for h1. even if that's the case, you can use .text-center for h1
seems you are using width in that parent div. don't do that ever if you need content to be 100% width. and as per background, if you need 100% area occupy the background, you can simply use it in the div if not, you better use it with some pseudo classes :before or :after
In bootstrap 4
I know it's not the direct answer to this question but it may help someone
to center the childs horizontally, use bootstrap-4 class
justify-content-center
to center the childs vertically, use bootstrap-4 class
align-items-center
but remember don't forget to use d-flex class with these
it's a bootstrap-4 utility class, like so
<div class="d-flex justify-content-center align-items-center" style="height:100px;">
<span class="bg-primary">MIDDLE</span>
</div>
copy and paste this snippet to check how it works
Note: make sure to add bootstrap-4 utilities if this code does not work.
Hope this will help someone.
Add class="text-center" to div.
<div id="naglowek" class="text-center">
<h1>Something</h1>
</div>
text-center class is from bootstrap.
You can add the text-center class to the h1.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-12">
<div id="naglowek">
<h1 class="text-center">Something</h1>
</div>
</div>
</div>
</div>