Posts

Showing posts with the label bootstrap-4

Looking for a good floating lable implementation that works with Bootstrap

Looking for a good floating lable implementation that works with Bootstrap Does anyone know of a good floating label implementation that will work with Bootstrap on all browsers. I found one from Material Design (code below), but I would like the textbox to have a border and the placeholder to transition into something like a fieldset's legend. Any implementation that works on all browsers would be appreciated. Here is the Material Design stuff: .form-group { position: relative; margin-bottom: 1.5rem; } .form-control-placeholder { position: absolute; top: 0; padding: 7px 0 0 13px; transition: all 200ms; opacity: 0.5; } .form-control:focus + .form-control-placeholder, .form-control:valid + .form-control-placeholder { font-size: 75%; transform: translate3d(0, -100%, 0); opacity: 1; } <div class="container my-5"> <div class="row"> <div class="col-md-6 mx-auto"> <div class="form-group"...

HTML CSS based Web page

HTML CSS based Web page I want to make a web page which looks like this : Image for reference. Is there any existing theme to design a page which looks like this, if not then how should i go about creating such similar looking web page. Questions asking us to suggest, find or recommend a book, tool, software library, plug-in, tutorial, explain a technique or provide any other off-site resource are off-topic for Stack Overflow. – Andrzej Ziółek Jul 1 at 17:48 I fail to undestand why this is tagged "gtk" as you're doing web development... – liberforce Jul 2 at 8:47 1 Answer 1 ...

How to get 8 columns per row? [Javascript , Bootstrap]

Image
How to get 8 columns per row? [Javascript , Bootstrap] So i am here wrote this simple function for searching movies and manipulating them in the dom.and the problem here is when a movie name is typed the api response back with at least 20/30 recommendations.And i want the fetched data to be distributed in 8 columns per row.So i wrote this function : Javascript part : db.multisearch() .then(data=>{ var div=document.getElementById('call'); var output=''; for(let i=0;i<data.length;i++){ var poster=data[i].poster_path; var title=data[i].title; for(let j=0;j<=8;j++){ output +=`<div class="col-sm"> <div class="card mb-3"> <img class="card-img-top" src='https://image.tmdb.org/t/p/w342//${poster}' alt="Card image cap"> <div class="text-block"><p>${title}</p></div> </div> </div>`; } } div.innerHTML=output; }); HT...