I have this code -
<div class="columns">
<div class="column">column 1</div>
<div class="column">column 2</div>
<div class="column">column 3</div>
<div class="column">column 4</div>
</div>
I want to make like this with Bulma css -
https://codepen.io/hashem/pen/ausJL
If I resize ( mobile version ) , those columns break in to 2 columns , instead 4 .
This should solve your question:
<div class="columns is-mobile is-multiline">
<div class="column is-half-mobile">column 1</div>
<div class="column is-half-mobile">column 2</div>
<div class="column is-half-mobile">column 3</div>
<div class="column is-half-mobile">column 4</div>
</div>
If you want to fit in as many columns as possible and have them wrap when the screen size gets smaller use this:
<div class="columns is-mobile is-multiline">
<div class="column">column 1</div>
<div class="column">column 2</div>
<div class="column">column 3</div>
<div class="column">column 4</div>
<div class="column">column 5</div>
<div class="column">column 6</div>
<div class="column">column 7</div>
<div class="column">column 8</div>
<div class="column">column 9</div>
<div class="column">column 10</div>
</div>
Check these links for more information about what you're trying to do.
https://bulma.io/documentation/columns/responsiveness/
https://bulma.io/documentation/columns/options/
Related
Is it possible to move card from one column to another column?
When the page is reached to mobile view then card 3 should move to 2nd column in middle of card 1 and card 2
How to achieve this?
<div class="container">
<div class="row">
<div class="col-md-4">Demo content</div>
<div class="col-md-4">
<div class= "card">card 1</card>
<div class="card">card 3</card>
<div class="card">card 2</card>
</div>
<div class="col-md-4">
<div class="card">card 3</card>
</div>
</div>
</div>
Use the responsive display classes.
<div class="container">
<div class="row">
<div class="col-md-4">Demo content</div>
<div class="col-md-4">
<div class="card">card 1</div>
<div class="card d-md-none">card 3</div>
<div class="card">card 2</div>
</div>
<div class="col-md-4">
<div class="card d-none d-md-block">card 3</div>
</div>
</div>
</div>
https://getbootstrap.com/docs/4.6/utilities/display/
how to apply Row scroll overflow on x-axis direction for col-5, col-6, and col-7
<div class="container-fluid">
<div class="row">
<div class="col-4">col 1</div>
<div class="col-4">col 2</div>
<div class="col-4">col 3</div>
<div class="col-4">col 4</div>
<div class="col-4">col 5</div>
<div class="col-4">col 6</div>
<div class="col-4">col 7</div>
</div>
</div>
You need to add a specific class descriptor for those columns to give them additional styling
<div class="container-fluid">
<div class="row">
<div class="col-4">col 1</div>
<div class="col-4">col 2</div>
<div class="col-4">col 3</div>
<div class="col-4">col 4</div>
<div class="col-4 xoverflow">col 5</div>
<div class="col-4 xoverflow">col 6</div>
<div class="col-4 xoverflow">col 7</div>
</div>
</div>
app.css
.xoverflow {
overflow-x: auto;
}
I think you should use this:
.col-4:nth-child(5), .col-4:nth-child(6), .col-4:nth-child(7) {
overflow-x:scroll;
}
I would like to show a scrollable table with fixed header as grid bag layout.
So I created an outer container, one row for the header and a second row for the data.
The problem is that the inner container which was intended to be used for scrollbar ignored boundaries of out container.
#maincontainer {
height:500px;
background-color:lightgrey;
}
#innercontainer {
height:100%;
overflow-y: auto;
}
#headerrow {
background-color:grey;
height:200px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<html>
<body>
<div class="container" id="maincontainer">
<div class="row" id="headerrow">
<div class="col-xs-4">Col 1</div>
<div class="col-xs-4">Col 2</div>
<div class="col-xs-4">Col 3</div>
</div>
<div class="row" id="listrow">
<div class="container" id="innercontainer">
<div class="row">
<div class="col-xs-4">data 1</div>
<div class="col-xs-4">data 2</div>
<div class="col-xs-4">data 3</div>
</div>
<div class="row">
<div class="col-xs-4">data 1</div>
<div class="col-xs-4">data 2</div>
<div class="col-xs-4">data 3</div>
</div>
<div class="row">
<div class="col-xs-4">data 1</div>
<div class="col-xs-4">data 2</div>
<div class="col-xs-4">data 3</div>
</div>
<div class="row">
<div class="col-xs-4">data 1</div>
<div class="col-xs-4">data 2</div>
<div class="col-xs-4">data 3</div>
</div>
<div class="row">
<div class="col-xs-4">data 1</div>
<div class="col-xs-4">data 2</div>
<div class="col-xs-4">data 3</div>
</div>
<div class="row">
<div class="col-xs-4">data 1</div>
<div class="col-xs-4">data 2</div>
<div class="col-xs-4">data 3</div>
</div>
<div class="row">
<div class="col-xs-4">data 1</div>
<div class="col-xs-4">data 2</div>
<div class="col-xs-4">data 3</div>
</div>
<div class="row">
<div class="col-xs-4">data 1</div>
<div class="col-xs-4">data 2</div>
<div class="col-xs-4">data 3</div>
</div>
<div class="row">
<div class="col-xs-4">data 1</div>
<div class="col-xs-4">data 2</div>
<div class="col-xs-4">data 3</div>
</div>
<div class="row">
<div class="col-xs-4">data 1</div>
<div class="col-xs-4">data 2</div>
<div class="col-xs-4">data 3</div>
</div>
<div class="row">
<div class="col-xs-4">data 1</div>
<div class="col-xs-4">data 2</div>
<div class="col-xs-4">data 3</div>
</div>
<div class="row">
<div class="col-xs-4">data 1</div>
<div class="col-xs-4">data 2</div>
<div class="col-xs-4">data 3</div>
</div>
<div class="row">
<div class="col-xs-4">data 1</div>
<div class="col-xs-4">data 2</div>
<div class="col-xs-4">data 3</div>
</div>
<div class="row">
<div class="col-xs-4">data 1</div>
<div class="col-xs-4">data 2</div>
<div class="col-xs-4">data 3</div>
</div>
<div class="row">
<div class="col-xs-4">data 1</div>
<div class="col-xs-4">data 2</div>
<div class="col-xs-4">data 3</div>
</div>
<div class="row">
<div class="col-xs-4">data 1</div>
<div class="col-xs-4">data 2</div>
<div class="col-xs-4">data 3</div>
</div>
<div class="row">
<div class="col-xs-4">data 1</div>
<div class="col-xs-4">data 2</div>
<div class="col-xs-4">data 3</div>
</div>
<div class="row">
<div class="col-xs-4">data 1</div>
<div class="col-xs-4">data 2</div>
<div class="col-xs-4">data 3</div>
</div>
<div class="row">
<div class="col-xs-4">data 1</div>
<div class="col-xs-4">data 2</div>
<div class="col-xs-4">data 3</div>
</div>
<div class="row">
<div class="col-xs-4">data 1</div>
<div class="col-xs-4">data 2</div>
<div class="col-xs-4">data 3</div>
</div>
<div class="row">
<div class="col-xs-4">data 1</div>
<div class="col-xs-4">data 2</div>
<div class="col-xs-4">data 3</div>
</div>
<div class="row">
<div class="col-xs-4">data 1</div>
<div class="col-xs-4">data 2</div>
<div class="col-xs-4">data 3</div>
</div>
<div class="row">
<div class="col-xs-4">data 1</div>
<div class="col-xs-4">data 2</div>
<div class="col-xs-4">data 3</div>
</div>
<div class="row">
<div class="col-xs-4">data 1</div>
<div class="col-xs-4">data 2</div>
<div class="col-xs-4">data 3</div>
</div>
<div class="row">
<div class="col-xs-4">data 1</div>
<div class="col-xs-4">data 2</div>
<div class="col-xs-4">data 3</div>
</div>
<div class="row">
<div class="col-xs-4">data 1</div>
<div class="col-xs-4">data 2</div>
<div class="col-xs-4">data 3</div>
</div>
<div class="row">
<div class="col-xs-4">data 1</div>
<div class="col-xs-4">data 2</div>
<div class="col-xs-4">data 3</div>
</div>
<div class="row">
<div class="col-xs-4">data 1</div>
<div class="col-xs-4">data 2</div>
<div class="col-xs-4">data 3</div>
</div>
<div class="row">
<div class="col-xs-4">data 1</div>
<div class="col-xs-4">data 2</div>
<div class="col-xs-4">data 3</div>
</div>
<div class="row">
<div class="col-xs-4">data 1</div>
<div class="col-xs-4">data 2</div>
<div class="col-xs-4">data 3</div>
</div>
<div class="row">
<div class="col-xs-4">data 1</div>
<div class="col-xs-4">data 2</div>
<div class="col-xs-4">data 3</div>
</div>
<div class="row">
<div class="col-xs-4">data 1</div>
<div class="col-xs-4">data 2</div>
<div class="col-xs-4">data 3</div>
</div>
<div class="row">
<div class="col-xs-4">data 1</div>
<div class="col-xs-4">data 2</div>
<div class="col-xs-4">data 3</div>
</div>
<div class="row">
<div class="col-xs-4">data 1</div>
<div class="col-xs-4">data 2</div>
<div class="col-xs-4">data 3</div>
</div>
<div class="row">
<div class="col-xs-4">data 1</div>
<div class="col-xs-4">data 2</div>
<div class="col-xs-4">data 3</div>
</div>
<div class="row">
<div class="col-xs-4">data 1</div>
<div class="col-xs-4">data 2</div>
<div class="col-xs-4">data 3</div>
</div>
<div class="row">
<div class="col-xs-4">data 1</div>
<div class="col-xs-4">data 2</div>
<div class="col-xs-4">data 3</div>
</div>
<div class="row">
<div class="col-xs-4">data 1</div>
<div class="col-xs-4">data 2</div>
<div class="col-xs-4">data 3</div>
</div>
<div class="row">
<div class="col-xs-4">data 1</div>
<div class="col-xs-4">data 2</div>
<div class="col-xs-4">data 3</div>
</div>
<div class="row">
<div class="col-xs-4">data 1</div>
<div class="col-xs-4">data 2</div>
<div class="col-xs-4">data 3</div>
</div>
<div class="row">
<div class="col-xs-4">data 1</div>
<div class="col-xs-4">data 2</div>
<div class="col-xs-4">data 3</div>
</div>
<div class="row">
<div class="col-xs-4">data 1</div>
<div class="col-xs-4">data 2</div>
<div class="col-xs-4">data 3</div>
</div>
<div class="row">
<div class="col-xs-4">data 1</div>
<div class="col-xs-4">data 2</div>
<div class="col-xs-4">data 3</div>
</div>
</div>
</div>
</div>
</body>
</html>
In that snippet the light grey container is the outer container with the size for the complete list.
The dark grey is the header. and the data below should fit into the light grey box and show a scrollbar on the right side.
Any help is appreciated.
You have set the height of #innercontainer to 100% but not set it relative to anything so it will adopt the the height of body in this case.
Something like this should get you on the way:
#maincontainer {
position:relative;
height:500px;
background-color:lightgrey;
}
#innercontainer {
height:100%;
overflow: scroll;
overflow-x: hidden;
}
#listrow {
positon: relative;
height: calc(100% - 50px);
}
#headerrow {
background-color:grey;
height:50px;
}
As a sidenote, bootstrap comes with some good table styling which I think is a good usecase for what you are trying to create.
you can add this code css
#listrow {
background-color:lightgrey;
}
I created the following custom table:
http://jsfiddle.net/pg92nzh2/ (live example)
<div class="table-custom">
<div class="table-heading">
<div class="table-cell">title 1</div>
<div class="table-cell">title 2</div>
<div class="table-cell">title 3</div>
<div class="table-cell">title 4</div>
</div>
<div class="table-row">
<div class="table-cell">test 1</div>
<div class="table-cell">test 2</div>
<div class="table-cell">test 3</div>
<div class="table-cell">test 4</div>
</div>
<div class="table-row">
<div class="table-cell">test 1</div>
<div class="table-cell">test 2</div>
<div class="table-cell">test 3</div>
<div class="table-cell">test 4</div>
</div>
</div>
Everything works great but I would like to be able to put a tag between rows (div, span or whatever) that won't affect the behavior of my table (the final goal is to use ng-repeat to this tag so I can have modular tables). Here is an example of what I would like to do: http://jsfiddle.net/gzdrz9mr/
I would like to put this tag preferably wherever I want without affecting anything...
I use Bootstrap for my css layout.
How come the following html code produces different margin-left for the side elements ?
Like the screen shot shows.
Thanks a lot for the help.
<body>
<div class="container-fluid pink"> <!--container-->
<div class="row-fluid">
<div class="span12 grey"> <!--header-->
header<br/><br/><br/><br/>
</div>
<div class="row-fluid"> <!--navs-->
<div class="span2 green">nav 1</div>
<div class="span2 yellow">nav 2</div>
<div class="span2 yellow">nav 3</div>
<div class="span2 green">nav 4</div>
<div class="span2 yellow">nav 5</div>
<div class="span2 green">nav 6</div>
</div>
<div class="row-fluid">
<div class="span3 yellow"> <!--sidebar-->
<div class="span12 cyan">side 1</div>
<div class="span12 blue">side 2</div>
<div class="span12 cyan">side 3</div>
</div>
<div class="span9 blue"> <!--Body-->
body<br/><br/><br/><br/><br/>
</div>
</div>
<div class="row-fluid"> <!--footer-->
<div class="span4 green">foot 1</div>
<div class="span4 grey">foot 2</div>
<div class="span4 green">foot3</div>
</div>
</div>
</div>
</body>
You have nested rows in the side bar. Try this for that section
<div class="row-fluid">
<div class="span3 yellow"> <!--sidebar-->
<div class="row-fluid"> <!-- start nested rows -->
<div class="span12 cyan">side 1</div>
</div>
<div class="row-fluid">
<div class="span12 blue">side 2</div>
</div>
<div class="row-fluid">
<div class="span12 cyan">side 3</div>
</div> <!-- end nested rows -->
</div>
</div>
For full details, see the fluid nested section at http://twitter.github.io/bootstrap/scaffolding.html#fluidGridSystem
Good luck!