I have a work in progress
www.codepen.io/anon/pen/yMmjZb
The issue I am having is that my 3rd row (the one with the 3 columns) has a background colour set but this is bleeding beyond the boundary I would like. I am suspecting due to a row being the full page width. I have tried applying the background to the columns individually but when the page is resized each column becomes a different height so the bottom of the fill isn't consistent.
Any solutions?
I have checked your code and here is the solution. Just bind the col-md-4 with a col-md-12 to occupy the padding and give your class col-homepage to it.
Here is pen to it-
http://codepen.io/sahildhir_1/pen/BWXVoz
Just remove the margins from the row. Currently you have -15px; in margins. Make it 0 and row wont span the entire width.
Add <div class="col-md-12"> after the row. In bootstrap, we always wrap columns in a row. Just like you did in second row, you need to add col-md-12 class after the .row
So the code will looks like -
<div class="row">
<div class="col-md-12">
<div class="container-fluid col-homepage">
....
Related
I have a table which takes the whole screen width. In each table row, there is a Bootstrap 3 grid within a panel.
The problem is that the table column is too thick to contain my Bootstrap grid, and the result is this :
Here we see that the last button is overlapping the table row, going too far. But if I switch to my 24" monitor, there is no longer this problem since the screen is wider and therefore the table rows are wider too. It's the same if I remove some table rows, they will be wider and it will not overlap.
So my question is : is there a way to have a dynamic and fluid grid system which would automatically arrange the Bootstrap grid so it would not overlap ?
Here is a Codepen to illustrate the problem : codepen.io/anon/pen/BKZaWe
I would like the panels to have two buttons per row instead of crushing four together, but if we enlarge the table or remove some panels then it would show 3 or 4 buttons per row.
Have you tried: http://getbootstrap.com/css/#grid-example-fluid?
<div class="container-fluid">
<div class="row">
...
</div>
</div>
EDIT
I think I understand now (really hard from such a small screen shot and no code example).
The button(s) is wider than the column when in narrow viewports and you want that column only to remain wider.
Unfortunately, not how it's designed. Each column is a particular % of the full container width - nothing to do with the columns' content.
Depending on your browser support, Flexbox is the perfect solution here.
Otherwise, you will have to do something like:
<div class="col-sm-6 col-md-4"> <span> col 1 with buttons <span> </div>
<div class="col-sm-3 col-md-4"> <span> col 2 <span> </div>
<div class="col-sm-3 col-md-4"> <span> col 3 <span> </div>
To force the first column wider for the sm viewport.
two ways you can do it
1.give just call table responsive class for the table.
2.create an table using div with display: table, display: table-row, display: table-cell properties
http://www.html-cleaner.com/
I think it will do the trick for you.
Else share the code then i can look in deep into it
I have an issue with my CSS layout
I have a form that is contained in a 500 pixel fixed width. It is set to be centered in the page with margin auto;
Inside that div I made a table using div's. Since each div's that act as a table row have different height, I have used the overflow:hidden property. I did that to minimize the size of the form.
Inside that div I have 3 other divs that act like table data "td". They are floating inside the row.
What I am trying to achieve is to display another div on top of them all when there is an error in the form. Just like the one you see on Stackoverflow reminding you that you have code in your text that need to be set as code. The red div on the right. Now I am a bit stuck because I can't overflow that div to the sides.
So what other option do i have to set the height of the "row" div without using overflow:hidden. I dont want to use tables and the content is always changing.
Any solution is welcome.
Here is simple code so you get the picture;
<div class="row">
<div class="overflowing"></div>
<div class="float_left"></div><div class="float_left"></div> <div class="float_right"></div>
</div>
The overflowing div should not push the floating divs around and is not visible until I change it's property and fill it with content.
Use clearfix class with row if you are using bootstrap
<div class="row clearfix">
OR
<div class="clearfix"></div>
before end of row tag
If it is not using bootstrap
<div style="clear:both;"></div>
before end of row tag
`
<div class="float_left"></div><div class="float_left"></div> <div class="float_right"></div>
</div>`
I think it will work, and about the alternative to overflow use fixed height width thenoverflow:auto wolud be useful
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.
So, this is how it looks like when I'm on full screen: http://i.imgur.com/quQt09E.png
And this is how I would like to look when I resize to a certain point: http://i.imgur.com/pKGKoCq.png
I'm only able to have div 1 on top of div 2. I tried everything I know but I'm afraid that my knowledge is a little bit limited when it comes to this kind of challenges. I would really appreciate if anyone could help me.
I think you can achieve what you're looking for with a CSS grid like Bootstrap has. Check the following fiddle: http://jsfiddle.net/nunoarruda/156trje7/
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-6 col-sm-push-6 div2">DIV 2</div>
<div class="col-xs-12 col-sm-6 col-sm-pull-6 div1">DIV 1</div>
</div>
</div>
I've used the Bootstrap CSS grid and the push/pull classes to reorder the columns beginning from small (sm) screens. You can change it to medium (md) or bigger. Check the Bootstrap documentation for that: http://getbootstrap.com/css/#grid-column-ordering
AS i see there is a grey rectangle below the div2. That induce me to this that div 2 is inside div1. To set permanently div2 on top on div1 I would use the following schema:
1) Create a general div, this will include the two div's inside.
2) Create div2 inside the general div with a width of 100% and height 50% of the general div.
3) make the same with div1 but define it below.
This way both divs are fixed in a previous div wich you can move as you wish.
I am using bootsrap 3 as my CSS framework to style my website.
<div class="row">
<div class="col-lg-4">...</div>
<div class="col-lg-4">...</div>
<div class="col-lg-4">...</div>
<div class="col-lg-4">...</div>
.
.
.
</div>
The idea is to add the col-lg-4 div into one row, and the col-lg-4 div will automatically move to the next row when it has exceed the width of the row.
In general, it works fine. However, the last col-lg-4 div of the first row is not aligning correctly. The demo address is: http://imaboy.cn/blog/forums/
Do you have any idea why this is happening?
Here is the screenshot:
http://www.imaboy.cn/screenshot.jpg
very easy. In your first column, last row, you have a col-lg-4 element which has an additional row of text, making it higher. This causes to interrupt the normal float of columns. See images below:
as you may see, that beige zone is about to collide with the column in the left. See image below for a better view of the issue:
I have added a transparency so you can see the collision and how that rocket column blocks all floats.
The solution
just add this to your CSS:
.col-md-6.col-xs-6.col-sm-6.col-lg-4{min-height:70px; margin-top:20px; }
Now you make sure those columns will have the appropriate height to float with ease (adjust that height if needed). Also, I have added the margin-top declaration to your CSS instead of inline since it's better to have it all in the style-sheet. Also, you should consider giving those columns a name, like myCol so you don't risk to affect columns anywhere in your site and you can target them as easy as
.myCol{min-height:70px; margin-top:20px; }