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.
Related
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.
i have a Commercial Website Called Akaratak
In the Search Page in Mobile mode (after resizing the browser to the minimum)
there is a space left empty between some divs
as follows:
i know it must be a simple question but i couldn't get it to get aligned
As i can see you are using Bootstrap, but not in a proper way. You should change your layout to a 4 or 6 column one so the grid will auto adjust to a 2x2 layout as you want it.
Another thing that you can do is to make your layour like:
2x2
-1-
2x2
Using bootstrap classes you just need to add one class to the third object of each row making it sm-12 and the others sm-6. I suggest you to read more carefully Bootstrap grid system to use it the right way.
Instead you can use Bootstrap 4 grid system witch allow you to move and workaround your problem in a nice way.
You should remove the <div class="clearfix"></div> child on every <div class="deal-top-top"></div> parent :)
I have a simple site a guy made me using bootstrap. But it has a wide gutter on both sides, and I want to remove that, so the site will stretch from one side to the other.
I tried to do this by editing the css file, specifically the container size for each monitor size, and the padding (default is 15 px on both side).
This did make is slightly wider, but only slightly. Can anyone tell me what part of the css I can edit to do this? The gutters are a bit too wide for me!
Any help is greatly appreciated!
If the content is surrounded by a div with container class, try to change it to container-fluid
Bootstrap doc
Bootstrap 2.3.2 doc
Turn any fixed-width grid layout into a full-width layout by changing
your outermost .container to .container-fluid.
<div class="container-fluid">
<div class="row">
...
</div>
</div>
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).
I do not know what I need to use to create the fundation of my website. Tipically, I want a design structure having 3 columns in the main content. (column 1 = navigation panel, column 2 = central for content, column 3 = advert panel).
What ares the best practises (using CSS3 if possible) to realize this design ? I hesite between the flexible box layout OR grid layout OR multiple column method. (I do not understand what is the most adapted to my case, in order to have a simple, flexible and less display bugged solution). I also want my website to fill as well as possible the screen (using the more available space).
Do I need to define a screen resolution, or all is possible with % ?
Tkx,
When implementing structure, I usually do something like the following (psuedo-code):
<div id="wrapper">
<div class="column" id="left">
<div class="column" id="middle">
<div class="column" id="right">
The wrapper could be fixed width or fluid. I usually fix width this and center it on the page using margin: 0 auto in the CSS.
The left, middle, right are for the columns. I would set display: inline-block in a class name called column and control each individual column size using it's id selector in the CSS.
I like the flexible box layout though as this is a good fit for this problem but I've yet to play much with it. If I'm not mistaken, I don't think it's supported in every browser as of yet but it might be worth a shot.
As far as dealing with different screen sizes, media queries in CSS are the way to go. There are numerous resources and step-by-step guides around the web that should get you up and going with this in no time. Hope this helps.