I am trying to image and its relevant data in bootstrap. For that I am writing code like below
<div class="col-xs-12 col-sm-3 col-sm-push-9">
<p style="padding:20px;"></p>
<h3 align=center>Our Lipsmacking Culinary Creations</h3>
</div>
<div class="col-xs-12 col-sm-9 col-sm-pull-3">
<div class="media">
<div class="media-left media-middle">
<a href="#">
<img class="media-object img-thumbnail" src="img/uthappizza.png" alt="Uthappiza">
</a>
<div class="media-body">
<h2 class="media-heading">Uthappizza</h2>
<p>A unique combination of Indian Uthappam (pancake) and
Italian pizza, topped with Cerignola olives, ripe vine
cherry tomatoes, Vidalia onion, Guntur chillies and
Buffalo Paneer.</p>
<p><a class="btn btn-primary btn-xs" href="#">More »</a></p>
</div>
</div>
</div>
</div>
I am getting output like this:
enter image description here
I want it to be side by side I don't know where I am going wrong.
Add pull-left to your image as a class. Bootply.
Related
<div class="col-6 col-md-4 col-lg-3 mb-4 mb-sm-5">
<div class="col-12 h-100 c-bg-offwhite p-0">
<div class="row">
<div class="col-12 text-center">
<img class="w-100" src="{{ url('/storage/photo_images/'.$image) }}" alt="">
</div>
<div class="col-12 text-left">
<p class="p color-black d-block px-4 pt-4 pb-3 mt-0 mb-0">{{$photo->title}}</h3>
</div>
#guest
<div class="col-12">
<div class="px-4 pb-4">
<a href="/contact">
<button class="w-100 btn-primary">Get a quote</button>
</a>
</div>
</div>
#endguest
</div>
</div>
#auth
<div class="col-12 p-0 mt-3">
<a href="/photos/{{$photo->slug}}/edit">
<button class="w-100 btn-primary">Edit</button>
</a>
</div>
#endauth
</div>
The code is a photo, with a title and a button for customers to click to contact the company. When an end-user is logged in it turns into an edit button, but sits underneath so not to confuse it with the customer facing button. It should be a case of one button on, one button off.
auth
guest
I'm so sorry for not really understanding your question.
But based on you question and the screenshot you provides it's already do what it shoud do.
#guest will be showing a button with 'Get A Quote' written on it and links to /contact
and #auth will be showing edit button when a user is logged in.
I am doing a small project with vue.js and laravel. I have a list of products, when I click on a specific product on "Quick view" button I want to show all data about that product in a modal but the data is not showing in the modal.
Can you help me please. Here is my code:
#extends('app')
#section('content')
<div id ="crud" class="row">
<div class="col-xs-12">
<h1 class="page-header">Lista de Articulo</h1>
</div>
<div class="wrap-icon right-section col-md-12" data-toggle="modal" data-target="#list" >
<div class="wrap-icon-section wishlist">
<a href="#" class="link-direction">
<i class="fa fa-heart" aria-hidden="true"></i>
<div class="left-info">
<span class="index">0 item</span>
<br>
<span class="title">Wishlist</span>
</div>
</a>
</div>
</div>
<div class="row">
<div v-for="keep in keeps" class="col-md-4" style="width:25%;" #mouseover="showByIndex = keep" #mouseout="showByIndex = null">
<div class="container">
<img :src="keep.foto" style="width:100%; max-width:150px;">
<button class="btn" v-show="showByIndex === keep" v-on:click.prevent="showKeep(keep)">Quick view</button>
</div>
<h3>
<b> #{{keep.nombre}}</b>
</h3>
<p> #{{keep.descripcion}}</p>
I fixed it. The error was because I called the modal file outside the div. Thanks to everybody.
you can't send data directly from vue in blade structure, you need to write a component for that.
https://v3.vuejs.org/examples/modal.html#modal-component
I'm new so I hope you can bare with me and help a newbie out.
I'm trying to apply the lightbox2 in a carousel. I want to be able to click on an image in my carousel and have that popping up in large in a lightbox. I followed all the steps (https://lokeshdhakar.com/projects/lightbox2/) but to apply the lightbox, it gives the example of using it in a a tag, but my images are inside a img tag.
I don't understand how I'm going to make it work, I've tried for hours now and I'm starting to give up. I think I'm confusing myself more than necessary.. Heres my carousel code:
<section class="page-section" id="portfolio">
<div class="container-fluid px-0">
<div class="row no-gutters">
<div class="col-md-8">
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="assets/img/portfolio/display-bw.jpg" alt="First slide"></div>
<div class="carousel-item">
<img class="d-block w-100" src="assets/img/portfolio/display-bw.jpg" alt="Second slide"></div>
<div class="carousel-item">
<img class="d-block w-100" src="assets/img/portfolio/display-bw.jpg" alt="Third slide"></div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
Thanks for your help,
Cris
I was able to get a kinda hacky solution.
You could do it like this. Replace "Image" in quotations with your image, and replace "data-lightbox" in quotations with what you want
<img id="minecraft" src="Image">
I don't think this is a good way but it works perfectly on my site. Also, I don't know if it will work on a carousel because I am also new but you can try.
The dropdown is not showing, I won’t mind any assistance on what I’m doing wrong.
<div class=“boxOptions”>
<div data-toggle=“dropdown” arial-haspopup=“true” arial-expanded=“false”>
<i class=“fas fa-ellipsis-v”></i>
</div>
<div class=“dropdown-menu”>
<a class=“dropdown-item” href=“#”>Activate</a>
<a class=“dropdown-item” href=“#”>Delete</a>
</div>
</div>
Make it like this.
<div class="boxOptions dropdown">
<div data-toggle="dropdown">
<i class='fas fa-ellipsis-v'></i>
</div>
<div class='dropdown-menu'>
<a class='dropdown-item' href='#'>Activate</a>
<a class='dropdown-item' href='#'>Delete</a>
</div>
</div>
Try this one
I want to know how I can change these static image in a clikable image to one of my web page. Thanks
<div class="section">
<div id="home-section">
<div class="home-box">
<img class="background-view" alt="École et boutique de danse orientale" src="upload/background.jpg">
<div class="slider-caption">
<div class="container">
<div class="flexslider">
<ul class="slides">
<li>
<p class="flex-caption">École / Boutique</p>
</li>
<li>
<p class="flex-caption"><span>de</span> Danse Orientale</p>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
What do you want to achieve? Like when you click on the picture you will get to another site/address?
If so, just wrap your .. with like for example in your code:
<a href="your address">
<img class="background-view" alt="École et boutique de danse orientale" src="upload/background.jpg">
</a>