I'm trying to try bootstrap's grid system on jsfiddle but I'm unable.
See it on jsfiddle
I've taken bootstrap doc example:
<div class="row">
<div class="col-md-1">.col-md-1</div>
...
</div>
items get stacked instead of horizontally aligned.
items get stacked instead of horizontally aligned.
because that is the intended result when the viewport is resized - in your case, using col-md classes, the columns would start stacking in a viewport that is less than 992px. Look at your same fiddle in fullscreen, or just resize the window horizontally.
Related
Basically I need 3 divs to align on small width (<576px) like in the top of image below and on rest of the widths (>576px) like in the bottom on the image below.
How it can be achieved with bootstrap flexbox classes?
I'm assuming base set is:
<div class="d-flex">
<div>A</div>
<div>B</div>
<div>C</div>
</div>
I don't see .column and .row classes being used because A and B don't share same div on small and large screens... experimented with differnt classes with no success.
For the alignment top of the image. Use align-content utilities on flexbox containers to align flex items together on the cross axis. You can choose
<div class="d-flex align-content-start flex-wrap">...</div>
for the content top of the image and for bottom you can choose
<div class="d-flex align-content-end flex-wrap">...</div>
Here, I am assuming that image would be in different <div> and For the responsive behaviour you can use .order classes
Bootstrap rows has a margin (left and right) of -15px.
As far as I know this is mainly by two reasons:
The .container has a padding (left and right) of 15px
The col-* have a gutter of 15px.
So in order to avoid the blank space created by the gutter on the first column (on its left side) and the space created by the gutter on the last column (on its right side) the row has a margin (left and right) of -15px.
I'm just wondering, why not to remove the padding of the container and just set the padding/margin of a row to 0?
It will produce the same effect, the first column will have 15px of distance to the .container, and the same for the last column.
What I'm missing?
I've checked: Negative left and right margin of .row class in Bootstrap and Bootstrap's .row margin-left: -15px - why is it outdented (from the docs) but I don't see any reason to use negative margins instead of 0 padding.
It's because the containers are meant to be used to contain any content, not just the grid rows and columns. Without padding on the container, content is forced up against the edge of the layout and doesn't align with the other content...
<div class="container px-0">
<p>This content is aligned with the outer left edge and doesn't align with grid content.</p>
<div class="row m-0">
<div class="col-sm-4">
grid content
</div>
<div class="col-sm-4">
grid content
</div>
<div class="col-sm-4">
grid content
</div>
</div>
</div>
https://codeply.com/go/23PqWB19ol
You can see several examples of container used for other than grid content the Bootstrap examples
Negative margins also work better for Responsive Design. Many people ask "why not just adjust the padding on the first and last columns?". This demo shows why
Related: Do you need to use Bootstrap's "container" and "row" if your content is to span the whole width?
Here is your simple and easy answer
Go to your class where you want to give a negative margin and use this method.
Example for margin top
mt-n3
Example for margin bottom
mb-n2
If removing the minus margin from the row than one should practice to remove the column padding becuase row minus margin is to handle the padding of the same amount in the column.
To remove minus margin recommeded way is to use no-gutters class or g-0 class as per the version of bootstrap.
Upto Bootstrap Version 4.6 Use
<div class="row no-gutters">
Bootstrap Version 5.1 Onwards Use
<div class="row g-0">
Bootstrap negative margin on rows is very easy
Go to your Bootstrap class and concat 'n' with the margin number
For Example
mt-2 //should change to mt-n3
I am new to CSS and am having an issue with layouts.
I have 4 buttons to be laid out horizontally unless it is mobile, in which case they should be stacked vertical.
I currently have:
<div class="ui-g-12 ui-md-12">
<div class="card">
<p:panel id="filter" header="Filter">
<p:panelGrid columns="4" styleClass="ui-panelgrid-blank"
layout="grid">
<p:commandButton/>
<p:commandButton/>
<p:commandButton/>
<p:commandButton/>
</p:panelGrid>
</div>
</div>
In desktop mode, I don't want the buttons stretched to fit 100% of screen as they are too wide (25% each), so the generated code I need is:
<div class="ui-panelgrid-cell null"><button id...></button></div>
but what I get is:
<div class="ui-panelgrid-cell ui-grid-col-3"><button...></button></div>
which is why the 4 buttons each take up 25% of screen width.
Can anyone please suggest how I can keep buttons responsive, but the 4 buttons don't take up 100%(25% each) of screen width when in desktop?
Use Grid CSS and also see How to achieve Responsive Design by using PrimeFaces
I have a page with a bunch of equal size divs that I want to fit responsively in the available space of a wrapper div.
The idea is that:
- in a large screen the divs will show in 3 columns
- in a medium size screen the divs will show in 2 columns
- in a phone screen the divs will show in 1 column.
I'd also like the wrapper to center horizontally.
I was trying:
#wrapper {margin:0 auto;}
.column {float:left; max-width:340px; height:540px; margin:20px}
It works as intended except that the wrapper doesn't center, which I was trying to achieve with line 1 of css.
Any idea how I can achieve this?
EDIT:
The HTML code:
<div id="wrapper">
<div class="column one">
</div>
<div class="column two">
</div>
<div class="column three">
</div>
</div>
If your requirements allow you to do so, I would suggest using a UI Framework such as Twitter's Bootstrap. They have components that would achieve exactly what you are attempting to do (see their grid system documentation).
Example
EDIT: Included grid documentation link & Example
I've messed around with a few responsive designs, and I'm curious about what CSS properties determine how float elements are positioned vertically when the overall resolution is reduced and they are scrunched together.
For example, if I have a div block with float:left and a div block with float:right, which of those end up on top when the max width of the container is reduced to the point where they can't fit inline anymore.
If you look at my fiddle, the left side element ends up on top when you reduce the width to the point where they both can't fit. Is there a property that makes it so? Does it do it in order? Is there anything I can add to the right div block that would make it above the left element when width is reduced?
http://jsfiddle.net/JXXLK/
Many thanks SO
The simplest solution to put your right div on top when the window is rescaled is to define it first in your html code:
<div class="container">
<div class="rightside">
RIDE SIDE HOMBRE!
</div>
<div class="leftside">
LEFT SIDE DUDE!
</div>
</div>
I'm not sure how this can be controlled using purely css properties.