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>
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'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>
I am new to bootstrap 3. I am designing a page and my content requires more width. While the menu bar extends out to the sides of the browser, how can I can a bit more width for my content. I have tried changing container to container-fluid but it doesn't change anything.
Here is the code. I have 2 files, namely, cc-top-min.blade.php and show.blade.php. show.blade.php is sucked into cc-top-min.blade.php #content. http://pastebin.com/gLQc0ADP
Here is a screen shot. New more width. WOuld like to extend the content of the page to "almost" as wide as the navbar. Please help.
here is the html: http://pastebin.com/7Q4emw6j
Consider this post: Fluid Container in Bootstrap 3. Your navbar extends because it is not wrapped in a .container.
Therefore, you can just omit the .container and start with a row. To narrow it down as you want, add some padding as you see fit.
If container-fluid is not working at all; are you using bootstrap 3.1 or above as the first one didnt include it: Container-fluid vs .container
You need to replace container with container-fluid everywhere you've used it. See example: http://www.bootply.com/O7YjWCvRa8
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've got this layout that i want to cut into html/css, but i'm struggling with picking best way to strcture html/css for major content (like diffrent bg block in the middle that is under 960 content block, and covers whole wideness etc.). I've attached a structure of the layout:
So my main quesions are:
How to handle custom bg block that is ,,outside'' of grid, or should
it be inside, and then make content block be inside contenbg, and
outside the container, that logo and menu is?
How to handle custom png shadows (i wanna avoid css3 in this case) that should be outside the content
slider (as on image)
Same question applies to footer, should it be outside the main 960
container? Should i use ,,main container'' at all in this case? I'm
not sure whats the best practise here.
Thanks
I'm unable to see the attached file but I'll try to give you some guidelines:
You should have a main content which is centred on the screen and is 960px wide.
If the header/footer are the same width (i.e. their Background doesn't span more than 960px), they should be in the container div. On the other hand, if their BG is wider than 960 put each in a separate div which spans as wide as you need and inside this div put another div which is 960 wide and centered.
example:
<div id="headerWrapper">
<div id="header">...</div>
</div>
<div id="content">...</div>
<div id="footerWrapper">
<div id="footer">...</div>
</div>
if you want png shadows without using CSS3 your only option is slicing the image with the shadow.
I hope that answers your questions.