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
Related
This is my first website,my portfolio's URL https://sarthak-port.000webhostapp.com/Mportfolio.html
I have used webhost for free hosting.My problem is I did use bootstrap classes in my code but my page is not fully responsive to small screens.Can you guys suggest some ideas to do the same.
From watching it a little bit you use in the space "My Works" and the space My Profiles only classes col-xs-3 for each element. If you want your sections to rearrange in a responsive matter you should probably use classes like
class="col-lg-3 col-md-3 col-sm-6 col-xs-12"
This way in larger screen widths you should have four 4 elements in every row then in smaller screen widths only 2 elements in every row and finally in very small screens only 1 element in every row. By setting all elements to col-xs-3 you demand four elements in every row in all screens.
Furthermore for the last section your input fields don't use bootstrap classes to set to middle. One way would be to use
col-md-6 col-md-3-offset
This way you can send your input to center (3 grid cells empty+6 grid cells with your input and 3 grid cells empty again)
Else you could use something like this Twitter Bootstrap 3: How to center a block.
Bootstrap has many classes that you can use but it needs some digging.
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">
....
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%.
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 am using Unsemantic CSS Grid framework to create a layout that looks something like this (simplified to make question clear):
What you are looking at here is 3 rows, each with 2 columns. The code looks roughly like this:
<!-- First row -->
<div class="grid-50">
Title 1
</div>
<div class="grid-50">
Title 2
</div>
<div class='clear'></div>
<!-- Second row -->
<div class="grid-50">
<img src='image1.png' />
</div>
<div class="grid-50">
<img src='image2.png' />
</div>
<div class='clear'></div>
<!-- Third row -->
<div class="grid-50">
Text paragraph here
</div>
<div class="grid-50">
Another paragraph of text
</div>
<div class='clear'></div>
The great thing about using 3 rows is that even if image 1 and image 2 are not the same height, the paragraph of text below them lines up across the two columns (meaning it starts at the same vertical position in both columns) since I use a 'clear' after the images. If I had instead used 1 single row with 2 columns, where each column is a div that has a title, image and paragraph text one on top of the other, then the paragraph text would not line up if the images had different heights. So using 3 rows gives me exactly what I am looking for.
Unfortunately when viewed on a mobile device this is what happens:
This is because the two columns of each row end up on top of each other.
What I would instead like to get is this:
In other words, I want row1col1, row2col1 and row3col1 to stick together, and then row1col2, row2col2 and row2col2 to appear below.
How do I go about doing this? Is there anything in Unsemantic that allows me to "tie" a column together.
If I instead create 2 divs with title,image and text para, and put them in 1 row, that will solve this issue, but then the text paragraphs will NOT line up if the images are different heights. I cannot hard code the height because this is a fluid layout, and when the width of the page changes the width of the columns will change, which in turn will change the width of the images (since their width is set to 100% of container) and consequently their heights will change. Any tricks, workarounds or suggestions to get this approach working would be most helpful.
As a last resort I am thinking of using jQuery to position the paragraph text on page resize; if you feel that is a good solution (or the only solution) please feel free to share any recommendations or pitfalls to watch out for in this approach.