I'm using a bootstrap 4 accordion and I was trying to add an icon besides the arrow up/down icon. I've tried to add a row and both icon place inside a row but still can't figure out how to make these two inline.
Here's what I have tried so far.
<div class="accordion" id="accordionExample">
<div class="card mb-3">
<div class="card-header" id="heading-1">
<h5 class="mb-0 card-header-title">
<a class="btn btn-link text-left collapsed" role="button" data-toggle="collapse" data-target="#collapse-1" aria-expanded="false" aria-controls="collapse-1">
Item 3
</a>
</h5>
</div>
<div id="collapse-1" class="collapse" data-parent="#accordionExample" aria-labelledby="heading-1">
<div class="card-body">
Description 1
</div>
</div>
</div>
</div>
CSS:
.card-header-title > a {`
display: block;
position: relative;
}
.card-header-title > a:hover {
cursor: pointer;
}
.card-header-title > a:after {
content: "\f078"; /* fa-chevron-down */
font-family: "Font Awesome 5 Free";
font-weight: 900;
position: absolute;
right: 0;
}
.card-header-title > a[aria-expanded="true"]:after {
content: "\f077"; /* fa-chevron-up */
}
Result:
And this is what I expected:
Do you mean something like this?
.card-header-title > a {
display: block;
position: relative;
}
.card-header-title > a:hover {
cursor: pointer;
}
.card-header-title i.fa-chevron-up {
display: none;
}
.card-header-title > a[aria-expanded="true"] i.fa-chevron-down {
display: none;
}
.card-header-title > a[aria-expanded="true"] i.fa-chevron-up {
display: inline;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="accordion" id="accordionExample">
<div class="card mb-3">
<div class="card-header" id="heading-1">
<h5 class="mb-0 card-header-title d-flex justify-content-between align-items-center">
<a class="btn btn-link text-left collapsed d-inline-flex justify-content-between w-100" role="button" data-toggle="collapse" data-target="#collapse-1" aria-expanded="false" aria-controls="collapse-1">
Item 3
<span class="float-right">
<i class="fa-solid fa-chevron-down"></i>
<i class="fa-solid fa-chevron-up"></i>
</span>
</a>
<span><i class="fa-solid fa-trash float-right ml-2"></i></span>
</h5>
</div>
<div id="collapse-1" class="collapse" data-parent="#accordionExample" aria-labelledby="heading-1">
<div class="card-body">
Description 1
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
Image after resize:
I use this code in my footer section. I have an image and some content side by side using media object class in bootstrap 4, but when the window is resized, the image and the content do not remain same and it creates a problem.
Here is my code:
<div class="col-lg-3 col-md-3 col-sm-6 mt-5">
<h5>Product</h5>
<div class="media">
<div class="media-left">
<a href="#"><img class="media-object"
src="./assets/Img/prod.png" alt="..."></a>
</div>
<div class="media-body">
<h6>vulputate velit consequat. </h6>
<div class="text-primary">
<i class="far fa-star"></i>
<i class="far fa-star"></i>
<i class="far fa-star"></i>
<i class="far fa-star"></i>
<i class="far fa-star"></i>
</div>
<span><s>Rs1200.00</s> Rs1000.00 </span>
</div>
</div>
</div>
Image I actually want:
Would you mind using only CSS instead of using Bootstrap? If no, then you may check out this answer. I have written the code in pure HTML and CSS:
.container {
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: #2F2F2F;
font-family: Arial;
color: white;
}
.img1 {
width: 20%;
padding-left: 10px;
float: left;
}
<!DOCTYPE html>
<html>
<head>
<title>Title of the page</title>
</head>
<body>
<div class="container">
<h2 style="padding: 10px;">Product</h2>
<img src="https://camo.githubusercontent.com/09e55b5e6a65a3ba9e38ed4de0f96ddd8ad46ba5c57b3e94d05222e0f127402a/68747470733a2f2f662e636c6f75642e6769746875622e636f6d2f6173736574732f323037383234352f3235393331332f35653833313336322d386362612d313165322d383435332d6536626439353663383961342e706e67"
class="img1">
<p>vulputate velit consequat</p>
<h3>⭐⭐⭐⭐⭐</h3>
<span><s>Rs 1200</s> Rs 1000</span>
</div>
</body>
</html>
How to put a awesome icon font inside the bootstrap input type text aligned at left and with some margin-right relative to the placeholder text using bootstrap? Im doing like this: https://jsfiddle.net/tbeay2vd/1/ and using the bootstrap class "input-group-addon" it works but I would like to have a input text like:
Do you know how to do that using bootstrap?
Html:
<div class="container">
<div class="row justify-content-center">
<div class="col col-md-7">
<div class="input-group">
<div class="input-group-addon"><i class="fa fa-search"></i></div>
<input type="text" class="form-control" id="inlineFormInputGroup" placeholder="Search...">
</div>
<!-- How to do this input text below using bootstrap ? -->
<div class="example">
<i class="fa fa-search"></i> Search..
</div>
</div>
</div>
</div>
Try this:
$('input').on('focus', function () {
$(this).parent().addClass('active');
});
.example {
margin-top:30px;
border:1px solid gray;
border-radius:4px;
padding:15px;
}
.example >i {
margin-right:10px;
}
.search-input {
border: none;
width: 90%;
}
.search-input:focus{
outline: none;
}
.example.active {
border-color: #80bdff;
}
.search-box .input-group-addon {
background: none;
}
.search-box input {
border-left: none;
}
.search-box.active .input-group-addon {
border-color: #80bdff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row justify-content-center">
<div class="col col-md-7">
<div class="input-group search-box">
<div class="input-group-addon"><i class="fa fa-search"></i></div>
<input type="text" class="form-control" id="inlineFormInputGroup" placeholder="Search...">
</div>
<!-- Hpw to do this layout using bootstrap ? -->
<div class="example">
<i class="fa fa-search"></i>
<input type="text" class="search-input" id="inlineFormInputGroup" placeholder="Search...">
</div>
</div>
</div>
</div>
.input-group >.fa{
position: absolute;
z-index: 10;
top: 37%;
left: 20px;
}
.input-group .form-control{
padding-left: 40px;
height: 60px;
border: black solid 1px;
position: relative;
border-radius: 5px!important;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row justify-content-center">
<div class="col col-md-7">
<div class="input-group">
<i class="fa fa-search"></i>
<input type="text" class="form-control" id="inlineFormInputGroup" placeholder="Search...">
</div>
</div>
</div>
</div>
I am creating a web page layout using bootstrap and the backend is Laravel, the web page is partitioned into various divs which work fine on various screen devices but when I upload the project on a live server and view the page on mobile part of the service and contact section is hidden behind a white background, I find it hard to figure out the problem in CSS code,,,please assist?
Code
#font-face {
font-family: 'Pacifico';
font-style: normal;
font-weight: 400;
src: local('Pacifico Regular'), local('Pacifico-Regular'), url("../fonts/pacifico.woff") format('woff');
}
html,
body {
margin: 0;
padding: 0;
}
img,
object,
embed,
video {
max-width: 100%;
height: auto;
}
/*Service section*/
.service-heading {
font-size: 22px;
}
#service {
background: url(../img/bg/number1.gif) repeat center center fixed;
color: #ffffff;
display: block;
}
#service h3,
p {
color: #ffffff;
}
#service .block-heading h1 {
color: #fff;
font-family: 'Milonga', cursive;
font-weight: 400;
font-size: 55px;
word-spacing: 5px;
}
/*Contact section*/
#contact {
background: url(../img/bg/contact-bg.jpg) no-repeat center center fixed;
background-size: cover;
color: #fff;
}
#contact .block-heading h1 {
color: #fff;
font-family: 'Milonga', cursive;
font-weight: 400;
font-size: 55px;
}
.overlay-3 {
padding: 60px 0;
/* background-color: rgba(9, 20, 39, 0.83); */
/* background-color: rgba(24, 77, 77, 0.93); */
background-color: rgba(33, 103, 88, 0.9);
}
.contact-info {
padding: 16px 62px;
text-align: left;
font-size: 18px;
line-height: 36px;
margin-top: 25px;
}
. .contact-info i {
width: 40px;
height: 40px;
color: white;
padding-top: 7px;
font-size: 25px;
border: 1px solid #fff;
text-align: center;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
}
.contact-info p {
padding: 27px 10px;
}
.contact-info span {
padding-left: 20px;
}
input[type="text"],
input[type="email"],
textarea {
display: block;
margin: 0 auto;
width: 100%;
background: transparent;
border: 1px solid #fff;
padding: 12px 15px;
margin-bottom: 30px;
}
input[type="submit"] {
background: transparent;
border: 1px solid #fff;
width: 100%;
padding: 10px;
transition: 0.5s background linear;
font-weight: bold;
}
input[type="submit"]:hover {
background: #fff;
border-color: #fff;
transition: 0.5s background linear;
color: #333;
}
::-webkit-input-placeholder {
color: #fff;
}
::-moz-placeholder {
/* Firefox 19+ */
color: #fff;
}
:-ms-input-placeholder {
color: #fff;
}
#media only screen and (min-width: 321px) and (max-width: 480px) {
#service {
display: inline-block;
height: 100%;
width: 100%;
padding-bottom: 20px;
background: blue;
}
.overlay-3 {
background: none;
padding: 0;
}
#contact {
display: inline-block;
height: 100%;
width: 100%;
}
}
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta http-equiv=X-UA-Compatible content="IE=edge">
<meta name=viewport content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=3.0">
<meta name="HandheldFriendly" content="true">
<link rel="icon" type="image/x-icon" href="img/favicon.ico"> >
<link href="{{ asset('css/bootstrap/css/bootstrap.min.css') }}" rel="stylesheet" type="text/css">
<link href="{{ asset('css/bootstrap/css/font-awesome.min.css') }}" rel="stylesheet" type="text/css">
<!-- google font -->
<link href='http://fonts.googleapis.com/css?family=Oswald:300,400' rel='stylesheet'>
</head>
<body>
<!-- Service Section -->
<div class="content-block" id="service">
<br><br>
<header class="block-heading cleafix text-center">
<h1> Services</h1>
<!-- <p>Lorem Ipsum Text</p> -->
</header>
<div class="container-fluid">
<div class="row">
<div class="col-lg-12 text-center">
<h3 class="section-subheading text-muted"> Welcome </h3>
</div>
</div>
<div class="row text-center">
<div class="col-md-4">
<span class="fa-stack fa-4x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-laptop fa-stack-1x fa-inverse"></i>
</span>
<h4 class="service-heading"> School Of Arts</h4>
<p>...............</p>
</div>
<div class="col-md-4">
<span class="fa-stack fa-4x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-shopping-cart fa-stack-1x fa-inverse"></i>
</span>
<h4 class="service-heading">School of Business </h4>
<p> ........... </p>
</div>
<div class="col-md-4">
<span class="fa-stack fa-4x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-code fa-stack-1x fa-inverse"></i>
</span>
<h4 class="service-heading"> School of Engineering </h4>
<p> ........ </p>
</div>
</div>
<div class="row text-center">
<div class="col-md-4">
<span class="fa-stack fa-4x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-wordpress fa-stack-1x fa-inverse"></i>
</span>
<h4 class="service-heading"> School of Human Resource</h4>
<p> ........ </p>
</div>
<div class="col-md-4">
<span class="fa-stack fa-4x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-pencil fa-stack-1x fa-inverse"></i>
</span>
<h4 class="service-heading"> School of Medicine </h4>
<p> ........ .......</p>
</div>
<div class="col-md-4">
<span class="fa-stack fa-4x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-thumbs-up fa-stack-1x fa-inverse"></i>
</span>
<h4 class="service-heading"> School of Biological Sciences </h4>
<p> .......... </p>
</div>
</div>
</div>
</div>
<!-- END SERVICE SECTION-->
<!-- Contact Form Section-->
<div class="content-block" id="contact">
<div class="overlay-3">
<header class="block-heading cleafix text-center">
<h1>Contact</h1>
<!-- <p>Feel Free to Contact</p> -->
</header>
<div class="block-content text-center">
<div class="container-fluid">
<div class="row">
<!-- Form Section -->
<div class="col-sm-4 wow animated fadeInLeft">
{!! Form::open(array('route' => 'index.post', 'method' => 'POST','class' => 'contact-form')) !!} {{ Form::text('name', null, array( 'placeholder' => 'Name...', 'class' => 'input', 'required' => ''))}} {{ Form::email('email', null, array('placeholder'
=> 'Email Address...','class' => 'input', 'required' => ''))}} {{ Form::textarea('message', null, array('placeholder' => 'Message...', 'class' => '', 'required' => 'input')) }} {{ Form::submit('Submit') }} {!! Form::close() !!}
</div>
<!-- Adress -->
<div class="col-sm-4 wow animated fadeInRight">
<div class="row">
<div class="col-sm-12">
<div class="contact-info">
<div class="clearfix">
<div class="rotated-icon">
<div class="sqaure-nebir"></div>
<i class="fa fa-map-marker"></i>
</div>
<p><strong> 3069 Nkr</strong> </p>
</div>
<div class="tel clearfix">
<div class="rotated-icon">
<div class="sqaure-nebir"></div>
<i class="fa fa-mobile"></i>
</div>
<p>
<strong> <a class="tell" href="tel:+256123456" rel="nofollow"> +256 123456 </a> </strong>
<br>
<strong> <a class="tell" href="tel:+256547890" rel="nofollow"> +254 756789098</a> </strong>
</p>
</div>
<div class="clearfix">
<div class="rotated-icon">
<div class="sqaure-nebir"></div>
<i class="fa fa-envelope-o"></i>
</div>
<p>
<strong> info#tcol.com </strong>
</p>
</div>
</div>
</div>
</div>
<div class="row">
<ul class="social-box">
<li>
<a class="facebook-icon" href="https://www.facebook.com/pwebkenya" target="_blank"> <i class="fa fa-facebook"></i></a>
</li>
<li>
<a class="twitter-icon" href="https://twitter.com/pwebkenya" target="_blank"> <i class="fa fa-twitter"></i></a>
</li>
<li><a class="g-plus-icon" href="https://github.com/patwan"><i class="fa fa-github"></i></a></li>
<li> <a class="linkedin-icon" href="#"><i class="fa fa-linkedin"></i></a></li>
</ul>
</div>
</div>
<!-- photo -->
<div class="col-sm-4">
<br> <br>
<div class="team-member">
<img src="img/7.jpg" class="img-responsive img-circle" alt="">
<h4> Steve Johns</h4>
<p class="text-muted"> Web Developer/Graphics Designer</p>
</div>
</div>
<!-- END PHOTO-->
</div>
</div>
</div>
<!-- block-content -->
</div>
<!-- overlay-3 -->
</div>
<!-- content-block -->
</body>
</html>
There is a typo in your HTML in the 'contact' section:
<header class="block-heading cleafix text-center">``
Therefore, the floats are not cleared on this element. Don't know if it fixes the entire problem though.
I have one media query that kicks in without the width specified as a condition being met, even at 375px the media query takes over from the base CSS. The media query should take over from 660px. Here is my index.html page:
<!DOCTYPE html>
<html>
<head>
<title>Thames Accountants</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"> </script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="header-bg">
<header>
<button id="toggleButton" class="c-hamburger c-hamburger--rot">
<span>toggle menu</span>
</button>
<h1 class="logo">Thames Accountants</h1>
</header>
<p class="clear"></p>
<div class="ta-menu">
<nav>
<ul>
<li>Our Services</li>
<li>About Us</li>
<li>Blog</li>
<li>Contact Us</li>
</ul>
</nav>
</div> <!-- end ta-menu div -->
<div class="intro">
<p>Personalised Accounting</p>
<button type="button" class="btn btn-info ta-button">Get In Touch</button>
<div><span class="glyphicon glyphicon-chevron-down ta-icon"></span></div>
</div>
</div> <!-- end header-bg div -->
<div class="container">
<a name="services"></a>
<div id="services" class="services">
<h2 class="services-title">Accountancy Services</h2>
<p class="bullet-points">Annual Accounts <span class="glyphicon glyphicon-ok"></span></p>
<p class="bullet-points">Book-Keeping <span class="glyphicon glyphicon-ok"></p>
<p class="bullet-points">Company Secretarial <span class="glyphicon glyphicon-ok"></p>
<p class="bullet-points">Management Accounts <span class="glyphicon glyphicon-ok"></p>
</div>
<div class="services">
<h2 class="services-title">Added Value Services</h2>
<p class="bullet-points">Business Valuations <span class="glyphicon glyphicon-ok"></span></p>
<p class="bullet-points">Business Plans <span class="glyphicon glyphicon-ok"></p>
<p class="bullet-points">Management Systems <span class="glyphicon glyphicon-ok"></p>
<p class="bullet-points">Strategic Planning <span class="glyphicon glyphicon-ok"></p>
</div>
<div class="services">
<h2 class="services-title">Start-up Services</h2>
<p class="bullet-points">Ready made company <span class="glyphicon glyphicon-ok"></span></p>
<p class="bullet-points">Limited Liability Partnership <span class="glyphicon glyphicon-ok"></p>
<p class="bullet-points">PLC formation <span class="glyphicon glyphicon-ok"></p>
</div>
<div class="services">
<h2 class="services-title">Taxation Services</h2>
<p class="bullet-points">Contractors and IR35 <span class="glyphicon glyphicon-ok"></span></p>
<p class="bullet-points">Payroll, PAYE Returns and RTI <span class="glyphicon glyphicon-ok"></p>
<p class="bullet-points">VAT <span class="glyphicon glyphicon-ok"></p>
</div> <!-- end services div -->
</div> <!-- end container div -->
<div class="testimonials">
<h1 class="testimonial-title">Testimonials</h1>
<div class="ta-container">
<blockquote><p class="ta-review">Thames Accountants changes lives. Thanks for NOT being another overpaid below average bookkeeper but a true personalised accounting department for our company. - S. Johnson</p></blockquote>
<blockquote><p class="ta-review">Thames Accountants changes lives. Thanks for NOT being another overpaid below average bookkeeper but a true personalised accounting department for our company. - S. Johnson</p></blockquote>
<blockquote><p class="ta-review">Thames Accountants changes lives. Thanks for NOT being another overpaid below average bookkeeper but a true personalised accounting department for our company. - S. Johnson</p></blockquote>
</div>
</div>
<footer>
<div class="row ta-row">
<div class="col-md-4 ta-about">
<h4>About TA</h4>
<p>We are an experienced accounting agency based in South East, London, UK. We work closely with our clients and act for a broad range of business and personal clients.</p>
</div>
<div class="col-md-4 ta-social">
<h4>Social</h4>
<i class="fa fa-twitter"></i>
<i class="fa fa-facebook"></i>
<i class="fa fa-google-plus"></i>
<i class="fa fa-linkedin"></i>
</div>
<div class="col-md-4 ta-pages">
<h4>Menu</h4>
<ul>
<li>Our Services</li>
<li>About Us</li>
<li>Blog</li>
<li>Contact Us</li>
</ul>
</div>
</div> <!-- end row div -->
<div class="row ta-policies">
<div class="ta-center">
<div class="col-md-12">
<ul>
<li>Privacy Policy</li>
<li>Site terms</li>
</ul>
</div>
</div>
</div>
</footer>
<script type="text/javascript" src="js/app.js"></script>
</body>
</html>
And this is my CSS media query
Media queries for wider screens
**********************************/
#media (min-width: 660px) {
/*Parallax image for home page*/
.header-bg {
background: radial-gradient(#252625, transparent 150%), url('./img/tower-bridge.jpg');
background-attachment: fixed;
background-size: cover;
background-position: center center;
height: 600px;
width: 100%;
}
.logo {
font-size: 2em;
margin: 3% 0 0 5%;
text-align: left;
}
.intro p {
font-size: 1.5em;
margin-top: 10%;
}
.ta-button {
font-size: 0.6em;
padding: 5px;
border-radius: 5px;
}
.services-title {
font-size: 1.5em;
}
.ta-menu {
font-size: 1.5em;
}
.testimonial-title {
font-size: 1.75em;
}
blockquote {
font-size: 1.2em;
border-left: 3px solid #fff;
}
.services p {
font-size: 1em;
}
.ta-icon {
margin-top: 0;
}
.c-hamburger {
display: none;
}
.intro p {
margin-top: 0;
font-size: 1.2em;
border: none;
}
}/*End media query # 460 px*/