Scenario
Let's say I have two divs, side by side.
div1: 500px wide
div2: taking up the remaining width
I want the items in div2 to be responsive using bootstrap so that I can leverage xs, sm, lg, xl respectively eg mt-sm-3 which specifies the margin top ONLY for the small sizes.
Furthermore, I don't want the bootstrap sizing to trigger based on browser window width but instead the width of the containing parent div.
Question
Is this possible with bootstrap? If so, how?
Thoughts
Spoofing classes for div2 eg. have javascript attach, as classnames, custom-[xs,sm,lg,xl] depending on the size. This would be a ridiculous amount of busy work and kind of defeats the purpose of using such a widely adopted css library.
Put an iframe inside of the div which has bootstrap loaded into it. I don't necessarily like this one because I'm working with a react/redux project and it becomes a bit of a nuisance to pull this off.
Try the below structure
<div class="d-flex">
<div style="width:500px;"></div>
<div class="w-100"></div>
</div>
I ended up writing my own solution. It works by checking target div size every 100ms then attaches a size to it: xs, sm, md, lg, xl and will work with custom sizing metrics. I put a couple examples in my basic index.html
https://github.com/jacksonkr/substrap/tree/dev
Related
What are the differences between CSS Grid Layout and existing layouting frameworks like Bootstrap or other layouts like CSS Flexbox or CSS Tables (not HTML tables, I know they are supposed to be used for table contents only)?
What's it's concept and what use cases does it cover?
CSS grid layout is not attempt to supersede HTML tables, flexbox and grids in Twitter Bootstrap. CSS grid is a new way of creating markup.
Purpose of creating grid layout is in declaring your layout in CSS only. If you have container with plain list of children you can add 2D layout only via CSS. Not need to wrap items in row containers and so on. But it's not a benefit of grid, sometimes you need your cells to be wrapped in rows in HTML.
Twitter bootstrap and tables have the same conception: you have some rows and their children declared in HTML. It's not a shortcoming, it's how it works. And before flexbox we used these ways more often than we should due to lack of other ways.
Long long time ago (before CSS) we used only tables in frontend. That doesn't mean that tables are bad. This was the only way. But the tables are good when you really need a table. You just shouldn't use them for everything.
Flexbox is all about 1D arrangement of element. Of course in some cases it will look like 2D. In some cases you will have to use some hacks because you really need a grid! But it's due to relatively low browser of grid, not due to correct application of flexbox. It's perfect for some layouts, for others which really need 2D (where you'd better use tables or grid) it may be hacky.
So just use a grid layout where your layout is elegantly expressed in grid terms. In other cases it won't be maintainable and elegant way.
CSS Grid
CSS Gird is actual a whole new way of creating website layout.
It will give you more flexibility than any other framework or layout
system. Its very easy to create a 2D layout using CSS grid.
Websites load faster since you will skip loading heavy framework files (ex Bootstrap).
CSS grid are basically used to design the overall website layout.
Please check browser support before you actually start using it.
CSS Grid vs CSS Flexbox
Flexboxes are not a solution for website layouts.
Unlike CSS Grid you should not use Flexboxes to design the base website layout.
Flexboxes are one dimensional, that means elements only flow in one direction i.e. vertical or horizontal.
Check this image, The entire layout can be designed using CSS Grid and only the yellow section area where I might want to show an profile picture and a name below that, to achieve that I can use Flexbox instead of CSS Grid.
Use Flexbox to solve only uni-directional layout issues in your website.
CSS Grid Vs Bootstrap
You don't have to load unnecessary styles when using CSS Grid, but if you go for Bootstrap for grids then you are loading stuff which your website might not need.
Get rid of ugly markup. In Bootstap you need to use additional elements
with class row and col to design your layout. I personally feel
they makes my HTML look very ugly.
<div class="row">
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-4">.col-sm-4</div>
</div>
Bootstrap is not flexible, in order to change the layout you have to change the Markup. CSS job is to look after the presentation of your document, but when you use Bootstrap you are changing your HTML to to achieve your layout. When you use CSS grid you can change layout of the website without touching HTML code.
Below is an example where without changing the HTML I need section 1 to be shown first followed by section 2 and section 3. Look how effortlessly CSS Grid did the job. Where as for Bootstrap I have to update the HTML code and swap section 1 and section 2.
.wrapper {
display: grid;
grid-template-columns: 1fr;
}
.section-2 {
grid-row-start: 1;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" />
<h1>Bootstrap</h1>
<div class="row">
<div class="col-sm-12">Section 1</div>
<div class="col-sm-12">Section 2</div>
<div class="col-sm-12">Section 3</div>
</div>
<h1>CSS Grid</h1>
<div class="wrapper">
<div class="section-1">Section 1</div>
<div class="section-2">Section 2</div>
<div class="section-3">Section 3</div>
</div>
CSS Grid Layout allows to create a two-dimensional grid to lay out items on it. It is used to generate responsive user interface designs.
The main difference to layout systems like Bootstrap and CSS Flexbox is that it is two-dimensional. In Bootstrap and Flexbox layouts are defined one-dimensionally. This means, in CSS Grid Layout the grid items are aligned horizontally and vertically to each other like in a table. The differences to CSS tables is that it is more flexible in regard of sizing and aligning elements within a grid and allows items to overlap each other.
While the 2D effect can also be achieved (to some extent) by the other systems, Bootstrap's grid system is based on a 12-column layout and both Bootstrap and Flexbox align elements in one direction wrapping to the next line when they don't fit into the size of their container.
Furthermore, CSS Grid Layout allows to place the containing elements in different "grid areas" independently from their position within the DOM.
In Grid Layout, only items placed within implicit grids wrap elements similar to Flexbox or Bootstrap based on the available viewport or container size. Elements placed in explicit grids do not get rearranged that way, but this can be achieved in combination with media queries.
Bootstrap is a huge framework but I assume you are only refering to its grid in this comparison.
To me, the shining part of css flexbox and css grid is that they bring the grid system in the web world a bit closer to the grid system in the desktop world - it is more responsive and dynamic. What flexbox/css grid enables is that items/columns/rows can be described to adjust their sizes not only based on the size of the container, but also in response to each other.
For example, flexbox allows you to specify some item to have a fixed size (100 px), some item to have a size relative to container (20%), some item to fit to content (auto), and all the other items to share the rest available space in the proportion you want. If window size changes, all the items auto adjusts. Moreover, if the auto-sized item changes, the others will also adjust to absorb the refreshed free space. This is very much how desktop app layout works.
CSS grid shares the same capability of flexbox, but it is a grid, meaning it operates on two dimentions. If you ever try to use multiple flexbox rows to simulate a grid, you will run into the issue where you cannot ask the first item on each row to have the same size without giving it some kind of less flexible width (either a percantage or px). CSS grid can size them as a column, hence set the width to the widest item no matter which row it resides.
Bootstrap v3 simply just doesn’t have this flexibility. Its responsiveness only means responsive to container and devices, it cannot make columns/rows responsive to each other.
Bootstrap v4 is a different story, it is built on top of flexbox so the flexibility is greatly enhanced. But still, if you are just talking about gird system, I would say go for css grid and flexbox first.
I hate asking a "how do I do this" question, but I've tried everything I can think of and it's just not working.
I have a page design in which there is a center column of specific width (960px) which needs to live in the horizontal center of the page as long as the browser is wider than that width.
I'm entirely unclear on why, but every combination of columns and offsets I try leaves the content off center in one way or another.
I know how to do this with margin:auto but then I lose bootstrap's auto-magical resizing of everything for mobile.
So... is there a way to keep the responsive nature of the site as per bootstrap but to have it put the content into a center strip of a specific width (leaving the sides empty) and yet collapsing down to the -xs- variant when the page is pulled up on mobile?
What you'll need to use is the bootstrap container, you can view the docs about it here: http://getbootstrap.com/css/#overview-container
it is as simple as:
<div class="container">
..some content..
</div>
I have a single page application built with Twitter Bootstrap. My application has several modal dialogs, which normally take 70% of the page width and are centered horizontally. My page and modal setup is like this:
I have placed a row with columns inside the modal. When I resize the page, the columns take the col-sm-6 style really late, since the col-md-* and col-sm-* depend on the window size and not on the size of the surrounding container, as I understand it. So although my page is e.g. still 1200px wide, my modal is only 840px wide and therefore would require the columns to use the col-sm-* classes.
Is there a way to tell Bootstrap to apply the classes based on the size of the container rather than on the windows size?
which version of Bootstrap are you using?
On Boostrap 3 you can force the modal dialog using:
.modal .modal-dialog { width: 900px; }
There is a related post here:
how-can-i-change-the-default-width-of-a-twitter-bootstrap-modal-box
Hi I'm a beginner trying to create my own web layouts in Photoshop that are based on the Bootstrap 3 grid.
I've downloaded a few .psd files that mimic the Bootstrap 3 grid so you can based your designs around them.
I've also created an html grid using Bootstrap that you can see here http://juanchandler.com/grid-test.html view source to see the code.
My question is why the columns aren't 70 pixels wide and a gutter width of 30 pixels as is the case with the .psd grids...I've taken a screenshot of the .psd grid with my html over the top so you can see how the columns don't line up. http://juanchandler.com/screenshot3.jpg ie. the red / salmon columns are supposed the gutters but my html columns fall over them.
Hope someone can help.
Bootstrap's grid is based on percentages, so each column will be a percentage and not a precise pixel width. The only time it's 70px on a single col-*-1 column is when the screen size is equal to or greater than 1170px IF you are using a .container (and not the .container-fluid). The gutter is the padding inside the columns, so you don't see that because there's no inner div wrapping the content, in order to see the gutters, you have to have div or some kind of container inside the column:
<div class="col-sm-1 cell4"><div class="inner"> </div></div>
And color that inside div, not the col--
See example: http://jsbin.com/qotos/1/edit
As far as using Photoshop, since 2011 I've been doing responsive design and haven't used it. What I do is design in CSS and take a screen shot. Learn to use LESS or SCSS. Learn CSS first though.
https://gist.github.com/2354116
If you view the above page in Chrome/Firefox then everything seems to be fine. The divs at the bottom (the two headings and the social icons) are wrapped in a container div and center without issue.
If it's viewed in Safari though then these three divs are not centered at all :/
I'm not sure why this is.... can anyone help?
Note: had to assume a lot with your design so modify anything that does not fit your original design.
First off, you are not properly containing your page elements (content, carousel, footer), you currently have multiple width containers trying to reside side-by-side and that is breaking your design in multiple places.
Your content container is width:940px, your .wrapper div is width:750px, your .paramWrapper div is width:870px, your .carousel div is width:735px. You have to pick one width and stick to it and just use margin to push content accordingly across your page. I used 860px, which is the width of the span11 class.
Next, you're modifying the bootstrap.css stylesheet directly, that means that whenever the bootstrap gets updated all of your changes will be lost if you overwrite the bootstrap stylesheet, so create a another stylesheet and put all of your custom styles there and just load it "after" the bootstrap stylesheet in your header.
Now onto your original issue, the bottom .paraWrapper div is not properly stacking because you have a width of 870px set in your container and the elements within do not add up to that width:
span3 + span3 + span2 + margin = 640px
So it was not an issue or a bug, its just your layout.
Here is a fixed version that i very quickly put up so you're going to have to modify the elements to fit your design once again: http://jsfiddle.net/rzSFa/3/, here is a demo of what it looks like.
By the way, you're using the responsive bootstrap stylesheet for naught, it is currently not doing much in your case so why even use it? You can easily modify a few media queries to support my fixed version though, but yours will not work at all because you're declaring all of your own classes with custom widths so there is no point in including it.