I have tried everything I can thing of. And searching Google has not turned up anything.
<div class="col-md-12">
<div class="card-header text-white" style="background-color:cornflowerblue">
<div class="col">
#if (User.Identity.IsAuthenticated && User.IsInRole("Admin"))
{
<a class="text-white float-right" asp-action="Edit" asp-route-id="#item.Id"><i class="bi bi-pencil-square"></i></a>
}
</div>
<div class="col">
<p class="card-text">
<h5 class="card-title">#item.Name</h5>
</p>
</div>
<p class="text-dark">#item.Price.ToString("c")</p>
</div>
</div>
<div class="col-md-6">
Basically what I want is for the bi-pencil-square to float to the right edge of the card header. I have tried Bootstrap float right and style="Margin-Right: 0px". I have tried setting styles on the a tag, on the enclosing div, and even on the i tag. Nothing works.
Does anyone have any suggestions?
I figured it out. I think the problem was that I should have put the 2 div's inside a row tag.
<div class="col-md-12">
<div class="card-header text-white" style="background-color:cornflowerblue">
<div class="row">
<div class="col-md-1 offset-11">
#if (User.Identity.IsAuthenticated && User.IsInRole("Admin"))
{
<a class="text-white" asp-action="Edit" asp-route-id="#item.Id"><i class="bi bi-pencil-square"></i></a>
}
</div>
<div class="col card-text">
<h5 class="card-title">#item.Name</h5>
</div>
</div>
<p class="text-dark">#item.Price.ToString("c")</p>
</div>
</div>
I am a beginner at css or bootstrap.
I want to make a page that shows like below
but it can't work now
This is just for PC show
This is for mobile status but logo has to be in the center of the image.
This is my code
<a href="#" class="open_menu bg-light radius_full">
<i class="fas fa-bars lh-40"></i>
</a>
<div class="col-lg-3 logo" data-aos-duration="600" data-aos="fade-down" data-aos-delay="1200">Startup 3</div>
<i class="fas fa-times"></i>
<div class="navigation_mobile bg-dark type1">
<div class="px-40 pt-60 pb-60 inner">
<div class="logo color-white mb-30">Startup 3</div>
</div>
<div class="socials mt-40">
</div>
<div class="mt-50 f-14 light color-white op-3 copy">© 2018 Designmodo. All rights reserved.</div>
</div>
</div>
<!-- Header 1 -->
<header class="pt-195 pb-110 bg-light header_1">
<!-- Header Menu 1 -->
<nav class="header_menu_1 pt-30 pb-30 mt-30">
<div class="container px-xl-0">
<div class="row justify-content-center align-items-center f-18 medium">
<div class="col-lg-3 logo" data-aos-duration="600" data-aos="fade-down" data-aos-delay="1200">Startup 3</div>
</div>
</nav>
Please help me
Thank you
I solved it.
This is what i was searched.
https://gist.github.com/gokulkrishh/242e68d1ee94ad05f488
Hi I have this portion of my website Link here to broken portion and for some reason, the bottom of one of my sections is cut off. If I add a different margin or padding to the main class I just get white area added and the bootstrap card still can't be read. Any ideas?
Picture:
HTML Code:
<div class="main">
<div class="page-header" id="Services" style="background-image: url('./assets/img/background-grassfade.png'); background-color:#fff;">
<div class="filter"></div>
<div class="container-fluid">
<div class="motto">
<div class="row">
<div class="col-md-8 offset-md-2 text-center">
<div class="space-top"></div>
<h2 class="title">Services</h2>
</div>
<div class="container">
<div class="space-top"></div>
<div class="card" data-background="color" data-color="blue">
<div class="card-body text-center d-flex flex-column">
<div class="row">
<div class="col-md-4 align-self-center vcenter">
<div class="card-icon">
<i class="far fa-car-mechanic"></i>
</div>
</div>
<div class="col-md-8 venter">
<h4 class="card-title">Roadside Assistance</h4>
<p class="card-description">Jumpstarting, Tire changes, Fuel and fluid dilvery, Extrication/Pullout. </p>
<p class="card-footer align-self-end mt-auto">
<b>*Delivery of non-alcoholic refreshments upon request for an additional charge.</b>
</p>
</div>
</div>
</div>
</div>
<div class="card" data-background="color" data-color="green">
<div class="card-body text-center d-flex flex-column">
<div class="row">
<div class="col-md-4 align-self-center vcenter">
<div class="card-icon">
<i class="far fa-people-carry"></i>
</div>
</div>
<div class="col-md-8 venter">
<h4 class="card-title">Hauling</h4>
<p class="card-description">Including Rock, Sand, Mulch, Dirt, Feed, Hay, Plants, Trees, Firewood, Applicances, etc. Moving Services, Junk/debris cleanup, small buisness deliveries, post garage sale deliveries. </p>
<p class="card-footer align-self-end mt-auto">
<b>*Loading, transport and unloading covered.</b>
</p>
</div>
</div>
</div>
</div>
<div class="card" data-background="color" data-color="orange">
<div class="card-body text-center d-flex flex-column">
<div class="row">
<div class="col-md-4 align-self-center vcenter">
<div class="card-icon">
<i class="far fa-home"></i>
</div>
</div>
<div class="col-md-8 venter">
<h4 class="card-title">Residential Home Exterior</h4>
<p class="card-description">Including Snow removal (driveways and sidewalks only currently) , Lawn care, Tree and Bush pruning/trimming, Stump removal, Leaf removal, Gutter cleaning, yard debris and junk removal, Landscaping, Power washing (Homes, Concrete, vehicles),
Window washing, Light construction demolition, Fence demolition. </p>
</div>
</div>
</div>
</div>
<div class="card" data-background="color" data-color="brown">
<div class="card-body text-center d-flex flex-column">
<div class="row">
<div class="col-md-4 align-self-center vcenter">
<div class="card-icon">
<i class="far fa-toolbox"></i>
</div>
</div>
<div class="col-md-8 venter">
<h4 class="card-title">Residential Home Interior</h4>
<p class="card-description">Including Window washing, Batt insulation installation and removal, Drywall installation and removal, Indoor painting, Mild carpet and flooring cleanings, Maid services, Rearranging furniture, Drain cleaning, General home maintenance,
Baby proofing. </p>
</div>
</div>
</div>
</div>
<div class="card" data-background="color" data-color="yellow">
<div class="card-body text-center d-flex flex-column">
<div class="row">
<div class="col-md-4 align-self-center vcenter">
<div class="card-icon">
<i class="far fa-shopping-basket"></i>
</div>
</div>
<div class="col-md-8 venter">
<h4 class="card-title">Miscellaneous Services</h4>
<p class="card-description">Construction site clean up, Storm debris removal, Grocery pick up and delivery, vehicle hail dent repair, vehicle washing and detailing (we drive to you!), Dog walking, pet feces removal (outdoors only), Holiday lights/decoration installation.
Looking for something not on this list? Call for pricing/availability! </p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
The template is from Creative Tim: Creative Tim's Website and the CSS used is the included CSS with minimal changes and nothing that should touch any of this.
What I've tried:
Adding margin/margin-bottom to the main, container-fluid, motto and row as well as padding/padding-bottom
I have tried to change the margin-top of the section below it.
I have tried to add space using both <br /> and the provided space-top class.
I can include more of the HTML for the section below if needed. I included a link to the site currently, you should be able to use inspect element to sift around with grabbing CSS but I can include CSS if need be. I couldn't find anywhere that said I could not post a link to my page directly but if I cannot please let me know and I will remove it.
The page-header element inside paper-kit.css has a max-height:
.page-header {
max-height: 999px;
}
You content must be taller than that max-height (not sure why one would set a max-height on a div in a vertical layout but oh well). Comment it out in the web dev tools and all looks fine.
there is a max height of 999px in the class page-header, which is limiting the height remove it
Good day. Tell me please. Taught django, and took the template html, css, js. There is used bootstrap. Few adapted it for myself. He worked on a 17 '' monitor. Actually, when the 21 'monitor began to look, the blocks ran over each other. Besides, on 15'6, through the phone everything is in order. Tried to attribute in addition to col-sm as col-lg - the result did not. Tell me, please, how can I solve this problem.
It should be - https://i.stack.imgur.com/usEMI.png
How it happened - https://i.stack.imgur.com/UvUfX.png
Right-sidebar code:
<div class="col-md-9 col-lg-9">
<div class="col-md-12 col-lg-12 page-body">
<div class="row">
<div class="sub-title">
<h2>Some Notes</h2>
<i class="icon-envelope"></i>
</div>
<div class="col-md-12 col-lg-12 content-page">
<div class="col-md-12 col-lg-12 blog-post">
<div class="post-title">
<h1>джанго код</h1>
</div>
<div class="post-info">
<span>джанго код / by джанго код</span>
</div>
<p style="word-break: break-all"> джанго код</p>
<span>Read More</span>
</div>
<div class="col-md-12 col-lg-12 text-center">
Load
<div id="post-end-message"></div>
</div>
</div>
</div>
Left-sidebar code:
<div id="main">
<!-- about(left sidebar) -->
<div class ="col-md-3 col-lg-3">
<div class="about-fixed">
<div class="my-pic">
<img src="{% static 'images/pic/av-pic.png' %}" alt="av-pic">
</div>
<div class="my-detail">
<div class="white-spacing">
<h1></h1>
<span>Learning Web Development</span>
</div>
<ul class="social-icon">
<li><i class="fa fa-github"></i></li>
<li><i class="fa fa-vk"></i></li>
</ul>
</div>
P.S. Sorry for english.
I'm creating my first HTML website using Bootstrap, and I have been following this template: Freelancer - Start Bootstrap.
I've been able to customize the template to fit my needs for the most part. However, I have not been able to figure out how I can make it so that when I hover over a picture, you get the color overlay and the YouTube logo appears, and then when you click on the transparent overlay, the link opens.
With the template I'm using, there is an example of this, included below, but instead of a modal opening when you click on the overlay, I want an external URL to open. To do this, I thought I could just change the href to point to the external URL, but this doesn't seem to work. I can right click and open in a new window, but clicking on the overlay does nothing.
Image with overlay & logo:
<div class="col-md-4 col-lg-3">
<a class="portfolio-item d-block mx-auto" href="#s-sign">
<div class="portfolio-item-caption d-flex position-absolute h-100 w-100">
<div class="portfolio-item-caption-content my-auto w-100 text-center text-white">
<i class="fa fa-search-plus fa-3x"></i>
</div>
</div>
<img class="img-fluid" src="img/project/s_sign.png" alt="">
</a>
</div>
Modal that pops up when clicked on:
<div class="portfolio-modal mfp-hide" id="s-sign">
<div class="portfolio-modal-dialog bg-white">
<a class="close-button d-none d-md-block portfolio-modal-dismiss" href="#">
<i class="fa fa-3x fa-times"></i>
</a>
<div class="container text-center">
<div class="row">
<div class="col-lg-8 mx-auto">
<h2 class="text-secondary text-uppercase mb-0">Decorative Sign</h2>
<hr class="star-dark mb-5">
<img class="img-fluid mb-5" src="img/project/s_sign.png" alt="">
<p class="mb-5">The frame is made from poplar. The slats are red oak. The "S" is MDF and was cut out by hand.</p>
<a class="btn btn-primary btn-lg rounded-pill portfolio-modal-dismiss" href="#">
<i class="fa fa-close"></i>
Close Project</a>
</div>
</div>
</div>
</div>
</div>
My attempt to modify the href to point to an external URL instead of the modal section:
<div class="col-md-6 col-lg-4">
<a class="projects-item d-block mx-auto" href="https://youtu.be/qXev3N5QE9A">
<div class="projects-item-caption d-flex position-absolute h-100 w-100">
<div class="projects-item-caption-content my-auto w-100 text-center text-white">
<i class="fa fa-youtube fa-3x"></i>
</div>
</div>
<img class="img-fluid" src="img/youtube/tote.png" alt="">
</a>
</div>
I know how to make it so I can click on the image, and the URL opens, as seen below, but I want to have the overlay and logo appear when hovering.
<div class="col-md-6 col-lg-4">
<a class="nav-link external" href="https://youtu.be/zjTrW9-GrSs">
<img class="img-fluid" src="img/youtube/tote.png" alt="">
</a>
</div>
However over image to reveal overlay, can right-click to open, but cannot click to open:
This might get you started.
Within your bootstrap column, create a container div that is the approx shape of the images/overlays you wish to move one on top of the other.
Within the container div, which should be made position:relative, make two more container divs, both position:absolute (so then can sit exactly one on top of the other)
Inside each pos:abs container div go your specific image and your youTube logo/overlay.
Then you can use javascript/jquery to swap them around on hover (or mouseenter/mouseleave).
$('.myImg').mouseenter(function(){
$(this).fadeOut();
$(this).next().fadeIn();
});
$('.ytLogo').mouseleave(function(){
$(this).fadeOut();
$(this).prev().fadeIn();
});
$('.ytLogo').click(function(){
$(this).find('a').click();
});
.ytContainer{position:relative;}
.myImg{position:absolute;height:50px;width:50px;}
.ytLogo{display:none;}h
.w-100{width:100px;}
.h-100{height:100px;}
.fa{width:100px;height:100px}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<div class="col-xs-6 col-md-6 col-lg-4">
<div class="ytContainer">
<div class="myImg">
<img class="img-fluid ytImg" src="http://placeimg.com/100/100/animals" alt="">
</div>
<div class="ytLogo">
<a class="projects-item d-block mx-auto" href="https://youtu.be/qXev3N5QE9A">
<div class="projects-item-caption d-flex position-absolute h-100 w-100">
<div class="projects-item-caption-content my-auto w-100 text-center text-white">
<i class="fa fa-youtube fa-3x"></i>
</div>
</div>
</a>
</div>
</div>
</div>