I have this code, with border bottom in every row.
https://jsfiddle.net/brygom/0z582swx/3/
For some reason the border bottom of row not complete all row width. Even if i don't use overflow-auto the border not completed.
The problem is that you are forcing to use 13 .col-2 inside a unique row. In Bootstrap this is not possible because a row has a maximum size of 12, so if you want three equal-width columns across, you can use .col-4, if instead you want two equal-width columns across you can use .col-6. Here you can se in detail how the bootstrap grid system works.
If you try to substitute .col-6 to .col-1 infact, you can see that the width of the line increases. The problem is that you have 13 columns and so I think that using the Bootstrap grid system is not the better choice.
If you want to create a table I suggest you to use the Bootstrap table, in this way you can add as many columns as you want with your preferred customized style. (here you can find the documentation).
If you want to customize better the table you can use instead a normal <table>.
Related
The problem is I have two columns that will be filled with rows that are implicitly defined, and that I DO NOT want to resize the adjacent row items such that there is a space beside the components. I have tried using grid, but the result is the second image. Similarly, I use flexbox, and the row space emerges implicitly. Does anyone know a way to get this kind of 'dense' packing as in the first image?
I am new to html,css, bootstrap.
Is there anyway we can assign different number of columns to a div based on resolution range for large device?
lg (for laptops and desktops - screens equal to or greater than 1200px wide)
But can I assign different number of columns for widths between 1200-1300px and 1300px-1400px ?
Please have a look at the below image. This is how the Ui should look like. On left hand side there would be a form with four columns- 1st and 3rd column contain labels and 2nd and 4th column contain input controls.So each of these column is assigned col-lg-3.
Now the issue is , when width is around 1250px, the left hand side form looks fine(but it needs 6 columns) but in that case grid is not able to see all the columns without horizontal scrollbar.
But if the resolution is around 1400px, then distance between labels and controls are too much and also there is a lot of empty space around the controls within left hand side form. So I was looking for a solution where I can assign the number of columns based on resolution
You can use Bootstrap v4 to achieve it.
For more information:
https://getbootstrap.com/docs/4.0/layout/grid/
You can create media queries to affect the current columns at different screen widths. Or you can create a new set of classes, like .col-xxl-2 and give them a different percentage width, like 20% and put them in a media query targeted to the size you want. So then a div could have <div class="col-xs-12 col-sm-8 col-md-6 col-lg-4 col-xxl-2"></div> and so on. I don't know if this is really necessary though, constraining it to only a 100px difference (1300-1400), because lots of computer screens go beyond that size.
Edit
If you add form-inline to your form and wrap your label + input inside a form-group, it should put them on the same line with proper spacing, no matter what the size.
I'm currently having a problem trying to set to the left every sublist of the navigation bar so that it aligns correctly bellow every sublist if there is more than 6 columns, the problem happens from the 7th list. I'm using bootstrap and every sublist have a size of 2 (so from the 7th as it passes the 12 column size it moves down, as expected)
What I'm getting a result is
And the expected result is
Piece of code used per list:
<div class="sub-navigation-section col-md-2">Ul and li inside</div>
The CSS that is attempting to do the expected result is a Float:left;
Bootstrap uses a 12 column grid system so you won't be able to divide that up equally into 7 columns. You could do this by creating your own class that has a width of approx 14.285% (100/7) and the same properties as the bootstrap col-* classes (float left etc)... but remember you'll need to cater for different viewports etc
If you wont use javascript, you can alternatively use CSS3´s column-gap and column-width like in this example:
https://www.bootply.com/118335
It floats the boxes like waterfall layout. Hope this helps you.
Bootstrap's grid system is based on a 12-column layout, and in the current version (3.3.5), "if more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line."
However, I'm updating a site that uses an old version of Bootstrap (2.3.2) and the docs don't mention anything about column wrapping. Can I rely on the same column wrapping behaviour with Bootstrap 2.3.2?
Surely also in BootStrap 2, if you try to put more than 12 columns in a single row, elements wrap but with left margin starting on second row. The behaviour is the same because both are based on float:left positioning
Is there a way to create a dynamic CSS for 2 columns? What I mean is, there are 2 columns in my webpage, the left and right column. It is similar to Facebook, where the profile picture is the left column and the right column is where your feeds are located. When a link is selected from the left column, without refreshing the page, the right column will display the page automatically. The left column is where my links are located and it is fixed. The only change factor is my right column. How can I create and apply the CSS?
You don't need a CSS template in order to use columns. All you need to do is set your column widths to percentages instead of pixels. If you're using a three column grid, with one div taking one column and the other spanning two, then the percentage for the first column would be 33.3333333% (don't bother rounding up, the browser will take care of it) and the second div would be 66.6666666%.
Also, in order for your second div to refresh without loading another page, you'll have to use Ajax.
There are css3 columns but they are not supported by IE. What a surprise!
It sounds more like you just need a css layout framework. Search for css frameworks / templates.
I of course recommend simpl.css.
The page is ugly at the moment but will be updated soon.