I am basically a back-end developer who has very less information about the front end.
So basically I have left sidebar and right main content type layout in bootstrap. Now I want to take whole width remaining as a main content (total width- left sidebar width), in Bootstrap 3.
Any suggestion?
Use grids, it is simple. In short: your screen is divided in 12 columns and you say how much columns to occupy.
<div class="row">
<div class="col-lg-3">
Sidebar goes here
</div>
<div class="col-lg-9">
Main content
</div>
</div>
Heads up: to be full screen width try put it as first child of the
When Bootstrap is used, the class col-**-12 will give full width. (where ** can be any size)
http://getbootstrap.com/css/#grid
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 am having trouble with my bootstrap styling.
I have footer and the cols are col-md -3,3,2,4
This makes the total 12.
The problem is that the contents of each columns differs, my intention is to put equal spacing between each Div in the col.
How will i accomplish this? How can i at least have some space between latest news and quick links
You could add a different diff in your news column that limits it to using only 80% of the available width. Ensuring you always have at least part of the column left over as spacing.
E.g.
<div class="row">
...
<div class="col-md-4">
<div style="width:80%">[content]</div>
</div>
...
</div>
You should probably give the inner column a class instead of the style to make it cleaner.
Alternative
Actually, it's likely easier to just give your column(s) a padding-right: 20%.
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 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).