Am trying Bootstrap 3.
2 columns but they are not between gutters.
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6 box">
<div>
<h3 class="green size-16">Test</h3>
</div><!--first stack-->
<div class="col-md-12">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae tellus cursus, porttitor nisi vitae, laoreet metus. Pellentesque felis sapien, ullamcorper vel massa vel, pharetra efficitur diam.
</div><!--second stack-->
</div><!--first box-->
<div class="col-xs-12 col-sm-6 col-md-6 box">
<div>
<h3 class="green size-16">Test</h3>
</div><!--first stack-->
<div class="col-md-12">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae tellus cursus, porttitor nisi vitae, laoreet metus. Pellentesque felis sapien, ullamcorper vel massa vel, pharetra efficitur diam.
</div><!--second stack-->
</div><!--second box-->
</div>
Bootstrap css in head and js at bottom of the body. I do see the padding showing on inspect element, but all boxes are glued to one another so it looks like all in a box.
I might have overlooked smthing, but I tested on jsfiddle and it showed that it worked correctly. It is strange that on html file, it wasnt working as it should.
help appreciated
One more thing
Even with cheating addition to css: margin: 15px, the col-md-4 boxes becomes 2 columns instead of 3 columns. Is it because of the wrapper being in max-width: 1200px?
Actually, this is correct and it's how Bootstrap is designed. The padding affects the content within the grid divs, not the div themselves. I've tweaked your example and made a bootply (my prefered tool - sorry) http://www.bootply.com/8hj7p5Engy.
The content is nicely "guttered" and padded away from neighbor content, but when you add a background or border to the div, then it looks off.
If you're looking for bordered or colored containers around your content, you should probably look at using a Bootstrap .well or .panel
Related
I am practicing with css-grid and media queries. When I add the media query for max-width 768px nothing happens when I shrink the screen to that size and I still see the 4 columns instead of the 2 I am trying to apply.
I am using Visual Studio Code and the live server. I already tried opening the html directly in Finder (I am using mac os), i have refreshed the page and still have the same issue.
Something is overriding that media query when I have a screen size under 768px and when I inspect the file I see these messages below. How can I solve this or what am I doing wrong here?
Very thankful for any help!
body {
background: green;
}
.grid {
display: grid;
grid-template-columns: repeat(4, auto);
grid-gap: 1rem;
}
#media (max-width: 768px) {
.grid {
display: grid;
grid-template-columns: repeat (2, auto);
}
}
<body>
<div class="grid">
<div class="item">
<h3>Heading 1</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quidem debitis nesciunt eum accusamus corrupti voluptates officiis. Molestiae deleniti pariatur ipsum rerum facilis dicta fugiat quibusdam, nulla quo suscipit, consectetur ratione.</p>
</div>
<div class="item">
<h3>Heading 2</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quidem debitis nesciunt eum accusamus corrupti voluptates officiis. Molestiae deleniti pariatur ipsum rerum facilis dicta fugiat quibusdam, nulla quo suscipit, consectetur ratione.</p>
</div>
<div class="item">
<h3>Heading 3</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quidem debitis nesciunt eum accusamus corrupti voluptates officiis. Molestiae deleniti pariatur ipsum rerum facilis dicta fugiat quibusdam, nulla quo suscipit, consectetur ratione.</p>
</div>
<div class="item">
<h3>Heading X</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quidem debitis nesciunt eum accusamus corrupti voluptates officiis. Molestiae deleniti pariatur ipsum rerum facilis dicta fugiat quibusdam, nulla quo suscipit, consectetur ratione.</p>
</div>
</div>
</body>
There is a space between the word repeat and the opening bracket. Remove that and all should be OK.
The yellow warning triangle shows that something was wrong with that line.
I would like to ask 2 questions about Sidebar in BootstrapVue.
Disable scrolling after opened Sidebar
How to handle closing method when click outside the Sidebar (Backdrop)
I'm using https://bootstrap-vue.org/docs/components/sidebar
<template>
<div>
<b-button v-b-toggle.sidebar-backdrop>Toggle sSidebar</b-button>
<b-sidebar
id="sidebar-backdrop"
title="Sidebar with backdrop"
backdrop
shadow
>
<div class="px-3 py-2">
<p>
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
</p>
<b-img src="https://picsum.photos/500/500/?image=54" fluid thumbnail></b-img>
</div>
</b-sidebar>
</div>
</template>
Thank you and appreciate.
You can remove the scrollbar by adding the bootstrap class overflow-hidden to your body.
Hook a method up to the #change method on the sidebar, which is fired when the sidebar is shown and hidden.
The sidebar also has a #hidden event, which is fired when the sidebar gets hidden.
new Vue({
el: '#app',
methods: {
toggleBodyScrollbar(visible) {
const body = document.getElementsByTagName('body')[0];
if(visible)
body.classList.add("overflow-hidden");
else
body.classList.remove("overflow-hidden");
}
}
})
<link href="https://unpkg.com/bootstrap#4.4.1/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://unpkg.com/bootstrap-vue#2.13.0/dist/bootstrap-vue.css" rel="stylesheet" />
<script src="https://unpkg.com/babel-polyfill/dist/polyfill.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.js"></script>
<script src="https://unpkg.com/bootstrap-vue#2.13.0/dist/bootstrap-vue.js"></script>
<div id="app">
<b-sidebar id="sidebar-1" title="Sidebar" shadow backdrop #change="toggleBodyScrollbar">
<div class="px-3 py-2">
<p>
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
</p>
<b-img src="https://picsum.photos/500/500/?image=54" fluid thumbnail></b-img>
</div>
</b-sidebar>
<p v-for="i in 10">Some content</p>
<b-button v-b-toggle.sidebar-1>Toggle Sidebar</b-button>
<p v-for="i in 10">Some content</p>
</div>
I'm trying to use the flex properties in the Vuetify's grid system to align the text to the bottom right of the image but only the justify is working for me, align is doing nothing for me, I tried to use align-end in the v-flex and in the v-layout but neither is working. On top of that, if I add a v-flex the justify that used to work for the v-layout stops working. It's the first day I use Vuetify so I'm a bit lost and overwhelmed with the large number of properties and components it has so I would like some help here:
<v-card>
<v-img src="https://images.pexels.com/photos/3992952/pexels-photo-3992952.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940">
<v-container>
<v-layout justify-end>
<span class="headline white--text">Lorem, ipsum dolor.</span>
</v-layout>
</v-container>
</v-img>
<v-card-title>
<h2>Lorem, ipsum dolor.</h2>
</v-card-title>
<v-card-text>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio doloribus tempore distinctio dolorem blanditiis iusto cupiditate accusantium provident consectetur quisquam repellat quo aliquam quia placeat incidunt natus eveniet ipsa ipsum aut, animi suscipit alias sequi. Sapiente totam omnis molestiae adipisci.
</v-card-text>
<v-card-actions>
<v-btn color="info" text>Action</v-btn>
</v-card-actions>
</v-card>
a) flexbox only works on a parent-child basis. You have a few properties aimed at the flex container (the parent) and a few usable on the flex items (the children). Obviously, any flex item can also be a flex container for its own children. For a more in-depth coverage of how flexbox works I recommend this read.
b) whenever something doesn't seem to work right, regardless of the UI framework/library you use, have a look at their examples. Find one that's close to what you're after and simply copy-paste the markup and then start playing.
In your case, you don't need <v-container>, <v-layout> or any of those complications inside <v-img>.
It's way simpler:
<v-card>
<v-img>
<v-card-title />
</v-img>
<v-card-text />
<v-card-actions />
</v-card>
Here's a working example:
Vue.config.productionTip = false;
Vue.config.devtools = false;
new Vue({
el: '#app',
vuetify: new Vuetify(),
})
#app {
margin: 20px 0;
}
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/#mdi/font#4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue#2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.js"></script>
<div id="app">
<v-app>
<v-card class="mx-auto" max-width="400">
<v-img class="white--text align-end"
src="https://images.pexels.com/photos/3992952/pexels-photo-3992952.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940">
<v-card-title class="justify-end">Lorem, ipsum dolor.</v-card-title>
</v-img>
<v-card-text>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio doloribus tempore distinctio dolorem blanditiis iusto cupiditate accusantium provident consectetur quisquam repellat quo aliquam quia placeat incidunt natus eveniet ipsa ipsum aut, animi suscipit
alias sequi. Sapiente totam omnis molestiae adipisci.
</v-card-text>
<v-card-actions>
<v-btn large color="primary">Action</v-btn>
</v-card-actions>
</v-card>
</v-app>
</div>
In order to make the title bottom right aligned I used:
.align-end on <v-img> // bottom align
.justify-end on <v-card-title> // align right
Note: justify-end class aligns element contents to the right with two conditions: the item has to be a flex container (a.k.a: have display: flex
- true in the case of <v-card-title>s) and has to have flex-direction: row (which is the implicit/default value).
If it's not a flex container, you have to use text-right class (or, in plain CSS: text-align: right).
Based on flex-direction value (row|row-reverse|column|column-reverse) any of the following would align to the right, accordingly: justify-end|justify-start|align-end|align-start.
So, rather than trying to remember: "justify-end aligns to the right" (which is only true in 1 out of 4 possible cases), visualize flexbox as having a direction. What's left/right of that direction is controlled by align-*. What's front/back on that direction is controlled by justify-*.
You dont need to use v-container or v-layout in this case, just need to add align-end class on your v-img and justify-end class on the image title.
<!-- your sample code -->
<v-card>
<v-img class="align-end" src="https://images.pexels.com/photos/3992952/pexels-photo-3992952.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940">
<v-card-title class="justify-end">Lorem, ipsum dolor.</v-card-title>
</v-img>
<v-card-title>
<h2>Lorem, ipsum dolor.</h2>
</v-card-title>
<v-card-text>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio doloribus tempore distinctio dolorem blanditiis iusto cupiditate accusantium provident consectetur quisquam repellat quo aliquam quia placeat incidunt natus eveniet ipsa ipsum aut, animi suscipit alias sequi. Sapiente totam omnis molestiae adipisci.
</v-card-text>
<v-card-actions>
<v-btn color="info" text>Action</v-btn>
</v-card-actions>
</v-card>
You can always get example from Vuetify official documentation.
I have an ion-slides page:
<ion-content padding>
<ion-slides pager="true">
<ion-slide class="step-one">
<h1>Welcome</h1>
<p>Lorem ipsum dolor sit amet, massa nam ante. Vel lacus viverra volutpat tortor ligula ornare, varius ut mauris ipsum mus torquent, scelerisque suspendisse penatibus, purus et arcu ipsum vehicula quam luctus. Consectetuer sed urna accumsan. Nec viverra felis varius pretium, volutpat in et cras, odio consectetuer lacinia risus feugiat sit etiam, commodo pulvinar, dolor non et inventore.</p>
<p> </p> <!-- TODO: figure out how to add spacing properly -->
</ion-slide>
<ion-slide class="step-two">
<h1>Heading</h1>
<p>blah, blah</p>
</ion-slide>
<ion-slide class="step-three">
<h1>Heading</h1>
<p>blah, blah</p>
<ion-button (click)='finish()'>FINISH!</ion-button>
</ion-slide>
</ion-slides>
</ion-content>
How can I vertically centre the ion-slide? Currently it sits at the top of the page.
The solution for me was to add this css:
.slides {
display: flex !important;
justify-content: center !important;
align-items: center !important;
height: 100%;
}
I've got several questions regarding bootstrap.
Is there a way to make a bootstrap site fixed on a certain view (320px) when resizing it on a pc? how would you go about it? im currently using chrome to test it.
another thing, i have this logo on the navbar, is there a way to insert an image in it and automatically resize it using a css styling rather than making the image smaller on a image editor, also put it infront of the navbar not inside it.
when i resize the website smaller than 200px width, banner image goes smaller and shows the background behind the jumbotron. how can i make the image snuggly fit the top navbar?
Practice Website 1 Bootstrap
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav navbar-right">
<li>HOME</li>
<li>ABOUT US</li>
<li>LINKS</li>
<li class="dropdown"> <!-- Dropdown Link Start-->
MEDIA<b class="caret"></b>
<ul class="dropdown-menu">
<li>FACEBOOK</li>
<li>TWITTER</li>
</ul> <!-- Dropdown Link End-->
</li>
<li>CONTACT</li>
</ul>
</div>
</div>
</div> <!-- Navigational Start Container-->
<div class="jumbotron">
<h1>Success!!!</h1>
Removed Jumbotron Padding and Margin/ still not a success
<div class="container"> <!-- Grid System Content -->
<div class="row">
<div class="col-md-4">
<h3>LOREM IPSUM DOLOR 1</h3>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat Duis autem vel eum iriure dolor in hendrerit in vulputate velit Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat Duis autem vel eum iriure dolor in hendrerit in vulputate velit Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat Duis autem vel eum iriure dolor in hendrerit in vulputate velit<a class="btn btn-danger">ReadMore</a></p>
</div>
<div class="col-md-4">
<h3>LOREM IPSUM DOLOR 2</h3>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat Duis autem vel eum iriure dolor in hendrerit in vulputate velit <a class="btn btn-danger">ReadMore</a></p>
</div>
<div class="col-md-4">
<h3>LOREM IPSUM DOLOR 3</h3>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat Duis autem vel eum iriure dolor in hendrerit in vulputate velit. <a class="btn btn-danger">Read More</a></p>
</div>
</div>
</div>
<!-- Footer Start-->
<div class="navbar navbar-inverse navbar-fixed-bottom">
<div class="container">
<p class="navbar-text pull-left ">KREATIV TECH COPYRIGHT 2014</p>
Subscribe on Youtube
</div> <!-- Footer Start-->
<!-- jquery and javascript start script -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="js/bootstrap.js"></script> <!-- JS End Script-->
1) You can set you're rows classes to col-xs-#number where #number is between 1 and 12 depending on how wide the row is. This will mean that you're site is "meant" for mobile/smaller screens, and any desktop/larger screens use of it will have the same styling.
2) You could do:
<img src="/urlpath.jpg" id="images_id" />
and
#images_id {
height: desired_height;
width: desired_width;
}
3) you can give the image a class of 'img-responsive'. Or you can set the image size relative to the navbar width and height and it will shrink as the navbar does.