How would i go about achieving this layout, in a responsive scenario (ie 25% width), but each block have the same height:
_ _ _ _
|_|_|_|_|
|_|___|_|
|_|_|_|_|
Notice the middle block occupies (50% of the width), that middle block contains text, but the square images are images (that are square, giving its size).
Should i be using display: table mixed with display: table-cell and display: table-row? Or is there nifty css trick.
Flexbox is really cool but we are not yet at 100% for support, so I do not yet use it. I would probably check out something like www.shelvesgrid.org. Then have a width: 100% on the images within the boxes and if they are all perfectly square, it should work.
Your structure will look like this:
<div class="row">
<div class="column-3"></div>
<div class="column-3"></div>
<div class="column-3"></div>
<div class="column-3"></div>
</div>
<div class="row">
<div class="column-3"></div>
<div class="column-6"></div>
<div class="column-3"></div>
</div>
<div class="row">
<div class="column-3"></div>
<div class="column-3"></div>
<div class="column-3"></div>
<div class="column-3"></div>
</div>
An your CSS is just img {width: 100%}
Related
I am currently designing a website and need to know if I can use container tag inside a container-fluid tag? Is it a good design approach to use that.
You can do this if you want, though it is generally not necessary, as their primary purpose is to be an external wrapper. The main thing to be aware of is the 15px padding on either side of a Bootstrap container, as well as their varying max-width media queries.
When nested, a child .container will not fill the width of the screen at any point.
Bootstrap Containers overview.
Bootstrap.css Source Code. Open this, ctrl + f and search .container, .container-fluid, and the sm, md, lg, and xl container sizes to see how they are styled.
Open the following code snippet example in Full Page mode and re-size to see their effects within .container-fluid, without .container-fluid, and with several .container divs nested within eachother.
.container-fluid {
background:pink
}
.container, .container-sm, .container-md, .container-lg, .container-xl {
border: 1px solid black;
background: lightblue;
}
.not-a-bootstrap-container {
background: orange;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<div class="container-fluid">
<h2>
Within container-fluid
</h2>
<div class="container">
.container
</div>
<div class="container-sm">
.container-sm
</div>
<div class="container-md">
.container-md
</div>
<div class="container-lg">
.container-lg
</div>
<div class="container-xl">
.container-xl
</div>
</div>
<div class="not-a-bootstrap-container">
<h2>
Without container-fluid
</h2>
<div class="container">
.container
</div>
<div class="container-sm">
.container-sm
</div>
<div class="container-md">
.container-md
</div>
<div class="container-lg">
.container-lg
</div>
<div class="container-xl">
.container-xl
</div>
</div>
<div class="container-fluid">
<h2>
Multiple nested containers (within Container-Fluid)
</h2>
<div class="container">
<div class="container">
<div class="container">
Three .container divs nested within eachother in a .container-fluid
</div>
</div>
</div>
</div>
Yes, you can use the container tag inside of a container-fluid tag. It all depends on the needs. Let say you have a scenario where you want to make the navbar of full screen width and page content to be in a single centered container.
There is nothing like bad approach in this.
Anyone know how to wrap div's using #media screen and maintain equal width on all div's. I have tried using float and inline-block but can’t find a way to keep all field widths equally justified. Using table-cells provides the means to maintain equal field width but does not permit row/cell changes on #media screen. I have provided an example using table cells just to show what I’m trying to achieve. Note: I'm also trying to avoid fixed field width.
Example: https://jsfiddle.net/6jj6qx8a/
<html>
<style type="text/css">
.celln {
display:table-cell;
padding-right:10px;
background:#dddddd;
}
.cellv {
display:table-cell;
padding-right:10px;
background:#00ff00;
}
#media screen and ( max-width: 400px ) {
}
</style>
From this...<br><br>
<div style="display:table;">
<div style="display:table-row;">
<div class="celln">Name:</div>
<div class="cellv">John Johnson</div>
<div class="celln">Employer:</div>
<div class="cellv">ABC Company</div>
</div>
<div style="display:table-row;">
<div class="celln">Address:</div>
<div class="cellv">123 State St NW</div>
<div class="celln">Zip Code:</div>
<div class="cellv">12345</div>
</div>
</div>
<br><br>to this on #media screen and ( max-width: 400px ) <br><br>
<div style="display:table;">
<div style="display:table-row;">
<div class="celln">Name:</div>
<div class="cellv">John Johnson</div>
</div>
<div style="display:table-row;">
<div class="celln">Employer:</div>
<div class="cellv">ABC Company</div>
</div>
<div style="display:table-row;">
<div class="celln">Address:</div>
<div class="cellv">123 State St NW</div>
</div>
<div style="display:table-row;">
<div class="celln">Zip Code:</div>
<div class="cellv">12345</div>
</div>
</div>
</html>
Use a div containing both tables.
Set table width to 100% and set the parent div a % with too.
New to responsive bootstrap here. I have 2 div's per row and 2 rows showing on my desktop. I used display: inline-block (see below link):
https://jsfiddle.net/9ya7kb67/
HTML:
<div class="parent">
<div class="child"> content </div>
<div class="child"> content </div>
<div class="child"> content </div>
<div class="child"> content </div>
</div>
CSS:
.parent {
width: 200px;
}
.child {
display: inline-block;
width: 80px;
}
However, I'd like to keep this layout in desktop but change it to 1 div per row (for 4 rows) on mobile using responsive bootstrap. How can I do this?
Check the bootstrap documentation for its grid system here: http://getbootstrap.com/css/#grid-example-mixed-complete
There are 4 different types of classes col-sm col-xs col-md col-lg each one fitted for different screen sizes and you can combine them to make dynamic grids for your site.
<div class="row">
<div class="col-xs-12 col-md-6">Test col</div>
<div class="col-xs-12 col-md-6">Test col</div>
<div class="col-xs-12 col-md-6">Test col</div>
<div class="col-xs-12 col-md-6">Test col</div>
</div>
I didn't exactly understand what your end goal is, but the code above is something similar to what you want. On small screens col-xs-12 will fill the entire row, on medium to large screen you will have two col-md-6 on each row. Make sure to read the bootstrap documentation to learn more about it.
I don't understand why row class has margin-left: -20px (so it grows after parents border like on the image). I think nobody needs this behavior. Or am I doing something wrong?
<div class="container">
<div id="top-container" class="row">
<div class="span8">
<h1>App</h1>
</div>
<div class="span4">
</div>
</div>
</div>
You can use row-fluid instead of row, then your span4 and span8 won't have margin-left.
<div class="container">
<div id="top-container" class="row-fluid">
<div class="span8">
<h1>App</h1>
</div>
<div class="span4">
</div>
</div>
</div>
For people trying to find this out for Bootstrap 3:
Grids and full-width layouts Folks looking to create fully fluid
layouts (meaning your site stretches the entire width of the viewport)
must wrap their grid content in a containing element with padding: 0
15px; to offset the margin: 0 -15px; used on .rows.
Source (search for Grids and full-width layouts)
I have some divs that should take the entire height of a page. I managed to get this working as i needed. (Some fixed rows and some flexible rows) like in a html table.
I took the solution from one of my other questions here:
Layout divs in css like table cells in HTML Tables
Today i had to add a div inside the flexible row which should take 100% of the height of the flexible row. Which works great in all major browsers. Muahaha that was a good joke wasn't it? Of course this doesn't work as expected in IE see my js fiddle:
<div class="tableContainer">
<div class="row rowA">
<div class="cell">Test</div>
</div>
<div class="row rowB">
<div class="cell">Test</div>
</div>
<div class="row rowC">
<div class="cell">Test</div>
</div>
<div class="row rowD">
<div class="cell testcell">
<div class="testcontent">Test</div>
</div>
</div>
<div class="row rowE">
<div class="cell">Test</div>
</div>
</div>
http://jsfiddle.net/7ewEJ/3/
the ie seems to take the "100%" from the page and not from the enclosing flexible table row. So the blue div should take the whole space of the purble table row.
Am i doing anything wrong?
Could this be a bug in ie's height calculation?
http://jsfiddle.net/7ewEJ/5/
div.testcell{
height: 100%;
width: 100%;
min-width: 1px;
min-height: 1px;
/*background: #fff;*/
align: center;
display: block;
}