I'm working with vuetify expansion panel ui component (https://vuetifyjs.com/en/components/expansion-panels). I'm bot sure how to add color to this. As you can see I've been trying to add color="#26c6da" to multiple components without success.
<template>
<!-- <v-layout align-start > -->
<!-- <v-layout align-start justify-center row fill-height> -->
<v-container row fill-height justify-center style="max-width: 1200px" class="mx-auto" color="#26c6da">
<!-- <v-layout row fill-height=""> -->
<!-- <v-layout row justify-space-around> -->
<v-flex class="mx-auto" color="#26c6da">
<v-expansion-panel style="max-width: 1200px" class="mx-auto" color="#26c6da" >
<v-expansion-panel-content v-for="(item,i) in items" :key="i">
<div slot="header" class="headline font-weight-bold">{{item.header}}</div>
<v-card >
<v-card-text class="headline font-weight-bold">{{item.text}}</v-card-text>
</v-card>
</v-expansion-panel-content>
</v-expansion-panel>
</v-flex>
<!-- </v-layout> -->
</v-container>
Here is a component codepen link:
https://codepen.io/anon/pen/OdJKqm?&editable=true&editors=101
How can I get this working?
Try to add a standard style like style="background:#26c6da;color:white" to any element you want :
new Vue({
el: '#app',
})
<script src="https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#1.4.0/dist/vuetify.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/vuetify#1.4.0/dist/vuetify.min.css">
<div id="app">
<v-app id="inspire">
<v-expansion-panel>
<v-expansion-panel-content v-for="(item,i) in 5" :key="i" style="background:#26c6da;color:white">
<div slot="header">Item</div>
<v-card>
<v-card-text>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.</v-card-text>
</v-card>
</v-expansion-panel-content>
</v-expansion-panel>
</v-app>
</div>
Related
i have a div with a few elements in it, and i want to achieve something like this
however when i add border-bottom to my h5, the border takes the length of the div not the h5 element like so
this is the code or tailwind classes that i have used
<section>
<div className='grid md:grid-cols-2 gap-10'>
<div>
<h5 className='text-custom-orange font-medium border-solid border-b-2 border-custom-orange'>BLOG'S</h5>
<h1 className='text-5xl font-medium'>Insights</h1>
<p>Ut enim ad minim veniam, laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</section>
Add the max-w-fit utility to your h5.
This way, the maximum width of your h5 element will fit its content.
<section>
<div class="grid md:grid-cols-2 gap-10">
<div>
<h5 class="text-custom-orange font-medium border-solid border-b-2 border-custom-orange max-w-fit">BLOG'S</h5>
<h1 class="text-5xl font-medium">Insights</h1>
<p>Ut enim ad minim veniam, laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</section>
Tailwind-play
Another solution is to apply text decoration utilities:
<section>
<div class="grid gap-10 md:grid-cols-2">
<div>
<h5 class="text-custom-orange font-medium underline decoration-gray-300 decoration-2 underline-offset-4">BLOG'S</h5>
<h1 class="text-5xl font-medium">Insights</h1>
<p>Ut enim ad minim veniam, laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</section>
Tailwind-play
underline - Add an underline under the text [Docs].
decoration-gray-300 - Change the underline color to gray [Docs].
decoration-2 - Change the thickness of the underline to 2px [Docs].
underline-offset-4 - controls the offset of the text underline [Docs].
So I'm trying to use expansion panels in a project and I wanted to have my panels to always focus or scroll to the header or first element inside a newly opened panel. Everytime I open a new panel, it ignores any kind of focus or scrolling and just sticks to the scroll position it was due to overflow of parent container. Here's my vue without most of its state to show the divs and containers:
<template>
<div>
<Synchronizing v-show="loading" />
<div v-show="!loading" class="main">
<Navbar />
<div class="header">
<div class="logo">
<img style="width: 40px" src="" />
</div>
</div>
<div class="description">
<h1>HEADER</h1>
<h2>TEXT</h2>
</div>
<div class="main-container">
<div ref="main-container" class="to-harvest-container">
<v-expansion-panels
:mandatory="true"
:value="expanded"
:accordion="true"
:tile="false"
>
<v-expansion-panel class="panel">
<v-expansion-panel-header #click="logger" class="panel-header"
>TEXT</v-expansion-panel-header
>
<v-expansion-panel-content>
<label class="panel-label"><LABEL></LABEL></label>
<v-container class="chart-container">
<v-row>
<v-col class="column"
><div v-if="!alerts.to" class="chart">
<doughnut-chart
></doughnut-chart>
</div>
<div v-else>
<div ><h2>TEXT</h2></div>
<div >
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat non perferendis reprehenderit quam, inventore delectus minima quis ratione dolores mollitia sunt iure, praesentium animi, necessitatibus quos aliquid modi dignissimos. Aut?
</p>
</div>
</div></v-col
></v-row
>
</v-container>
<label class="panel-label">LABEL</label>
<v-container class="chart-container">
<v-row v-if="!alerts.lastYear">
<v-col class="column" cols="12">
<div class="chart">
<doughnut-chart
></doughnut-chart>
</div>
</v-col>
<v-col class="column" cols="12">
<div class="table-container">
<v-data-table
>
<!-- lots of data -->
</v-data-table>
</div>
</v-col>
</v-row>
<v-row v-else>
<div class="alert-card">
<div class="alert-card-top"><h2>TEXT</h2></div>
<div class="alert-card-bottom">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet vel commodi harum obcaecati voluptatum ea, repudiandae totam in numquam, illum possimus dignissimos, eum laborum quia nesciunt voluptates soluta esse amet.
</p>
</div>
</div>
</v-row>
</v-container>
</v-expansion-panel-content>
</v-expansion-panel>
<v-expansion-panel class="panel">
<v-expansion-panel-header #click="logger" class="panel-header"
>TEXT</v-expansion-panel-header
>
<v-expansion-panel-content>
<label class="panel-label"
>LABEL</label
>
<v-container class="chart-container">
<v-row v-if="!alerts.lastYear">
<v-col class="column" cols="12">
<div class="chart">
<doughnut-chart
></doughnut-chart>
</div>
</v-col>
<v-col class="column" cols="12">
<div class="table-container">
<v-data-table
>
<!-- lots of DATA -->
</v-data-table>
</div>
</v-col>
</v-row>
<v-row v-else>
<div>
<div ><h2>TEXT</h2></div>
<div>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Minima cumque quidem dignissimos temporibus aperiam consectetur debitis voluptate ratione inventore consequuntur reprehenderit, maxime, optio, tempore rerum ab vel at atque! Ipsum!
</p>
</div>
</div>
</v-row>
</v-container>
</v-expansion-panel-content>
</v-expansion-panel>
<v-expansion-panel class="panel">
<v-expansion-panel-header #click="logger" class="panel-header"
>TEXT</v-expansion-panel-header
>
<v-expansion-panel-content>
<label class="panel-label">LABEL</label>
<v-container class="chart-container">
<v-row>
<v-col class="column" lg="12">
<div>
<div>
<div>
<h3>CONTENT</h3>
<img src="#/assets/images/money-image.svg" alt="" />
</div>
<div class="card-bottom">
<h3>0</h3>
</div>
</div>
<div class="income-card">
<div class="card-top">
<h4>TEXT</h4>
<img src="#/assets/images/money-image.svg" alt="" />
</div>
<div class="card-bottom">
<h3>0</h3>
</div>
</div>
</div>
</v-col>
</v-row>
<v-row v-if="boolean">
<v-col class="column" cols="12">
<div class="chart">
<doughnut-chart
></doughnut-chart>
</div>
</v-col>
<v-col class="column" cols="12">
<div class="table-container">
<v-data-table>
<!-- LOTS OF DATA HERE -->
</v-data-table>
</div>
</v-col>
</v-row>
<v-row v-else>
<div class="alert-card">
<div class="alert-card-top"><h2>TEXT</h2></div>
<div class="alert-card-bottom">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing
elit. Ipsa obcaecati assumenda facilis expedita sunt
id debitis voluptatum in. Quibusdam eveniet asperiores
vitae quisquam perferendis laboriosam cupiditate nisi
repellendus non unde.
</p>
</div>
</div>
</v-row>
</v-container>
</v-expansion-panel-content>
</v-expansion-panel>
</v-expansion-panels>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "Report",
data() {},
methods: {
logger() {
console.log(this.$refs["main-container"]);
setTimeout(() => {
this.$vuetify.goTo(999);
}, 400);
},
},
};
</script>
<style src="./style.scss" lang="scss" scoped />
I'm trying to use the $vuetify.goTo API method but it simply hasn't done anything. Any ideas on how to make it so whenever I open a new panel, it scrolls back to the beginning of that panel?
Thanks a lot!!
Bootstrap 4 - the content in the navigation bar moves slightly to the right when the page is shorter than the screen height - this doesn't happen with longer pages. I have posted the code from two pages. A home page which is the longer page and a login page which is shorter and twitches.
I am wondering if the solution is to give a minimum height for the content - though I would prefer not to override Boostrap
Longer content with static non twitching navbar
<!-- head start -->
<!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">
<meta name="description" content="">
<meta name="author" content="">
<title>Home page of MVC test </title>
<!-- Bootstrap Core CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="/css/main.css">
<!-- Custom CSS -->
<link href="/css/blog-home.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<!-- head end -->
<body>
<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="#">MVC Test</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navigation_bar" aria-controls="navigation_bar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navigation_bar">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class='nav-item active'><a href='http://mvc.test/home' class='nav-link' >Home</a></li><li class='nav-item'><a href='http://mvc.test/posts' class='nav-link' >Posts</a></li><li class='nav-item'><a href='http://mvc.test/about' class='nav-link' >About</a></li><li class='nav-item'><a href='http://mvc.test/register' class='nav-link' >Register</a></li><li class='nav-item'><a href='http://mvc.test/login' class='nav-link' >Login</a></li> </ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</div>
</nav>
<!-- page content start -->
<div class="container">
<!-- start of row -->
<div class="row">
<!-- page content left start -->
<div class="col-md-8">
<h1 class="page-header">
Home </h1>
<h2 ><a href = "#" >A first post - I do say</a ></h2 >
<p class="lead">
by Start Bootstrap
</p>
<p><span class="glyphicon glyphicon-time"></span>2020-02-03 11:00:00</p>
<hr>
<img class="img-fluid" src="http://placehold.it/900x300" alt="">
<hr>
<p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"</p>
<a class="btn btn-primary" href="#">Read More <span class="glyphicon glyphicon-chevron-right"></span></a>
<hr>
<h2 ><a href = "#" >A second post</a ></h2 >
<p class="lead">
by Start Bootstrap
</p>
<p><span class="glyphicon glyphicon-time"></span>2020-02-03 16:00:00</p>
<hr>
<img class="img-fluid" src="http://placehold.it/900x300" alt="">
<hr>
<p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"</p>
<a class="btn btn-primary" href="#">Read More <span class="glyphicon glyphicon-chevron-right"></span></a>
<hr>
</div>
<!-- page content left end -->
<!-- page content right start -->
<div class="col-md-4 bg-light ">
<!-- Blog Search Well -->
<div class="pt-3 ml-1">
<h4>Blog Search</h4>
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
<!-- /.input-group -->
</div>
<!-- Blog Categories Well -->
<div class="pt-1 ml-1">
<h4>Blog Categories</h4>
<div class="row">
<div class="col-lg-6">
<ul class="list-unstyled">
<li>Category Name
</li>
<li>Category Name
</li>
<li>Category Name
</li>
<li>Category Name
</li>
</ul>
</div>
<!-- /.col-lg-6 -->
<div class="col-lg-6">
<ul class="list-unstyled">
<li>Category Name
</li>
<li>Category Name
</li>
<li>Category Name
</li>
<li>Category Name
</li>
</ul>
</div>
<!-- /.col-lg-6 -->
</div>
<!-- /.row -->
</div>
<!-- Side Widget Well -->
<div class="bg-light">
<h4>Side Widget Well</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, perspiciatis adipisci accusamus laudantium odit aliquam repellat tempore quos aspernatur vero.</p>
</div>
</div>
<!-- page content right end -->
</div>
<!-- end of row -->
<!-- Footer -->
<footer>
<div class="row">
<div class="col-md-12">
<p>Copyright © Your Website 2014 </p>
</div>
<!-- /.col-lg-12 -->
</div>
<!-- /.row -->
</footer>
</div>
<!-- end of container -->
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
<!-- page content end -->
Shorter content with content that moves or twitches to the right
<!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">
<meta name="description" content="">
<meta name="author" content="">
<title>This is a login title </title>
<!-- Bootstrap Core CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="/css/main.css">
<!-- Custom CSS -->
<link href="/css/blog-home.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="#">MVC Test</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navigation_bar" aria-controls="navigation_bar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navigation_bar">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class='nav-item'><a href='http://mvc.test/home' class='nav-link' >Home</a></li><li class='nav-item'><a href='http://mvc.test/posts' class='nav-link' >Posts</a></li><li class='nav-item'><a href='http://mvc.test/about' class='nav-link' >About</a></li><li class='nav-item'><a href='http://mvc.test/register' class='nav-link' >Register</a></li><li class='nav-item active'><a href='http://mvc.test/login' class='nav-link' >Login</a></li> </ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</div>
</nav>
<!-- Page Content -->
<div class="container">
<div class="row">
<div class="col-md-12 ">
<div class="col-md-6 mx-auto">
<div class="card card-light bg-light mt-5">
<h2>Login to your account</h2>
<p>Please fill in your credentials</p>
<form action="http://mvc.test/login" method="post" >
<div class="form-group">
<label for="email">Email: <sup>*</sup></label>
<input type="email" name="email" class="form-control form-control-lg " value="">
<span class="invalid-feedback"></span>
</div>
<div class="form-group">
<label for="password">Password: <sup>*</sup></label>
<input type="password" name="password" class="form-control form-control-lg " value="">
<span class="invalid-feedback"></span>
</div>
<div class="row">
<div class="col">
<input type="submit" value="Login" class="btn btn-success btn-block">
</div>
<div class="col">
Don't have an account? Login
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12" >
</div>
</div>
<!-- /.row -->
<hr>
<!-- Footer -->
<footer>
<div class="row">
<div class="col-md-12">
<p>Copyright © Your Website 2014 </p>
</div>
<!-- /.col-lg-12 -->
</div>
<!-- /.row -->
</footer>
</div>
<!-- end of container -->
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
thanks C
html {
overflow-y: scroll;
}
This is a solution to my 'twitching' nav bar, see above. I've read that this is not a good CSS and that it doesn't work in opera - however I've seen that the BBC website uses this if that means anything.
I am trying to achieve something like this:
iiii text
iiii text
iiii text
text
text
Where
iiii
iiii
iiii
is the image and on the right is the text.
If i try class float-left of bootstrap i obtain this:
iiii text
iiii text
iiii text
text <-- Text under the image
text
Basically the remaining text goes under the image.
What is cleanest way to put the image on the left, also for the text that goes down of the image?
The correct element to use is the media object - that has a media-left and and media-body element which contains the text and an optional heading.
.media-body {
padding: 16px;
}
.media-heading {
font-size: 18px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div class="row">
<div class="col-12">
<div class="media-object">
<div class="media">
<div class="media-left">
<img src="https://i.pinimg.com/originals/e5/3c/fb/e53cfb282846313a69daf9755bfaf339.jpg" class="media-object" alt="fluffy kitten" height="150" title="Fluffy Kiten" data-toggle="tooltip" data-placement="right">
</div>
<div class="media-body">
<div class="media-text-content">
<h3 class="media-heading">Fluffy kitten</h3>
<p>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.</p>
</div>
</div>
</div>
</div>
</div>
</div>
Alternatively - you can swap the text and image around and use media-right for a right sided image with the heading and text on the left.
.media-body {
padding: 16px;
}
.media-heading {
font-size: 18px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<div class="row">
<div class="col-12">
<div class="media-object">
<div class="media">
<div class="media-body">
<div class="media-text-content">
<h3 class="media-heading">Fluffy kitten</h3>
<p>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.</p>
</div>
</div>
<div class="media-right">
<img src="https://i.pinimg.com/originals/e5/3c/fb/e53cfb282846313a69daf9755bfaf339.jpg" class="media-object" alt="fluffy kitten" height="150" title="Fluffy Kiten" data-toggle="tooltip" data-placement="right">
</div>
</div>
</div>
</div>
</div>
Just make use of a row with two columns:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div class="row">
<div class="col-6">
<img src="https://placehold.it/100">
</div>
<div class="col-6">
Text<br />
Text<br />
Text<br />
Text<br />
Text<br />
Text<br />
Text<br />
Text<br />
Text
</div>
</div>
I would try to make the image align with the border line. But I cannot figure out. (As the image below) And I am not sure why the well is not covering my content. Not sure what is the problem. Hope you can help.
Any help will be appreciated!
.img-responsive {
left: 15px;
z-index: 14;
position: absolute;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript" ></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js" type="text/javascript" ></script>
<div class="container">
<div class="row">
<div class="well">
<div class="col-md-6">
<img class="img-responsive" src="https://dummyimage.com/300x200/000/fff">
</div>
<div class="col-md-6">
<p>arbitror cernantur amet multos ullamco dolore ad philosophari a ad est arbitrantur qui distinguantur illum graviterque laboris quis quorum non quid consectetur doctrina instituendarum esse sempiternum ad ad coniunctione possumus a ingeniis sint irure illum</p>
</div>
</div>
</div>
</div>
I think this little correction does the work
<div class="container">
<div class="well">
<div class="row">
<div class="col-md-6">
<img class="img-responsive" src="https://dummyimage.com/300x200/000/fff">
</div>
<div class="col-md-6">
<p>arbitror cernantur amet multos ullamco dolore ad philosophari a ad est arbitrantur qui distinguantur illum graviterque laboris quis quorum non quid consectetur doctrina instituendarum esse sempiternum ad ad coniunctione possumus a ingeniis sint irure illum</p>
</div>
</div>
</div>
</div>
and why are you using this css ?
.img-responsive {
left: 15px;
z-index: 14;
position: absolute;
}
I added some little changes as per your comment
add this to your css
<style>
.div-img-padLftZero{
padding-left:0px;
}
</style>
then make your code like this
<div class="container">
<div class="well">
<div class="row">
<div class="col-md-6 div-img-padLftZero">
<img class="img-responsive" src="https://dummyimage.com/300x200/000/fff">
</div>
<div class="col-md-6">
<p>arbitror cernantur amet multos ullamco dolore ad philosophari a ad est arbitrantur qui distinguantur illum graviterque laboris quis quorum non quid consectetur doctrina instituendarum esse sempiternum ad ad coniunctione possumus a ingeniis sint irure illum</p>
</div>
</div>
</div>
</div>
Now it is left aligned as you desired