In Figma(not really matter where) template has 1920px width. I want to create a page from it, but in the browser, the page has 1903px. Some of my elements do not fit and wrap down (when using flex-wrap e.g) due to it. So the question is, how to make it properly?
EDIT: On this
screen with clarification I tried to add fourth square but there no space so it wrapped to the bottom. Browser width is 1903px, within template I do from is 1920px. How other people do in situations like this, how it must be done to make it responsive on all pc screens?
Wrap it inside container like in bootstrap you can specify to which screen only it can wrap
For example:
.container-xl will only wrap your content inside container on xLarge screen only.
There are a couple of different ways to tackle this problem. The first would be something along the lines of Rashidtvmr's answer. You can use Bootstrap in your project and simply follow their guide for creating a grid system in your project. With bootstrap, you can solve your issue with something like the below code:
<div class="container">
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-6">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
</div>
Where a grid system is created of 12 columns and you can specify how many an element should take up with col-2, col-3, col-4, etc. If you want them all to be the same width over all screens, then just specify each as col and bootstrap will take care of the rest.
If you can't or don't want to use Bootstrap, the next solution would be to create your own grid system using CSS. Without an example of your code, it's hard to specify exactly how it should look but following this guide should help you out.
Related
I'm trying to achieve a dynamic layout option for a site, but I can't nail down how to make this work. The effect I'm trying to create should look like this:
Where:"1" will have text, and have a dynamic height;
"2" will have a background color and also fill the containing div below it, with a small vector image centered horizontally and vertically. I want to use a dynamic height on this so no matter how much text is in "1", it fills the rest of the bottom of this container;
"3" is an image (img-responsive) that fills the right half of the container. It will be what sets the height of the container div, with the possibility of different sized images being implemented.
I want these to display as shown on desktop browsers and landscape tablets, but to fall into a single column when its viewed on a smaller screen format.
I'm currently using two col-md-6 for each of these, and had the desired background color on the container. The problem I'm running into with bootstrap is when the screen is between 992px and 1200px, the content is collapsing to a smaller screen size, but it is making the bottom of "2" extend beyond the bottom of "3".
I've tried using flexbox for this, but when I use it in conjunction with col-md-6, it doesn't collapse to the single column on the smaller screen sizes. It also just doesn't seem to work too nicely with bootstrap 3.
I'm open to any type of solution outside of completely taking out bootstrap. Thank you all so much for your time and assistance!
EDIT 1:
Totally forgot to add the code. What I have so far is as follows:
https://jsfiddle.net/b86k1myr/
<div>
It's kind of wonky because bootstrap isnt also enabled. But that's what I have for that so far. The other attempt with flexbox is as follows:
https://jsfiddle.net/mkg73uvk/
As a tip for the future, you should always post the markup you're using currently.
Try this:
<div class="row">
<div class="col-md-6 col-sm-12">
<div class="row">
<div class="col-md-12">1</div>
</div>
<div class="row">
<div class="col-md-12">2</div>
</div>
</div>
<div class="col-md-6 col-sm-12">3</div>
</div>
http://www.razaprinters.com/bootstrap.html
Hi I have made this page using bootstrap it is working fine on Desktops i am mostly using classes like col-xs-4 or 12 but when i open my website on a cellphone it is not optimizing things are behaving awkwardly like the about us divs goes all the way up and etc. any help with the code will be helpful i am not posting the code as you can go to inspect element or view source code to access it.
In order for bootstrap to "work" you should put your columns inside container and row classes.
<div class="container">
<div class="row">
<div class="col-xs-12"></div>
</div>
</div>
For more information go here Bootstrap Grid System
Container is a parent to content you want to style, it can have multiple rows inside. A row is sort of horizontal group (like a row in a table). Rows have 12 columns, but you can apply different widths to elements to target different views (dektop, mobile) depending on screen width. You need a row element if you want columns to work. For instance if you use:
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12"></div>
</div>
</div>
Then this will take 50% width (it will be on the left) of parent .container element on larger screens and 100% width of parent .container on smaller screens. Hope that clarifies something. I really recommend reading Bootstrap documentation - it's short and simple.
I have an issue with having different sized buttons (a tags) with the bootstrap grid system. Right now, I have 4 different sized buttons, and they each take up 3 columns each. For example, I have 4 similar to this:
<div class="col-md-3"> Button Text Here
</div>
My current setup (JSFiddle) is:
http://jsfiddle.net/cov4ca1z/17/
For right now, I'm not worried about how the buttons are overlapping when the window is shrunken down to mobile size. Ideally, what I'm looking for is something like this:
http://oi62.tinypic.com/wbp1sp.jpg
I played around with a couple different things, but I couldn't find anything that worked.
Thanks.
The column widths in the Bootstrap grid system are fixed. If you put each button in its own column, it's going to be constrained by the size of that column, and it will behave independent of your other buttons. So, your very very long button is going to wrap within its own column.
It sounds like you want all the buttons to appear next to each other and have them wrap one at a time as the screen size expands/contracts. I updated your Fiddle:
http://jsfiddle.net/cov4ca1z/24/
I put all the buttons together in their own column and included a float: left in your btn-slider class:
<div class="col-md-12">
Medium
Very Very Very Very Long
Short
About Average Size
</div>
Why not place do something like this?
<ul id="buttonList" class="list-inline">
<li>Medium Size</li>
<li>Very Very Very Very Long</li>
</ul>
Then use CSS to style ul#buttonList li{} to adjust the margins as you would like.
I am using a bootstrap wrap and an trying to build a registration page that looks somewhat decent. I thought I had it styled correctly, but then when I rescaled the page I resized that the table is not responsive.
I know that in bootstrap3 they added table responsiveness, but I cannot use that with this specific wrap. Are there any tricks in bootstrap2 to help fix this?
Here is a jsFiddle I'm working with http://jsfiddle.net/MgcDU/6817/
I have tried a few things such as adding span classes, but that didn't seem to help at all...it just seemed to clutter it instead.
You defeating the point of Bootstrap by using a table for a layout. Bootstrap already ships with classes to columns. Use those.
You can read more on this here: http://getbootstrap.com/2.3.2/base-css.html#forms
To create such a layout, you can do the following. Responsive is no longer an issue. You can now decide if you want to use .row or .row-fluid assuming you are using Bootstrap 2.x.
<div class="row">
<div class="span4">Col 1</div>
<div class="span4">Col 2</div>
<div class="span4">Col 3</div>
</div>
Here's a demo: http://jsfiddle.net/zH8gb/1/ - Make sure the viewport is wide enough to see the feect. Drag the Result area window to enlarge it.
I need to create a page layout like in the following illustration with twitter bootstrap:
The left and right sidebars should have a width of at least lets say 300px. If there is more space they can grow but they should not shrink (elsewhere navigation links will get cut).
The middle column should fill the entire space left.
I have tried it by assigning a min-width to the sidebar spans, but in this case the last sidebar (b) will switch to the next line if the browser content area width gets below 1300px.
I`m not using responsive twitter bs css.
Is there a way to avoid this ? I have already found some approaches, but only without bootstrap, which do not work for me.
As the site I am talking about is already running I will not paste code here but please take a look at it live at http://kunden.tommy-computer.at/fsv_noetsch/ (german)
Thank you for your help !
Best regards,
Thomas
If you use Bootstrap 2 responsive you can do something with fixed sidebars on the left and right.
<div class="row-fluid">
<div class="span3">
<div class="sidebar-nav-fixed">
...
</div>
</div>
<div class="span6">
main content
</div>
<div class="span3">
<div class="sidebar-nav-fixed">
...
</div>
</div>
</div>
example: http://bootply.com/60284
You can decrease/increase the spanX accordingly if you want sidebars narrower/wider etc..
Related
Bootstrap 4 Holy Grail Layout
finally found a very well working solution (for me) here also at StackOverflow:
How do I get a three column layout with Twitter Bootstrap?
Anyway thank you very much for your help guys !
You are using a grid system, so you should stick with the given grids widths. (even tought 99% of my clients who wants their design to be coded with bootstrap never respect the grid system and use random width, that kills the point of using a grid system)
If you change the width for one grid you must change it for the other too or it won't fit. (a.k.a you must edit the .span8 width to fit the content).