The basic structure:
<div class="page-header">
<div class="container">
<div class="row">
<div class="col-xs-24">
<h1>This is a page header</h1>
<p>With some content</p>
<ul class="nav nav-pills">
<li role="presentation" class="active">
<a href="#nav-item-1">Nav item 1</a>
</li>
<li role="presentation">
<a href="#nav-item-2">Nav item 2</a>
</li>
<li role="presentation">
<a href="#nav-item-3">Nav item 3</a>
</li>
</ul>
</div>
</div>
</div>
</div>
The JavaScript code to enable smooth scrolling:
$(function () {
$('[data-scroll="smooth"] a[href*=#]:not([href=#])').click(function () {
if (location.pathname.replace(/^\//, '') === this.pathname.replace(/^\//, '') &&
location.hostname === this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('html, body').animate({
scrollTop: target.offset().top
}, 1500);
return false; // prevent default href
}
}
});
});
data-scroll="smooth"
attribute to the <ul class="nav nav-pills">
tag and the JS code above to enable smooth scrolling.Grid system in Winstrap scales up to 24 columns.
<!-- Row with 12 elements -->
<div class="row section-gallery">
<div class="col-md-2">
…
</div>
</div>
<!-- Row with 8 elements -->
<div class="row section-gallery">
<div class="col-md-3">
…
</div>
</div>
<!-- Row with 4 elements -->
<div class="row section-gallery">
<div class="col-md-6">
…
</div>
</div>
.section-gallery
to each <div class="row">
in order to add vertical spacing below the media elements.<div class="container">
<div class="row row-sm">
<div class="col-md-6">
…
</div>
</div>
</div>
.row-sm
to each <div class="row">
in order to get small gutters.By default, all controls and HTML elements have responsive top margins. If you need to add or modify the spacing between elements, use the following utility classes, mixin, or function. We recommend you don't add bottom margins or padding to an element. Instead, add a top margin or padding to the element below it.
<element class="property-direction-size"></element>
A spacer class is constructed using the following available arguments:
Properties
m
marginp
paddingDirections
t
topr
rightb
bottoml
leftv
vertical: top and bottomh
horizontal: left and right[empty]
all: top, right, bottom, and leftSizes
xxl
84pxxl
72pxlg
64pxmd
48pxsm
36pxxs
24pxxxs
12pxxxxs
8pxn
0pxAdd medium size right margin:
<element class="m-r-md"></element>
Add small padding to all sides:
<element class="p-sm"></element>
This mixin is used to generate the spacer classes above. You can use it to set margins and padding in Sass.
.selector {
@include spacer( property, direction, size );
}
A mixin class must be constructed using the following available arguments:
Properties
margin
padding
Directions
top
right
bottom
left
vertical
horizontal
all
Sizes
xxl
xl
lg
md
sm
xs
xxs
xxxs
n
Add a medium size top margin:
.selector {
@include spacer( margin, top, md );
}
Add extra small top and bottom padding:
.selector {
@include spacer( padding, vertical, xs );
}
This function is used by the above mixin to get the correct spacing value for each size. The size
argument is required. shim
is optional.
.selector {
property: spacing( size, shim );
}
size
must be one of the following:
xxl
xl
lg
md
sm
xs
xxs
xxxs
n
Set a small size top padding:
.selector {
padding-top: spacing( sm );
}
Set large left and right margins:
.selector {
margin: 0 spacing( lg );
}