I have a bootstrap 4 card in which I want to hide the overflow of the subtitle (and show "..."). How can I achieve this? If possible with pure bootstrap code...
<div class="card-block p-1">
<p class="card-title">Test object</p>
<p class="card-subtitle text-muted">Added by Someone with a long name</p>
<p class="card-text mx-auto text-center"><span class="badge badge-pill badge-danger">€ 800</span></p>
</div>
Just use the text-truncate util class..
<div class="card">
<div class="card-block p-1">
<p class="card-title">Test object</p>
<p class="card-subtitle text-muted text-truncate">Added by Someone with a long name</p>
<p class="card-text mx-auto text-center"><span class="badge badge-pill badge-danger">€ 800</span></p>
</div>
</div>
https://www.codeply.com/go/bZufg6X1So
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 a beginner in Laravel, and was wondering if any way to confirm delete before it go to /delete/{id}?
#extends('layouts.app')
#section('content')
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-default">
<div class="panel-heading"><h2>List of Records:</h2></div>
</div>
<div class="card">
<div class="card-header">Dashboard</div>
<div class="card-body">
#if (session('status'))
<div class="alert alert-success" role="alert">
{{ session('status') }}
</div>
#endif
<p class="bg-primary">Record ID {{$record->id}}</p>
<p class="bg-success">Respond ID {{$record->col1}}</p>
<p class="bg-info">Start Date {{$record->col2}}</p>
<p class="bg-warning">End Date {{$record->col3}}</p>
<p class="bg-danger">Better Consumer Tools {{$record->col4}}</p>
<p class="bg-primary">More public education {{$record->col5}}</p>
<p class="bg-success">Strengthen energy efficiency {{$record->col6}}</p>
<p class="bg-info">Phase out inefficient stuff {{$record->col7}}</p>
<p class="bg-warning">Demand program {{$record->col8}}</p>
<p class="bg-danger">Lower business needs {{$record->col9}}</p>
<p class="bg-primary">Stronger standards {{$record->col10}}</p>
<p class="bg-success">Created at {{$record->created_at->format('d/m/y H:i')}}</p>
<p class="bg-info">Edit|Delete<p>
<button type="button">Go back to Main</button>
</div>
</div>
</div>
</div>
</div>
#endsection
if I use JavaScript functions, how could the function handle the anchor tag to href route?
use this in your anchor tag
<a onclick="return confirm('Are you sure?')" href="deleteRec/{{$record->id}}">Delete</a>
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.
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>
this might be simple, but I would like to select everything within <div class="rc-box-citations-body"> under the condition that it must belong to <div class="definitionBox" id="meaning-1-1">, thereby uniquely identifying it. How can I do that with xpath? Thanks.
<div class="definitionIndent">
<div class="definitionNumber">1.a</div>
<div class="definitionIndent">
<div class="definitionBox" id="meaning-1-1">
<span class="textmedium">
<span class="stampNoBorder">text</span>
<span class="definition">text</span>
</span>
</div>
<div class="definitionBox">
<div class="rc-box-citations">
<div class="rc-box-citations-top">
<span class="rc-citations-north-west"> </span>
<span class="rc-citations-north-east"> </span>
</div>
<div class="rc-box-citations-body"><span class="citat">text</span> <a class="sourcepop" href="javascript:void(0);"><span class="source">text</span><span class="popup">text</span></a></div>
<div class="rc-box-citations-bot">
<span class="rc-citations-south-west"> </span>
<span class="rc-citations-south-east"> </span>
</div>
</div>
</div>
</div>
</div>
If I modify your xml slightly, and take under the condition that it must belong to to mean that is a descendant of.... then this xpath works
//div[#class='definitionBox'][#id='meaning-1-2']//div[#class='rc-box-citations-body']
The XML is
<?xml version="1.0" encoding="utf-16"?>
<div class="definitionIndent">
<div class="definitionNumber">1.a</div>
<div class="definitionIndent">
<div class="definitionBox" id="meaning-1-1">
<span class="textmedium">
<span class="stampNoBorder">text</span>
<span class="definition">text</span>
</span>
</div>
<div class="definitionBox" id="meaning-1-2">
<div class="rc-box-citations">
<div class="rc-box-citations-top">
<span class="rc-citations-north-west"></span>
<span class="rc-citations-north-east"></span>
</div>
<div class="rc-box-citations-body">
<span class="citation">text</span>
<a class="sourcepop" href="javascript:void(0);">
<span class="source">text</span>
<span class="popup">text</span>
</a>
</div>
<div class="rc-box-citations-bot">
<span class="rc-citations-south-west"></span>
<span class="rc-citations-south-east"></span>
</div>
</div>
</div>
</div>
</div>
The tool I used is XPathVisualizer: