In regards to BS 3 if I wanted just a narrow column of content on the right I might use an offset class of 9 and a column of 3.
However, what if I wanted the reverse and on the left side? Is there a proper way to do this in BS or should I just use my own CSS methods? I was thinking of creating a column of 3 with my content and just an empty column of 9.
Bootstrap rows always contain their floats and create new lines. You don't need to worry about filling blank columns, just make sure they don't add up to more than 12.
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<div class="container">
<div class="row">
<div class="col-xs-3 col-xs-offset-9">
I'm a right column of 3
</div>
</div>
<div class="row">
<div class="col-xs-3">
I'm a left column of 3
</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
And I'm some content below both columns
</div>
</div>
</div>
I'm using the following simple custom CSS I wrote to achieve this.
.col-xs-offset-right-12 {
margin-right: 100%;
}
.col-xs-offset-right-11 {
margin-right: 91.66666667%;
}
.col-xs-offset-right-10 {
margin-right: 83.33333333%;
}
.col-xs-offset-right-9 {
margin-right: 75%;
}
.col-xs-offset-right-8 {
margin-right: 66.66666667%;
}
.col-xs-offset-right-7 {
margin-right: 58.33333333%;
}
.col-xs-offset-right-6 {
margin-right: 50%;
}
.col-xs-offset-right-5 {
margin-right: 41.66666667%;
}
.col-xs-offset-right-4 {
margin-right: 33.33333333%;
}
.col-xs-offset-right-3 {
margin-right: 25%;
}
.col-xs-offset-right-2 {
margin-right: 16.66666667%;
}
.col-xs-offset-right-1 {
margin-right: 8.33333333%;
}
.col-xs-offset-right-0 {
margin-right: 0;
}
#media (min-width: 768px) {
.col-sm-offset-right-12 {
margin-right: 100%;
}
.col-sm-offset-right-11 {
margin-right: 91.66666667%;
}
.col-sm-offset-right-10 {
margin-right: 83.33333333%;
}
.col-sm-offset-right-9 {
margin-right: 75%;
}
.col-sm-offset-right-8 {
margin-right: 66.66666667%;
}
.col-sm-offset-right-7 {
margin-right: 58.33333333%;
}
.col-sm-offset-right-6 {
margin-right: 50%;
}
.col-sm-offset-right-5 {
margin-right: 41.66666667%;
}
.col-sm-offset-right-4 {
margin-right: 33.33333333%;
}
.col-sm-offset-right-3 {
margin-right: 25%;
}
.col-sm-offset-right-2 {
margin-right: 16.66666667%;
}
.col-sm-offset-right-1 {
margin-right: 8.33333333%;
}
.col-sm-offset-right-0 {
margin-right: 0;
}
}
#media (min-width: 992px) {
.col-md-offset-right-12 {
margin-right: 100%;
}
.col-md-offset-right-11 {
margin-right: 91.66666667%;
}
.col-md-offset-right-10 {
margin-right: 83.33333333%;
}
.col-md-offset-right-9 {
margin-right: 75%;
}
.col-md-offset-right-8 {
margin-right: 66.66666667%;
}
.col-md-offset-right-7 {
margin-right: 58.33333333%;
}
.col-md-offset-right-6 {
margin-right: 50%;
}
.col-md-offset-right-5 {
margin-right: 41.66666667%;
}
.col-md-offset-right-4 {
margin-right: 33.33333333%;
}
.col-md-offset-right-3 {
margin-right: 25%;
}
.col-md-offset-right-2 {
margin-right: 16.66666667%;
}
.col-md-offset-right-1 {
margin-right: 8.33333333%;
}
.col-md-offset-right-0 {
margin-right: 0;
}
}
#media (min-width: 1200px) {
.col-lg-offset-right-12 {
margin-right: 100%;
}
.col-lg-offset-right-11 {
margin-right: 91.66666667%;
}
.col-lg-offset-right-10 {
margin-right: 83.33333333%;
}
.col-lg-offset-right-9 {
margin-right: 75%;
}
.col-lg-offset-right-8 {
margin-right: 66.66666667%;
}
.col-lg-offset-right-7 {
margin-right: 58.33333333%;
}
.col-lg-offset-right-6 {
margin-right: 50%;
}
.col-lg-offset-right-5 {
margin-right: 41.66666667%;
}
.col-lg-offset-right-4 {
margin-right: 33.33333333%;
}
.col-lg-offset-right-3 {
margin-right: 25%;
}
.col-lg-offset-right-2 {
margin-right: 16.66666667%;
}
.col-lg-offset-right-1 {
margin-right: 8.33333333%;
}
.col-lg-offset-right-0 {
margin-right: 0;
}
}
<div class="row">
<div class="col-md-10 col-md-pull-2">
col-md-10 col-md-pull-2
</div>
<div class="col-md-10 col-md-pull-2">
col-md-10 col-md-pull-2
</div>
</div>
I modified Bootstrap SASS (v3.3.5) based on Rukshan's answer
Add this in the end of the calc-grid-column mixin in mixins/_grid-framework.scss, right below the $type == offset if condition.
#if ($type == offset-right) {
.col-#{$class}-offset-right-#{$index} {
margin-right: percentage(($index / $grid-columns));
}
}
Modify the make-grid mixin in mixins/_grid-framework.scss to generate the offset-right classes.
// Create grid for specific class
#mixin make-grid($class) {
#include float-grid-columns($class);
#include loop-grid-columns($grid-columns, $class, width);
#include loop-grid-columns($grid-columns, $class, pull);
#include loop-grid-columns($grid-columns, $class, push);
#include loop-grid-columns($grid-columns, $class, offset);
#include loop-grid-columns($grid-columns, $class, offset-right);
}
You can then use the classes like col-sm-offset-right-2 and col-md-offset-right-1
Since Google seems to like this answer...
If you're looking to match Bootstrap 4's naming convention, i.e. offset-*-#, here's that modification:
.offset-right-12 {
margin-right: 100%;
}
.offset-right-11 {
margin-right: 91.66666667%;
}
.offset-right-10 {
margin-right: 83.33333333%;
}
.offset-right-9 {
margin-right: 75%;
}
.offset-right-8 {
margin-right: 66.66666667%;
}
.offset-right-7 {
margin-right: 58.33333333%;
}
.offset-right-6 {
margin-right: 50%;
}
.offset-right-5 {
margin-right: 41.66666667%;
}
.offset-right-4 {
margin-right: 33.33333333%;
}
.offset-right-3 {
margin-right: 25%;
}
.offset-right-2 {
margin-right: 16.66666667%;
}
.offset-right-1 {
margin-right: 8.33333333%;
}
.offset-right-0 {
margin-right: 0;
}
#media (min-width: 576px) {
.offset-sm-right-12 {
margin-right: 100%;
}
.offset-sm-right-11 {
margin-right: 91.66666667%;
}
.offset-sm-right-10 {
margin-right: 83.33333333%;
}
.offset-sm-right-9 {
margin-right: 75%;
}
.offset-sm-right-8 {
margin-right: 66.66666667%;
}
.offset-sm-right-7 {
margin-right: 58.33333333%;
}
.offset-sm-right-6 {
margin-right: 50%;
}
.offset-sm-right-5 {
margin-right: 41.66666667%;
}
.offset-sm-right-4 {
margin-right: 33.33333333%;
}
.offset-sm-right-3 {
margin-right: 25%;
}
.offset-sm-right-2 {
margin-right: 16.66666667%;
}
.offset-sm-right-1 {
margin-right: 8.33333333%;
}
.offset-sm-right-0 {
margin-right: 0;
}
}
#media (min-width: 768px) {
.offset-md-right-12 {
margin-right: 100%;
}
.offset-md-right-11 {
margin-right: 91.66666667%;
}
.offset-md-right-10 {
margin-right: 83.33333333%;
}
.offset-md-right-9 {
margin-right: 75%;
}
.offset-md-right-8 {
margin-right: 66.66666667%;
}
.offset-md-right-7 {
margin-right: 58.33333333%;
}
.offset-md-right-6 {
margin-right: 50%;
}
.offset-md-right-5 {
margin-right: 41.66666667%;
}
.offset-md-right-4 {
margin-right: 33.33333333%;
}
.offset-md-right-3 {
margin-right: 25%;
}
.offset-md-right-2 {
margin-right: 16.66666667%;
}
.offset-md-right-1 {
margin-right: 8.33333333%;
}
.offset-md-right-0 {
margin-right: 0;
}
}
#media (min-width: 992px) {
.offset-lg-right-12 {
margin-right: 100%;
}
.offset-lg-right-11 {
margin-right: 91.66666667%;
}
.offset-lg-right-10 {
margin-right: 83.33333333%;
}
.offset-lg-right-9 {
margin-right: 75%;
}
.offset-lg-right-8 {
margin-right: 66.66666667%;
}
.offset-lg-right-7 {
margin-right: 58.33333333%;
}
.offset-lg-right-6 {
margin-right: 50%;
}
.offset-lg-right-5 {
margin-right: 41.66666667%;
}
.offset-lg-right-4 {
margin-right: 33.33333333%;
}
.offset-lg-right-3 {
margin-right: 25%;
}
.offset-lg-right-2 {
margin-right: 16.66666667%;
}
.offset-lg-right-1 {
margin-right: 8.33333333%;
}
.offset-lg-right-0 {
margin-right: 0;
}
}
#media (min-width: 1200px) {
.offset-xl-right-12 {
margin-right: 100%;
}
.offset-xl-right-11 {
margin-right: 91.66666667%;
}
.offset-xl-right-10 {
margin-right: 83.33333333%;
}
.offset-xl-right-9 {
margin-right: 75%;
}
.offset-xl-right-8 {
margin-right: 66.66666667%;
}
.offset-xl-right-7 {
margin-right: 58.33333333%;
}
.offset-xl-right-6 {
margin-right: 50%;
}
.offset-xl-right-5 {
margin-right: 41.66666667%;
}
.offset-xl-right-4 {
margin-right: 33.33333333%;
}
.offset-xl-right-3 {
margin-right: 25%;
}
.offset-xl-right-2 {
margin-right: 16.66666667%;
}
.offset-xl-right-1 {
margin-right: 8.33333333%;
}
.offset-xl-right-0 {
margin-right: 0;
}
}
You need to combine multiple classes (col-*-offset-* for left-margin and col-*-pull-* to pull it right)
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-xs-3 col-xs-offset-9">
I'm a right column
</div>
<div class="col-xs-3">
We're
</div>
<div class="col-xs-3">
four columns
</div>
<div class="col-xs-3">
using the
</div>
<div class="col-xs-3">
whole row
</div>
<div class="col-xs-3 col-xs-offset-9 col-xs-pull-9">
I'm a left column
</div>
<div class="col-xs-3">
We're
</div>
<div class="col-xs-3">
four columns
</div>
<div class="col-xs-3">
using the
</div>
<div class="col-xs-3">
whole row
</div>
</div>
</div>
So you don't need to separate it manually into different rows.
Based on WeNeigh's answer! here is a LESS example
.col-offset-right(#i, #type) when (#i >= 0) {
.col-#{type}-offset-right-#{i} {
margin-right: percentage((#i / #grid-columns));
}
.col-offset-right(#i - 1, #type);
};
.col-offset-right(#grid-columns, xs);
.col-offset-right(#grid-columns, sm);
.col-offset-right(#grid-columns, md);
.col-offset-right(#grid-columns, lg);
Here is the same solution than Rukshan but in sass (in order to keep your grid configuration) for special case that don't work with Ross Allen solution (when you can't have a parent div.row)
#mixin make-grid-offset-right($class) {
#for $index from 0 through $grid-columns {
.col-#{$class}-offset-right-#{$index} {
margin-right: percentage(($index / $grid-columns));
}
}
}
#include make-grid-offset-right(xs);
#media (min-width: $screen-sm-min) {
#include make-grid-offset-right(sm);
}
#media (min-width: $screen-md-min) {
#include make-grid-offset-right(md);
}
#media (min-width: $screen-lg-min) {
#include make-grid-offset-right(lg);
}
<div class="row col-xs-12">
<nav class="col-xs-12 col-xs-offset-7" aria-label="Page navigation">
<ul class="pagination mt-0">
<li class="page-item">
<div class="form-group">
<div class="input-group">
<input type="text" asp-for="search" class="form-control" placeholder="Search" aria-controls="order-listing" />
<div class="input-group-prepend bg-info">
<input type="submit" value="Search" class="input-group-text bg-transparent">
</div>
</div>
</div>
</li>
</ul>
</nav>
</div>
Bootstrap 5 SASS solution:
#mixin make-col-offset-end($size, $columns: $grid-columns) {
$num: divide($size, $columns);
margin-right: if($num == 0, 0, percentage($num));
}
#mixin make-grid-offset-end($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) {
#each $breakpoint in map-keys($breakpoints) {
$infix: breakpoint-infix($breakpoint, $breakpoints);
#include media-breakpoint-up($breakpoint, $breakpoints) {
#if $columns > 0 {
// `$columns - 1` because offsetting by the width of an entire row isn't possible
#for $i from 0 through ($columns - 1) {
#if not ($infix == "" and $i == 0) { // Avoid emitting useless .offset-0
.offset-end#{$infix}-#{$i} {
#include make-col-offset-end($i, $columns);
}
}
}
}
}
}
}
#include make-grid-offset-end();
This will give you all of the classes offset already has, but with offset-end (e.g. offset-end-md-2)
Related
I am trying to create a script in vueJS, to enable the navbar only when the pages are not login/register.
For this I am trying to use this.$route.name but I only get undefined in the console when I am console logging it. I have created a method to check for the route name and i am calling it when the components are mounted i.e using mounted fucntion.
app.vue code:
<template>
<div id="app">
<NavBar v-if="flag" />
<main>
<router-view/>
</main>
</div>
</template>
<script>
import NavBar from './components/NavBar.vue';
export default {
components: { NavBar },
data(){
return{
flag1 : false,
flag2 : false,
flag: false
}
},
mounted() {
let id = localStorage.id;
this.getrouteflags();
return {
id
}
},
methods : {
getrouteflags: function(){
console.log(this.$route.query.name)
if(this.$route.name == 'register'){
this.flag1 = true;
}
if(this.$route.name == 'login'){
this.flag2 = true;
}
this.flag = this.flag1 || this.flag2;
console.log(this.flag1,this.flag2)
}
}
}
</script>
<style>
nav{
}
#app{
width: 100%;
height: 100%;
}
html,
body {
height: 100%;
min-height: 75rem;
}
body {
justify-content: center;
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
padding-top: 40px;
padding-bottom: 40px;
background-color: #f5f5f5;
background-image: '../../backend/static/plot.png';
}
.form-signin {
width: 100%;
max-width: 330px;
padding: 15px;
margin: auto;
}
.form-signin .checkbox {
font-weight: 400;
}
.form-signin .form-control {
position: relative;
box-sizing: border-box;
height: auto;
padding: 10px;
font-size: 16px;
}
.form-signin .form-control:focus {
z-index: 2;
}
.form-signin input[type="email"] {
margin-bottom: -1px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.form-signin input[type="password"] {
margin-bottom: 10px;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
body,html{
padding: 0;
margin: 0;
min-height: 100vh;
width: 100%;
}
html{
background-color: white;
}
</style>
This is what I am getting in the console.
Can someone help me in resolving this issue?
I'm guessing you're using Vue2.
Have you tried adding a computed property:
computed: {
currentRouteName() {
return this.$route.name;
}
}
In case you're using Vue3 with a script setup you could use VueRouter's composable.
<script setup>
import { useRouter, useRoute } from 'vue-router';
const router = useRouter();
const route = useRoute();
// Do stuff.
</script>
If you need more help, read VueRouter's guide.
v3 reference
v4 reference
I used the Composition API when migrating the project from vue2.x to vue3.0, but the page does not work properly, in vue3.0
The environment prompts me to have an "Unexpected mutation of "task" prop" error, I want to know how to write the correct compos API
This is Vue2.x code
<template>
<transition name="fade">
<div class="task" v-if="!task.deleted">
<input :id="id" type="checkbox" v-model="task.done" />
<label :for="id">{{ task.title }}</label>
<transition name="fade">
<span
class="task_delete"
v-show="task.done"
#click="deleteTask({ task })"
>
<i class="fa fa-trash"></i>
</span>
</transition>
</div>
</transition>
</template>
<script>
import { mapMutations } from "vuex";
let GID = 1;
export default {
props: {
task: {
type: Object,
required: true,
},
},
data() {
return {
id: `task-${GID++}`,
};
},
methods: {
...mapMutations(["deleteTask"]),
},
};
</script>
<style lang="scss">
.task {
display: flex;
padding: 12px 0;
border-bottom: 1px solid #eee;
font-size: 14px;
}
.task input {
display: none;
}
.task label {
flex: 1;
line-height: 20px;
}
.task label:before,
.task label:after {
content: "";
display: inline-block;
margin-right: 20px;
margin-top: 1px;
width: 14px;
height: 14px;
vertical-align: top;
}
.task label:before {
border: 1px solid #ccc;
border-radius: 2px;
background-color: white;
}
.task label:after {
content: "\f00c";
position: relative;
display: none;
z-index: 10;
margin-right: -16px;
width: 10px;
height: 10px;
padding: 3px;
border-radius: 2px;
font: normal normal normal 10px/1 FontAwesome;
color: white;
background-color: #ccc;
float: left;
}
.task input:checked + label:after {
display: inline-block;
}
.task_delete {
padding: 0 10px;
color: #ccc;
font-size: 16px;
}
.fade-leave-to,
.fade-enter {
opacity: 0;
}
.fade-enter-to,
.fade-leave {
opacity: 1;
}
.fade-enter-active,
.fade-leave-active {
transition: all 0.3s ease;
}
</style>
This is Vue3.0 code use Composition API, but not work
<template>
<transition name="fade">
<div class="task" v-if="!data.task.deleted">
<input :id="id" type="checkbox" v-model="data.task.done" />
<label :for="id">{{ data.task.title }}</label>
<transition name="fade">
<span
class="task_delete"
v-show="data.task.done"
#click="deleteTask({ task })"
>
<i class="fa fa-trash"></i>
</span>
</transition>
</div>
</transition>
</template>
<script>
import { reactive } from "vue";
import { mapMutations } from "vuex";
let GID = 1;
export default {
name: "Task",
props: {
task: {
type: Object,
required: true,
},
},
setup(props) {
const data = reactive({
task: props.task,
id: `task-${GID++}`,
});
return { data };
},
methods: {
...mapMutations(["deleteTask"]),
},
};
</script>
<style lang="scss">
.task {
display: flex;
padding: 12px 0;
border-bottom: 1px solid #eee;
font-size: 14px;
}
.task input {
display: none;
}
.task label {
flex: 1;
line-height: 20px;
}
.task label:before,
.task label:after {
content: "";
display: inline-block;
margin-right: 20px;
margin-top: 1px;
width: 14px;
height: 14px;
vertical-align: top;
}
.task label:before {
border: 1px solid #ccc;
border-radius: 2px;
background-color: white;
}
.task label:after {
content: "\f00c";
position: relative;
display: none;
z-index: 10;
margin-right: -16px;
width: 10px;
height: 10px;
padding: 3px;
border-radius: 2px;
font: normal normal normal 10px/1 FontAwesome;
color: white;
background-color: #ccc;
float: left;
}
.task input:checked + label:after {
display: inline-block;
}
.task_delete {
padding: 0 10px;
color: #ccc;
font-size: 16px;
}
.fade-leave-to,
.fade-enter {
opacity: 0;
}
.fade-enter-to,
.fade-leave {
opacity: 1;
}
.fade-enter-active,
.fade-leave-active {
transition: all 0.3s ease;
}
</style>
I think the problem is you're using v-model for props on checkbox, it will change props value directly and vue not allow it. Try update props value manual by emit event. And u dont need to use props with reactive in child component, but need to reactive that props in parent component
<input :id="id" type="checkbox" v-value="task.done" #change="updateCheckbox($event)")/>
In script:
export default {
name: "Task",
props: {
task: {
type: Object,
required: true,
},
},
emits: ['updateCheckbox'],
setup(props) {
const data = reactive({
id: `task-${GID++}`,
});
return { data };
},
methods: {
updateCheckbox(e) {
this.$emit('updateCheckbox', e.target.value)
}
},
};
UPDATE dropped this approach and went with vue-awesome-swiper script
I"m been stuck on this for days. Basically I want to use css scroll snap and I want to monitor scroll also.
In this basic example with just javascript it works fine scroll event fires and div snaps with css. The other pen below with vue.js does not and that is my problem. Losing hair about this... any help appreciated!
https://codepen.io/travis-pancakes/pen/pGYOZK?editors=0011
var i = 0;
function Onscrollfnction(event) { document.getElementById("demo").innerHTML = i;
i = i + 1;
};
/* setup */
html, body, .holster {
height: 100%;
}
.holster {
display: flex;
align-items: center;
justify-content: space-between;
flex-flow: column nowrap;
font-family: monospace;
}
.container {
display: flex;
overflow: auto;
outline: 1px dashed lightgray;
flex: none;
}
.container.x {
width: 100%;
height: 128px;
flex-flow: row nowrap;
}
.container.y {
width: 256px;
height: 256px;
flex-flow: column nowrap;
}
/* scroll-snap */
.x.mandatory-scroll-snapping {
scroll-snap-type: x mandatory;
}
.y.mandatory-scroll-snapping {
scroll-snap-type: y mandatory;
}
.x.proximity-scroll-snapping {
scroll-snap-type: x proximity;
}
.y.proximity-scroll-snapping {
scroll-snap-type: y proximity;
}
.container > div {
text-align: center;
scroll-snap-align: center;
flex: none;
}
.x.container > div {
line-height: 128px;
font-size: 64px;
width: 100%;
height: 128px;
}
.y.container > div {
line-height: 256px;
font-size: 128px;
width: 256px;
height: 256px;
}
/* appearance fixes */
.y.container > div:first-child {
line-height: 1.3;
font-size: 64px;
}
/* coloration */
.container > div:nth-child(even) {
background-color: #87EA87;
}
.container > div:nth-child(odd) {
background-color: #87CCEA;
}
<div><p>Scrolled <span id="demo">0</span> times.</p></div>
<div class="container y mandatory-scroll-snapping" onscroll="Onscrollfnction();" dir="ltr">
<div>Y Mand. LTR</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
The vue.js, vuetify version does not
https://codepen.io/travis-pancakes/pen/BMbqPq?editors=1111
new Vue({
el: '#app',
data: function(){
return {
i: 0
}
},
created () {
},
methods: {
Onscrollfnction (event) {
document.getElementById("demo").innerHTML = this.i;
this.i = this.i + 1;
console.log('i ', i)
}
}
});
/* setup */
html, body, .holster {
height: 100%;
}
.holster {
display: flex;
align-items: center;
justify-content: space-between;
flex-flow: column nowrap;
font-family: monospace;
}
.container {
display: flex;
overflow: auto;
outline: 1px dashed lightgray;
flex: none;
}
.container.x {
width: 100%;
height: 128px;
flex-flow: row nowrap;
}
.container.y {
width: 256px;
height: 256px;
flex-flow: column nowrap;
}
/* scroll-snap */
.x.mandatory-scroll-snapping {
scroll-snap-type: x mandatory;
}
.y.mandatory-scroll-snapping {
scroll-snap-type: y mandatory;
}
.x.proximity-scroll-snapping {
scroll-snap-type: x proximity;
}
.y.proximity-scroll-snapping {
scroll-snap-type: y proximity;
}
.container > div {
text-align: center;
scroll-snap-align: center;
flex: none;
}
.x.container > div {
line-height: 128px;
font-size: 64px;
width: 100%;
height: 128px;
}
.y.container > div {
line-height: 256px;
font-size: 128px;
width: 256px;
height: 256px;
}
/* appearance fixes */
.y.container > div:first-child {
line-height: 1.3;
font-size: 64px;
}
/* coloration */
.container > div:nth-child(even) {
background-color: #87EA87;
}
.container > div:nth-child(odd) {
background-color: #87CCEA;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<!-- could use v-scroll="Onscrollfnction" with vuetify" --->
<div class="container y mandatory-scroll-snapping"
v-on:scroll.native="Onscrollfnction" dir="ltr">
<div>Y Mand. LTR</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
<p>Scrolled <span id="demo">0</span> times.</p>
</div>
</div>
vue-awesome-swiper does the functionality I'm going for
In regards to BS 3 if I wanted just a narrow column of content on the right I might use an offset class of 9 and a column of 3.
However, what if I wanted the reverse and on the left side? Is there a proper way to do this in BS or should I just use my own CSS methods? I was thinking of creating a column of 3 with my content and just an empty column of 9.
Bootstrap rows always contain their floats and create new lines. You don't need to worry about filling blank columns, just make sure they don't add up to more than 12.
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<div class="container">
<div class="row">
<div class="col-xs-3 col-xs-offset-9">
I'm a right column of 3
</div>
</div>
<div class="row">
<div class="col-xs-3">
I'm a left column of 3
</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
And I'm some content below both columns
</div>
</div>
</div>
I'm using the following simple custom CSS I wrote to achieve this.
.col-xs-offset-right-12 {
margin-right: 100%;
}
.col-xs-offset-right-11 {
margin-right: 91.66666667%;
}
.col-xs-offset-right-10 {
margin-right: 83.33333333%;
}
.col-xs-offset-right-9 {
margin-right: 75%;
}
.col-xs-offset-right-8 {
margin-right: 66.66666667%;
}
.col-xs-offset-right-7 {
margin-right: 58.33333333%;
}
.col-xs-offset-right-6 {
margin-right: 50%;
}
.col-xs-offset-right-5 {
margin-right: 41.66666667%;
}
.col-xs-offset-right-4 {
margin-right: 33.33333333%;
}
.col-xs-offset-right-3 {
margin-right: 25%;
}
.col-xs-offset-right-2 {
margin-right: 16.66666667%;
}
.col-xs-offset-right-1 {
margin-right: 8.33333333%;
}
.col-xs-offset-right-0 {
margin-right: 0;
}
#media (min-width: 768px) {
.col-sm-offset-right-12 {
margin-right: 100%;
}
.col-sm-offset-right-11 {
margin-right: 91.66666667%;
}
.col-sm-offset-right-10 {
margin-right: 83.33333333%;
}
.col-sm-offset-right-9 {
margin-right: 75%;
}
.col-sm-offset-right-8 {
margin-right: 66.66666667%;
}
.col-sm-offset-right-7 {
margin-right: 58.33333333%;
}
.col-sm-offset-right-6 {
margin-right: 50%;
}
.col-sm-offset-right-5 {
margin-right: 41.66666667%;
}
.col-sm-offset-right-4 {
margin-right: 33.33333333%;
}
.col-sm-offset-right-3 {
margin-right: 25%;
}
.col-sm-offset-right-2 {
margin-right: 16.66666667%;
}
.col-sm-offset-right-1 {
margin-right: 8.33333333%;
}
.col-sm-offset-right-0 {
margin-right: 0;
}
}
#media (min-width: 992px) {
.col-md-offset-right-12 {
margin-right: 100%;
}
.col-md-offset-right-11 {
margin-right: 91.66666667%;
}
.col-md-offset-right-10 {
margin-right: 83.33333333%;
}
.col-md-offset-right-9 {
margin-right: 75%;
}
.col-md-offset-right-8 {
margin-right: 66.66666667%;
}
.col-md-offset-right-7 {
margin-right: 58.33333333%;
}
.col-md-offset-right-6 {
margin-right: 50%;
}
.col-md-offset-right-5 {
margin-right: 41.66666667%;
}
.col-md-offset-right-4 {
margin-right: 33.33333333%;
}
.col-md-offset-right-3 {
margin-right: 25%;
}
.col-md-offset-right-2 {
margin-right: 16.66666667%;
}
.col-md-offset-right-1 {
margin-right: 8.33333333%;
}
.col-md-offset-right-0 {
margin-right: 0;
}
}
#media (min-width: 1200px) {
.col-lg-offset-right-12 {
margin-right: 100%;
}
.col-lg-offset-right-11 {
margin-right: 91.66666667%;
}
.col-lg-offset-right-10 {
margin-right: 83.33333333%;
}
.col-lg-offset-right-9 {
margin-right: 75%;
}
.col-lg-offset-right-8 {
margin-right: 66.66666667%;
}
.col-lg-offset-right-7 {
margin-right: 58.33333333%;
}
.col-lg-offset-right-6 {
margin-right: 50%;
}
.col-lg-offset-right-5 {
margin-right: 41.66666667%;
}
.col-lg-offset-right-4 {
margin-right: 33.33333333%;
}
.col-lg-offset-right-3 {
margin-right: 25%;
}
.col-lg-offset-right-2 {
margin-right: 16.66666667%;
}
.col-lg-offset-right-1 {
margin-right: 8.33333333%;
}
.col-lg-offset-right-0 {
margin-right: 0;
}
}
<div class="row">
<div class="col-md-10 col-md-pull-2">
col-md-10 col-md-pull-2
</div>
<div class="col-md-10 col-md-pull-2">
col-md-10 col-md-pull-2
</div>
</div>
I modified Bootstrap SASS (v3.3.5) based on Rukshan's answer
Add this in the end of the calc-grid-column mixin in mixins/_grid-framework.scss, right below the $type == offset if condition.
#if ($type == offset-right) {
.col-#{$class}-offset-right-#{$index} {
margin-right: percentage(($index / $grid-columns));
}
}
Modify the make-grid mixin in mixins/_grid-framework.scss to generate the offset-right classes.
// Create grid for specific class
#mixin make-grid($class) {
#include float-grid-columns($class);
#include loop-grid-columns($grid-columns, $class, width);
#include loop-grid-columns($grid-columns, $class, pull);
#include loop-grid-columns($grid-columns, $class, push);
#include loop-grid-columns($grid-columns, $class, offset);
#include loop-grid-columns($grid-columns, $class, offset-right);
}
You can then use the classes like col-sm-offset-right-2 and col-md-offset-right-1
Since Google seems to like this answer...
If you're looking to match Bootstrap 4's naming convention, i.e. offset-*-#, here's that modification:
.offset-right-12 {
margin-right: 100%;
}
.offset-right-11 {
margin-right: 91.66666667%;
}
.offset-right-10 {
margin-right: 83.33333333%;
}
.offset-right-9 {
margin-right: 75%;
}
.offset-right-8 {
margin-right: 66.66666667%;
}
.offset-right-7 {
margin-right: 58.33333333%;
}
.offset-right-6 {
margin-right: 50%;
}
.offset-right-5 {
margin-right: 41.66666667%;
}
.offset-right-4 {
margin-right: 33.33333333%;
}
.offset-right-3 {
margin-right: 25%;
}
.offset-right-2 {
margin-right: 16.66666667%;
}
.offset-right-1 {
margin-right: 8.33333333%;
}
.offset-right-0 {
margin-right: 0;
}
#media (min-width: 576px) {
.offset-sm-right-12 {
margin-right: 100%;
}
.offset-sm-right-11 {
margin-right: 91.66666667%;
}
.offset-sm-right-10 {
margin-right: 83.33333333%;
}
.offset-sm-right-9 {
margin-right: 75%;
}
.offset-sm-right-8 {
margin-right: 66.66666667%;
}
.offset-sm-right-7 {
margin-right: 58.33333333%;
}
.offset-sm-right-6 {
margin-right: 50%;
}
.offset-sm-right-5 {
margin-right: 41.66666667%;
}
.offset-sm-right-4 {
margin-right: 33.33333333%;
}
.offset-sm-right-3 {
margin-right: 25%;
}
.offset-sm-right-2 {
margin-right: 16.66666667%;
}
.offset-sm-right-1 {
margin-right: 8.33333333%;
}
.offset-sm-right-0 {
margin-right: 0;
}
}
#media (min-width: 768px) {
.offset-md-right-12 {
margin-right: 100%;
}
.offset-md-right-11 {
margin-right: 91.66666667%;
}
.offset-md-right-10 {
margin-right: 83.33333333%;
}
.offset-md-right-9 {
margin-right: 75%;
}
.offset-md-right-8 {
margin-right: 66.66666667%;
}
.offset-md-right-7 {
margin-right: 58.33333333%;
}
.offset-md-right-6 {
margin-right: 50%;
}
.offset-md-right-5 {
margin-right: 41.66666667%;
}
.offset-md-right-4 {
margin-right: 33.33333333%;
}
.offset-md-right-3 {
margin-right: 25%;
}
.offset-md-right-2 {
margin-right: 16.66666667%;
}
.offset-md-right-1 {
margin-right: 8.33333333%;
}
.offset-md-right-0 {
margin-right: 0;
}
}
#media (min-width: 992px) {
.offset-lg-right-12 {
margin-right: 100%;
}
.offset-lg-right-11 {
margin-right: 91.66666667%;
}
.offset-lg-right-10 {
margin-right: 83.33333333%;
}
.offset-lg-right-9 {
margin-right: 75%;
}
.offset-lg-right-8 {
margin-right: 66.66666667%;
}
.offset-lg-right-7 {
margin-right: 58.33333333%;
}
.offset-lg-right-6 {
margin-right: 50%;
}
.offset-lg-right-5 {
margin-right: 41.66666667%;
}
.offset-lg-right-4 {
margin-right: 33.33333333%;
}
.offset-lg-right-3 {
margin-right: 25%;
}
.offset-lg-right-2 {
margin-right: 16.66666667%;
}
.offset-lg-right-1 {
margin-right: 8.33333333%;
}
.offset-lg-right-0 {
margin-right: 0;
}
}
#media (min-width: 1200px) {
.offset-xl-right-12 {
margin-right: 100%;
}
.offset-xl-right-11 {
margin-right: 91.66666667%;
}
.offset-xl-right-10 {
margin-right: 83.33333333%;
}
.offset-xl-right-9 {
margin-right: 75%;
}
.offset-xl-right-8 {
margin-right: 66.66666667%;
}
.offset-xl-right-7 {
margin-right: 58.33333333%;
}
.offset-xl-right-6 {
margin-right: 50%;
}
.offset-xl-right-5 {
margin-right: 41.66666667%;
}
.offset-xl-right-4 {
margin-right: 33.33333333%;
}
.offset-xl-right-3 {
margin-right: 25%;
}
.offset-xl-right-2 {
margin-right: 16.66666667%;
}
.offset-xl-right-1 {
margin-right: 8.33333333%;
}
.offset-xl-right-0 {
margin-right: 0;
}
}
You need to combine multiple classes (col-*-offset-* for left-margin and col-*-pull-* to pull it right)
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-xs-3 col-xs-offset-9">
I'm a right column
</div>
<div class="col-xs-3">
We're
</div>
<div class="col-xs-3">
four columns
</div>
<div class="col-xs-3">
using the
</div>
<div class="col-xs-3">
whole row
</div>
<div class="col-xs-3 col-xs-offset-9 col-xs-pull-9">
I'm a left column
</div>
<div class="col-xs-3">
We're
</div>
<div class="col-xs-3">
four columns
</div>
<div class="col-xs-3">
using the
</div>
<div class="col-xs-3">
whole row
</div>
</div>
</div>
So you don't need to separate it manually into different rows.
Based on WeNeigh's answer! here is a LESS example
.col-offset-right(#i, #type) when (#i >= 0) {
.col-#{type}-offset-right-#{i} {
margin-right: percentage((#i / #grid-columns));
}
.col-offset-right(#i - 1, #type);
};
.col-offset-right(#grid-columns, xs);
.col-offset-right(#grid-columns, sm);
.col-offset-right(#grid-columns, md);
.col-offset-right(#grid-columns, lg);
Here is the same solution than Rukshan but in sass (in order to keep your grid configuration) for special case that don't work with Ross Allen solution (when you can't have a parent div.row)
#mixin make-grid-offset-right($class) {
#for $index from 0 through $grid-columns {
.col-#{$class}-offset-right-#{$index} {
margin-right: percentage(($index / $grid-columns));
}
}
}
#include make-grid-offset-right(xs);
#media (min-width: $screen-sm-min) {
#include make-grid-offset-right(sm);
}
#media (min-width: $screen-md-min) {
#include make-grid-offset-right(md);
}
#media (min-width: $screen-lg-min) {
#include make-grid-offset-right(lg);
}
<div class="row col-xs-12">
<nav class="col-xs-12 col-xs-offset-7" aria-label="Page navigation">
<ul class="pagination mt-0">
<li class="page-item">
<div class="form-group">
<div class="input-group">
<input type="text" asp-for="search" class="form-control" placeholder="Search" aria-controls="order-listing" />
<div class="input-group-prepend bg-info">
<input type="submit" value="Search" class="input-group-text bg-transparent">
</div>
</div>
</div>
</li>
</ul>
</nav>
</div>
Bootstrap 5 SASS solution:
#mixin make-col-offset-end($size, $columns: $grid-columns) {
$num: divide($size, $columns);
margin-right: if($num == 0, 0, percentage($num));
}
#mixin make-grid-offset-end($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) {
#each $breakpoint in map-keys($breakpoints) {
$infix: breakpoint-infix($breakpoint, $breakpoints);
#include media-breakpoint-up($breakpoint, $breakpoints) {
#if $columns > 0 {
// `$columns - 1` because offsetting by the width of an entire row isn't possible
#for $i from 0 through ($columns - 1) {
#if not ($infix == "" and $i == 0) { // Avoid emitting useless .offset-0
.offset-end#{$infix}-#{$i} {
#include make-col-offset-end($i, $columns);
}
}
}
}
}
}
}
#include make-grid-offset-end();
This will give you all of the classes offset already has, but with offset-end (e.g. offset-end-md-2)
I have some nested loops in Less.
It should create css rules for padding with 3 sizes and 4 direction.
Code sample:
#sizes: normal, small, large;
#size-normal: 1em;
#size-small: 0.8 * #size-normal;
#size-large: 1.2 * #size-normal;
.l-padding {
#directions: top, left, right, bottom;
.s(#i: length(#sizes)) when (#i > 0) {
.s((#i - 1));
.d(#j: length(#directions)) when (#j > 0) {
.d((#j - 1));
#dir: extract(#directions, #j);
#s: extract(#sizes, #i);
#size: "size-#{s}";
&_#{dir}_#{s} {
.l-padding-mixin(#dir, ##size);
}
}
.d();
}
.s();
}
I don't know where is the problem but it compile to many duplacates. However each independet loop do their job.
.l-padding_top_normal {
padding-top: 1em;
}
.l-padding_left_normal {
padding-left: 1em;
}
.l-padding_right_normal {
padding-right: 1em;
}
.l-padding_bottom_normal {
padding-bottom: 1em;
}
.l-padding_top_normal {
padding-top: 1em;
}
.l-padding_left_normal {
padding-left: 1em;
}
.l-padding_right_normal {
padding-right: 1em;
}
.l-padding_bottom_normal {
padding-bottom: 1em;
}
.l-padding_top_normal {
padding-top: 1em;
}
...
.l-padding_top_normal {
padding-top: 1em;
}
.l-padding_top_small {
padding-top: 0.8em;
}
.l-padding_left_small {
padding-left: 0.8em;
}
.l-padding_right_small {
padding-right: 0.8em;
}
.l-padding_bottom_small {
padding-bottom: 0.8em;
}
.l-padding_top_normal {
padding-top: 1em;
}
.l-padding_left_normal {
padding-left: 1em;
}
.l-padding_right_normal {
padding-right: 1em;
}
.l-padding_bottom_normal {
padding-bottom: 1em;
}
...
To many duplicates. Can any one help with this?
UPD
thanks to #Harry find solution:
.l-padding-mixin(#direction, #size: 1em) {
padding-#{direction}: #size;
}
#sizes: normal, small, large;
#size-normal: 1em;
#size-small: 0.8 * #size-normal;
#size-large: 1.2 * #size-normal;
//==== layouts ====
.l-padding {
#directions: top, left, right, bottom;
#i: length(#sizes);
#j: length(#directions);
.d(#j) when (#j > 0) {
.d((#j - 1));
#dir: extract(#directions, #j);
#s: extract(#sizes, #i);
#size: "size-#{s}";
&_#{dir}_#{s} {
.l-padding-mixin(#dir, ##size);
}
}
.-(#i) when (#i > 0) {
.-((#i - 1));
.d(#j);
} .-(#i);
}