In Semantic UI, I could use .four.wide.column to make a 4/16 wide column on all devices / viewports.
But in Foundation, It seems like I have to use .small-4.medium-4.large-4 to make sure the column has the same width on the different devices / viewports.
Is there anything like ... .all-4 column width in Foundation so I don't have to use .small-4.medium-4.large-4?
<!-- Semantic UI -->
<div class="ui grid">
<div class="four wide column"></div>
</div>
<!-- Foundation -->
<div class="grid-x">
<!-- Is there a .all-4 class? -->
<div class="small-4 medium-4 large-4 cell"></div>
</div>
Have a look at the Foundation XY Grid Docs
.cell {
background: #1779ba;
color: #fefefe;
text-align: center;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.5.0/css/foundation.min.css" rel="stylesheet" />
<div class="grid-x grid-margin-x">
<div class="cell small-6">6 cells</div>
<div class="cell small-6">6 cells</div>
</div>
<div class="grid-x grid-margin-x ">
<div class="cell small-4">4 cells</div>
<div class="cell small-4">4 cells</div>
<div class="cell small-4">4 cells</div>
</div>
Or if you need, the older Foundation float grid docs. (These are now disabled by default, and were replaced in v6.4)
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.5.0/css/foundation-float.css" rel="stylesheet" />
<div class="row">
<div class="columns small-4">4</div>
<div class="columns small-4">4</div>
<div class="columns small-4">4</div>
</div>
<div class="row">
<div class="columns small-6">3</div>
<div class="columns small-6">9</div>
</div>
If you use <div class="small-4 cell"></div> it will have the right size on all viewports.
The classes are always overwritten by the next higher one, e.g.: medium overwrites small
Related
I have a bootstrap container-fluid, which contains a row. The row should display only on screens larger than 'medium'. To achieve that, I've added 'd-none d-md-block' to the row class. This works, in terms of appearing/hiding, but all of the columns in it fill the width of the screen, and are therefore stacked vertically, when they should be horizontal.
Strangely, if I remove the d-none d-md-block classes, the columns display horizontally as expected. Code:
<div class="container-fluid">
<div class="row d-none d-md-block">
<div class="col-auto">
<div class="menu_circle">Link 1</div>
</div>
<div class="col-auto">
<div class="menu_circle">Link 1</div>
</div>
<div class="col-auto">
<div class="menu_circle">Link 1</div>
</div>
<div class="col-auto">
<div class="menu_circle">Link 1</div>
</div>
</div>
</div>
Fiddle:
https://jsfiddle.net/aq9Laaew/139426/
(you may have to make the output window slightly bigger to trigger the visibility).
Instead of using d-md-block you can use d-md-flex:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="container-fluid">
<div class="row d-none d-md-flex">
<div class="col-auto">
<div class="menu_circle">Link 1</div>
</div>
<div class="col-auto">
<div class="menu_circle">Link 1</div>
</div>
<div class="col-auto">
<div class="menu_circle">Link 1</div>
</div>
<div class="col-auto">
<div class="menu_circle">Link 1</div>
</div>
</div>
</div>
Bootstrap 4.1 is using flexbox to format the rows and columns of the grid system. By using d-md-block you remove (overwrite) the flex rules on the row, so the columns (col-*) breaks too.
i am not css developer but i am trying to lean bootstrap usage. so i was reading article from this url http://www.c-sharpcorner.com/article/overview-of-bootstrap-buttons-and-grid-offset/
i am curious to know how bootstrap offset works?
see some code example
1)
<div class="container">
<div class="row">
<div class="col-md-3col-md-offset-3 ">
<div class="customDiv">column 1</div>
</div>
<div class="col-md-3">
<div class="customDiv">column 2</div>
</div>
</div>
how col-md-offset-3 push two column at center. see the screen shot.
2) see this one
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="customDiv">column 1</div>
</div>
<div class="col-md-3 col-md-offset-6 ">
<div class="customDiv">column 2</div>
</div>
</div>
</div>
how this offset col-md-offset-6 can push two column to corner. one to left and another to right. see the screen shot
3) how image comes at center see the code and screen shot
<div class="container">
<div class="row"> <img src="one.png" class="col-md-4 col-md-offset-4 img-responsive" /> </div>
</div>
please explain my each points and tell me how offset works in bootstrap. thanks
I'm using Bootstrap v. 4 for the first time.
I have a footer that is using the new flex col's and it works great on desktop. But when I switch to mobile they're stacked so closely to each other there is no vertical margin / padding.
Is this the normal behavior?
Also, I would prefer the content is centered or at least have some offset. But using offset results in top padding instead of left or right offset.
Is that normal behavior?
If so, what would be the recommended, "official", approach to adding top margin/padding on mobile only and offset?
Thank you!
Without Offset:
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet">
<div class="row" id="kpc-row-10">
<div class="container">
<div class="row">
<div class="col-sm">
</div>
<div class="col-sm">
</div>
<div class="col-sm">
</div>
<div class="col-sm">
</div>
</div>
</div>
</div>
With Offset:
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet">
<div class="row" id="kpc-row-10">
<div class="container">
<div class="row">
<div class="col-sm offset-sm-2">
</div>
<div class="col-sm offset-sm-2">
</div>
<div class="col-sm offset-sm-2">
</div>
<div class="col-sm offset-sm-2">
</div>
</div>
</div>
</div>
"they're stacked so closely to each other there is no vertical margin / padding"
As already mentioned in the comments, and in other questions, there is no vertical spacing between columns in Bootstrap. However, Bootstrap 4 has spacing utility classes you can utilize to adjust the margins or padding...
For example my-3 will add a top and bottom (y-axis) margin to each column.
<div class="container">
<div class="row">
<div class="col-sm my-3">
</div>
<div class="col-sm my-3">
</div>
<div class="col-sm my-3">
</div>
<div class="col-sm my-3">
</div>
</div>
</div>
Demo: http://www.codeply.com/go/ABUaBgCNbE
See my other answer for more info on the spacing utilities.
I'm new in bootstrap and css, and I want to design this output:
For that purpose write this :
<div class="row">
<div class="col-md-12 col-md-1 col-md-4 col-md-8" style="background-color: yellow; width: 100%; height: 100%; position: fixed;">
<nav class="navbar navbar-default navbar-left">
<div class="container">
behzad
</div>
</nav>
<div class="col-md-1">
</div>
</div>
</div>
But that is not correct, how can I solve that?
You are not using bootstrap correctly. Put your col definitions within separate div's: Also make use of bootstrap's xs, and md definitions. Finally, put your row inside a container.
<div class="container">
<div class="row">
<div class="col-sm-3"></div>
<div class="col-sm-9">
<div class="col-xs-1"></div>
<div class="col-xs-1"></div>
<div class="col-xs-1"></div>
<div class="col-xs-1"></div>
<div class="col-xs-1"></div>
<div class="col-xs-1"></div>
<div class="col-xs-1"></div>
<div class="col-xs-1"></div>
<div class="col-xs-1"></div>
<div class="col-xs-1"></div>
<div class="col-xs-1"></div>
<div class="col-xs-1"></div>
</div>
</div>
</div>
Working example: https://jsfiddle.net/mspinks/zf0q5cLk/3/
Bootstrap should follow pattern: container - row - col. Then use -xs (xsmall devices), -sm (small devices), -md (medium devices), -lg (large devices) to change grid design based on device.
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-3 col-lg-3">
<!-- Left panel, top panel on mobile device -->
</div>
<div class="col-xs-12 col-sm-12 col-md-9 col-lg-9">
<!-- Content -->
<div class="row">
<div class="col-xs-1">
<!-- First empty col (Also can use offset) -->
</div>
<div class="col-xs-1">
</div>
<div class="col-xs-1">
</div>
.
.
.
<div class="col-xs-1">
<!-- Last empty col (Also can use offset) -->
</div>
</div>
</div>
</div>
</div>
If u want to use col-offset try this approach:
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-3 col-lg-3">
<!-- Left panel, top panel on mobile device -->
</div>
<div class="col-xs-8 col-lg-offset-2">
<!-- Content -->
<div class="row">
<div class="col-xs-1">
</div>
<div class="col-xs-1">
</div>
.
.
.
</div>
</div>
</div>
</div>
Offset moves columns to the right using .col-xs(sm, md, lg)-offset-*. These classes increase the left margin of a column by * columns. In this example, .col-xs-offset-2 moves columns over two columns.
I am trying to make a single page full screen layout using Bootstrap 3 where the height of the main body is responsive.
The page is going to be displayed in Kiosk mode displaying 3 panels which display different messages, but as the site is going to be displayed on multiple screens of different sizes I am wanting to get the main to be responsive in height.
https://jsfiddle.net/gokcLvtv/7/
<div class="container">
<div class="row header">
<div class="col-xs-6">
Title
</div>
<div class="col-xs-6 text-right">
LOGO
</div>
</div><!-- Header-->
<div class="row main">
<div class="col-xs-8">
<div class="well">Panel One</div>
</div>
<div class="col-xs-4">
<div class="well">Panel Two</div>
<div class="well">Panel Three</div>
</div>
</div><!--main-->
<div class="row footer">
<div class="col-xs-12">© Copyright 2016</div>
</div><!--footer-->
</div><!--container-->
As you can see I have had to specify a height of the main content to get the cols to be 100% and then the .wells inside the column. But I am wanting this to be 100%.
You can use the vw value for horizontal and vertical resizing.
For example
HTML
<div class="main">
<div class="well">
Panel one
</div>
</div>
CSS
.main {
border: 1px solid red;
height: 75vw;
}
.well {
width: 30vw;
height: 30vw;
margin: 1vw;
}
It's easy to translate from px to vw. Every 1 vw is 10 pixels.
Thanks for your help with the vw ... I have managed to achieve this using vh for the height..
I have created an example for anyone who would like to use this in the future - here
Using the same layout
<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
<div class="well">Header</div>
</div>
</div>
<!-- main -->
<div class="row">
<div class="col-xs-8 main">
<div class="well">
Main Panel
</div>
</div>
<div class="col-xs-4 side-bar">
<div class="well">
Side Panel One
</div>
<div class="well">
Side Panel One
</div>
</div>
</div>
<!-- Footer-->
<div class="row">
<div class="col-sm-12">
<div class="well">Hello</div>
</div>
</div>
</div>
You will just have to play around with the heights to get it to the screensize that works for you.