I am starting out with bootstrap and am trying to create a simple column within a row, within a container.
The aim is to make the content within the column take up approximately a quarter the width of the page (or 3/12 of the grid).
Here is my code...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrap.com/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="styles.css">
<title>Creating Columns</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-3">
<h1>8.Creating Columns</h1>
<p>Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Ab libero, cupiditate veniam
officiis itaque in porro iure fugit iusto
reprehenderit commodi earum cum blanditiis quos
error similique quod, facere! Hic.</p>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>
When I run this code in the browser, The Lorem Ipsum text just spans the whole
width of the browser regardless of the size of the browser.
I have also tried using the class ".col-xs-3" with no success... same result.
I would appreciate any help, as I am not to far into using bootstrap yet already
stuck.
Thank you you all very much.
Related
im use bootstrap 4.3.1 version along with the vue.js version 2
my code
<div class="container">
<div class="row">
<div class="col-md-7">
<div
class="tooltip-icon"
#click="show = !show"
id="tooltip-button-1"
></div>
<b-tooltip
:show.sync="show"
target="tooltip-button-1"
custom-class="tooltip-custom"
placement="bottom"
triggers="click"
>
<div class="tooltip-text-title">
Тест
</div>
</b-tooltip>
</div>
<div class="col-md-5"></div>
</div>
</div>
JS:
<script>
export default {
name: "Test",
data() {
return {
show: false,
};
},
};
</script>
and in this case, if I change the style of the tooltip, I increase its max-width on 1000px or more (.tooltip-inner), and if its width is greater than that of the parent (col-md-7), it changes the placement to the left
it turns out that the tooltip cannot go beyond the column
Your code is working fine. I did not see any issue in that. Tooltip is behaving correct as per the col width (col-md-7) provided.
Live Demo :
new Vue({
el: "#app",
data: {
show: false
}
});
<script src="https://unpkg.com/vue#2.6.11/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue#2.12.0/dist/bootstrap-vue.js"></script>
<script src="https://unpkg.com/bootstrap-vue#2.5.0/dist/bootstrap-vue-icons.js"></script>
<link rel="stylesheet" href="https://unpkg.com/bootstrap#4.4.1/dist/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://unpkg.com/bootstrap-vue#2.12.0/dist/bootstrap-vue.css"/>
<div id="app">
<div class="container">
<div class="row" style="text-align: center">
<div class="col-md-7" style="background-color: yellow">
<div #click="show = !show" id="tooltip-button-1">
Click Me
</div>
<b-tooltip target="tooltip-button-1" triggers="click" placement="bottom">Тест</b-tooltip>
</div>
<div class="col-md-5"></div>
</div>
</div>
</div>
new Vue({
el: "#app",
data: {
show: false
}
});
<script src="https://unpkg.com/vue#2.6.11/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue#2.12.0/dist/bootstrap-vue.js"></script>
<script src="https://unpkg.com/bootstrap-vue#2.5.0/dist/bootstrap-vue-icons.js"></script>
<link rel="stylesheet" href="https://unpkg.com/bootstrap#4.4.1/dist/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://unpkg.com/bootstrap-vue#2.12.0/dist/bootstrap-vue.css"/>
<div id="app">
<div class="container" style="max-width: 1024px;">
<div class="row" style="text-align: center">
<div style="background-color: yellow; width: 55%; overflow-y: scroll">
<div #click="show = !show" id="tooltip-button-1">
Click Me
</div>
<b-tooltip target="tooltip-button-1" triggers="click" placement="right">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</b-tooltip>
</div>
<div style="background-color: red; width: 45%;">
<div style="height: 40px"></div>
</div>
</div>
</div>
</div>
<style>
.tooltip-inner {
max-width: 300px!important
}
</style>
I found a more correct interpretation of my error
it appears if the block has scrolling
This works, but the moment I add Bootstrap 3, (which I need to as it's required in an existing project) it no longer fades in and out.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style type="text/css">
.flashcard
{
opacity: 1;
transition: opacity 2s;
}
.flashcard.hidden
{
opacity: 0;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', (event) =>
{
var d = document.getElementById('code-yes-text');
d.classList.add("hidden");
document.getElementById('code-yes').addEventListener("change", function()
{
if (this.checked && d.classList.contains("hidden"))
{
document.getElementById('code-yes-text').classList.toggle('hidden');
}
});
document.getElementById('code-no').addEventListener("change", function()
{
if (this.checked && !d.classList.contains("hidden"))
{
document.getElementById('code-yes-text').classList.toggle('hidden');
}
});
});
</script>
</head>
<body>
<div class="radio">
<label>
<input type="radio" name="code" id="code-yes" />
<span>Yes</span>
</label>
</div>
<div id="code-yes-text" class="flashcard hidden">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Totam quibusdam suscipit culpa voluptatem nulla. Rerum explicabo in quo commodi ad laudantium nam ratione consectetur beatae, sint dolore molestias assumenda soluta.
</div>
<div class="radio">
<label>
<input type="radio" name="code" id="code-no" />
<span>No</span>
</label>
</div>
</body>
</html>
I am not sure what is happening here, but seems like I can't change the class of the active-class prop of my v-expansion-panels dynamically.
I am trying to change it between green and red depending on a model state (changed by a click on a button), but even though the model changes the v-expansion-panels doesn't pick the new active class.
Might be doing something wrong here, but can't figure it out.
new Vue({
el: '#app',
vuetify: new Vuetify(),
data () {
return {
edited: false,
}
},
computed: {
activeClass() {
return this.edited ? 'active-panel-edited' : 'active-panel-normal';
}
}
})
<style scoped>
.active-panel-edited {
background-color: #ff000038 !important;
}
.active-panel-normal {
background-color: #00ff1438 !important;
}
</style>
<html>
<head>
<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#6.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>
</head>
<body>
<div id="app">
<v-app>
The current active class: {{activeClass}}
<v-expansion-panels :active-class="activeClass">
<v-expansion-panel
v-for="(item,i) in 5"
:key="i"
>
<v-expansion-panel-header>
Item
</v-expansion-panel-header>
<v-expansion-panel-content>
Lorem ipsum dolor sait amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
<v-btn #click="edited = !edited">Change Color</v-btn>
</v-expansion-panel-content>
</v-expansion-panel>
</v-expansion-panels>
</v-app>
</div>
</body>
</html>
Thank you in advance!
apply the active class v-expansion-panel instead of v-expansion-panels
new Vue({
el: '#app',
vuetify: new Vuetify(),
data () {
return {
edited: false,
}
},
computed: {
activeClass() {
return this.edited ? 'active-panel-edited' : 'active-panel-normal';
}
}
})
<html>
<head>
<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#6.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>
<style>
.active-panel-edited {
background-color: #ff000038 !important;
}
.active-panel-normal {
background-color: #00ff1438 !important;
}
</style>
</head>
<body>
<div id="app">
<v-app>
The current active class: {{activeClass}}
<v-expansion-panels>
<v-expansion-panel
:active-class="activeClass"
v-for="(item,i) in 5"
:key="i"
>
<v-expansion-panel-header>
Item
</v-expansion-panel-header>
<v-expansion-panel-content>
Lorem ipsum dolor sait amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
<v-btn #click="edited = !edited">Change Color</v-btn>
</v-expansion-panel-content>
</v-expansion-panel>
</v-expansion-panels>
</v-app>
</div>
</body>
</html>
I have the following slider
Vue.config.productionTip = false;
Vue.config.devtools = false;
new Vue({
el: '#app',
vuetify: new Vuetify(),
})
<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-carousel
cycle
height="600"
hide-delimiter-background
show-arrows
next-icon
prev-icon
>
<v-carousel-item
:src=`https://picsum.photos/seed/picsum/536/354`
>
<v-row align-end>
<h1 class="white-text">Lorem, ipsum dolor.</h1>
<p class="white-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi quo iusto velit autem, pariatur impedit neque, sed a, rem architecto aut aliquid aspernatur magni quibusdam natus ducimus fugiat. Et, veniam.</p>
<v-btn color="yellow black-text">Hi</v-btn>
</v-row>
</v-carousel-item>
</v-carousel>
</v-app>
</div>
I want for example align the text of the first slide at the bottom-center of the image, I've heard that Vuetify uses flexbox but I'm not sure how it works and I don't even understand the examples from the documentation, so I would like some help. What I want to know the most is where to place the align or justify, I really don't get it.
Try to add the following classes d-flex flex-column justify-end align-center fill-height to the v-row component :
Vue.config.productionTip = false;
Vue.config.devtools = false;
new Vue({
el: '#app',
vuetify: new Vuetify(),
})
<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-carousel cycle height="600" hide-delimiter-background show-arrows next-icon prev-icon>
<v-carousel-item :src=`https://picsum.photos/seed/picsum/536/354`>
<v-row class="d-flex flex-column justify-end align-center fill-height">
<h1 class="white-text">Lorem, ipsum dolor.</h1>
<p class="white-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi quo iusto velit autem, pariatur impedit neque, sed a, rem architecto aut aliquid aspernatur magni quibusdam natus ducimus fugiat. Et, veniam.</p>
<v-btn color="yellow black-text">Hi</v-btn>
</v-row>
</v-carousel-item>
</v-carousel>
</v-app>
</div>
I looked arround and I think I am using correctly the jumbotron element, but for some reason bootstrap is not working properly. I tried copy&pasting a working jumbotron from another page and it does not work here. Bootsrap css file is correctly connected because col-sm-6 is working properly. Thanks in advance!
P.S. style.css is an empty css file
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Lorem</title>
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="">
<link rel="stylesheet" type="text/css" href="./css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="./css/style.css">
<link rel="stylesheet" type="text/css" href="./css/bootstrap-theme.css">
<link rel="stylesheet" type="text/css" href="./css/normalize.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<header></header>
<div class="jumbotron login_main" >
<div class="col-sm-6 vertical-center">
<h1 class="text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit</h1>
<h2 class="text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et</h2>
</div>
<form>
<p>hello</p>
</form>
</div>
<footer>
</footer>
</body>
</html>
<div class="container">
<div class="col-sm-6 col-sm-offset-3 vertical-center">
<div class="jumbotron login_main" >
<h1 class="text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit</h1>
<h2 class="text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et</h2>
<form>
<p>hello</p>
</form>
</div>
</div>
</div>
You're going to want to wrap it all in an element with the class "container". The bootstrap grid system uses 12 columns, so if you're going to have an element that is 6 columns wide, to center it, you'll need to offset it by 3. The code here should work.