Gtjkyu

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"...

Bootstrap - custom alerts with progress bar I am trying to customize the bootstrap 3.3.7 alert class in order to add a progress bar and inline items to achieve something like this ( the dotted line is just to demonstrate that items are aligned ): alert However, I have problem in fitting the progress bar at the bottom of the right part with a width of 100%. Also, I have problem to adjust the height of the left part to 100% and ajust the icon in the middle. width height I am not sure if I am using the correct css strategy, but this is what I have done so far: /* !important are just used to overide the bootstrap css in the snippet */ .alertContainer { border-radius: 0 !important; border-width: 0 !important; padding: 0 !important; height: auto !important; position: absolute !important; bottom: 15px !important; left: 0; right: 0; margin: 0 auto !important; width: 480px !important; } .leftPart { display: inline-block !important; height: 100% !important; width: 32...

Bootstrap 2.3 CSS Responsive left with a white space on the right I'm creating a website (and I'm a noob at this). I'm working on the functionality portion of design and i'll have someone do graphics later. Currently when it goes into responsive (mobile view) it leaves a 2px margin on the right that is movable on a mobile browser (and scrollable). I can't for the life of me get rid of that. if I turn on overflow-x: hidden, then it does become non scrollable but still movable. I want that extra space to go away. I don't see it defined as padding in any of the css. Using Bootstrap 2.3 I've encountered the same problem, it had something to do with the navbar. – Pier-Luc Gendreau Jun 9 '13 at 1:24 6 Answers 6 Solved by adding ...

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...