I'm trying to add the image unikafront.jpg on the right-hand side of the page. For some reason, the image is not displayed. Please note this section used to have a contact form which I removed to make space for the image. This is the bootstrap theme being used: http://authenticgoods.co/wrapbootstrap/themes/sparks/
<!-- contact section begins -->
<section id="contact-section">
<div class="container contact-section">
<div class="row">
<div class="col-md-offset-1 col-md-4 col-xs-12 contact-info">
<h3>Contact Info</h3>
<p><i class="fa fa-map-marker"></i> 101 some street </p>
<p><i class="glyphicon glyphicon-time"></i> Monday - Friday 9AM - 7PM PST</p>
<p><i class="fa fa-envelope-o"></i> info#domain.com</p>
<p><i class="fa fa-external-link"></i> www.domain.com</p>
<h3>We love what we do and we’d love to talk with you about how we can help you grow your business!</h3>
<div class="social-icons">
Privacy Policy<br>
Terms of Use<br>
Disclaimers<br>
Compensation Disclosure<br>
</div>
</div>
<div class="col-md-offset-1 col-md-5 col-xs-12">
<img src="images/unikafront.jpg alt="" />
</div>
</div><!-- End row -->
</div>
Please close the src="" attribute like
<img src="images/unikafront.jpg" alt="" />
As i test it with the firebug tool with your relevant theme "sparks".
when i placed the image tag like
<img src="http://lorempixel.com/300/300/" alt="" />
it display the image without any problem. Kindly cross check that you are referring the correct path for the image in your src attribute.
Related
I am newbie with bootstrap 5 and here is my problem.
As you can see in this picture
In my page, at the top, the google icon and all the texts are at the left side, and in the picture, the texts and the google picture are at the left side too.
I want to change the position of the google icon, the "Home, About ..." texts, all the text "I am dreaming ..." and the Google picture to the right side a little bit. And change the "I am dreaming ..." up a little bit.
Here is my code
https://github.com/nguyencuc2586/project2.3
Could you please give me some advices ? Thank you very much for your time.
I added just <div> with class="text-center" for image
<div class="container ">
<div class="row">
<div class="col-lg-6 text-center ">
<h1 class="display pt-5">
I am dreaming
</h1>
<p class="lead">
Still dreaming
</p>
<a href="#" class="btn btn-outline-secondary btn-lg text-white">
<i class="fas fa-arrow-right"></i> read more
</a>
</div>
<div class="col-lg-6 ">
<div class="text-center">
<img src="img/ggbook.jpeg" alt="" class="img-fluid ">
</div>
</div>
</div>
</div>
Outupt
I am developing a website using a bought template. Everything seems to be perfect. However, I have an issue with a section of the html code where it works fine in normal screen sizes but in extra wide screen size, the div size is reduced to a strip. The images below demonstrate this:
This is how the div is in normal screens
And when the screen is extra wide, for example in devices with more than 15" screen, this is how the div looks like:
My main challenge however is that I really don't know which property is controlling this from the css file. I tried inspecting the code from chrome and the most consistent property is the box-sizing property and the value is set to inherit. Let me share the html code for this section of the div for further clarity.
<section class="gray pt-5 pb-0">
<div class="container">
<div class="row">
<div class="col text-center">
<div class="sec-heading mx-auto">
<h2>What People say About Us</h2>
<p>Vukaplus has transformed many businesses and has moved many forward socially and financially.</p>
</div>
</div>
</div>
<div class="row m-0">
<div class="owl-carousel" id="testimonials">
<!-- Single Testimonials -->
<div class="item">
<div class="testimonial-box">
<i class="fa fa-quote-left"></i>
<p>Vukaplus helped us sell our house with minimal effort. Their team was efficient and always there to help!</p>
<div class="client-thumb-box">
<div class="client-thumb-content">
<div class="client-thumb">
<img src="{% static 'base/assets/img/testimonials_property.jpeg' %}" class="img-responsive img-circle" alt="">
</div>
<h5 class="mb-0">Brian Inchedi</h5>
<span class="small-font">Real Estate Agent</span>
</div>
</div>
</div>
</div>
<!-- Single Testimonials -->
<div class="item">
<div class="testimonial-box">
<i class="fa fa-quote-left"></i>
<p>Vukaplus has provided a platform to showcase our daycare business. After listing the business on the platform, we have never stopped receiving new clients!</p>
<div class="client-thumb-box">
<div class="client-thumb-content">
<div class="client-thumb">
<img src="{% static 'base/assets/img/testimonials_business.jpeg' %}" class="img-responsive img-circle" alt="">
</div>
<h5 class="mb-0">Irene Wambui</h5>
<span class="small-font">Happy Baby Day Care</span>
</div>
</div>
</div>
</div>
<!-- Single Testimonials -->
<div class="item">
<div class="testimonial-box">
<i class="fa fa-quote-left"></i>
<p>My car couldn't sell in a yard for 3 months. The day I listed it on Vukaplus, I received a customer instantly with a better offer than I wanted.</p>
<div class="client-thumb-box">
<div class="client-thumb-content">
<div class="client-thumb">
<img src="{% static 'base/assets/img/testimonials_vehicle.jpeg' %}" class="img-responsive img-circle" alt="">
</div>
<h5 class="mb-0">Teddy Kimani</h5>
<span class="small-font">Car Sales Person</span>
</div>
</div>
</div>
</div>
<!-- Single Testimonials -->
<div class="item">
<div class="testimonial-box">
<i class="fa fa-quote-left"></i>
<p>My client wanted a potential candidate for a vacancy he had in his company. A single post on Vukaplus gave me overwhelming applications and I got the right candidate.</p>
<div class="client-thumb-box">
<div class="client-thumb-content">
<div class="client-thumb">
<img src="{% static 'base/assets/img/testimonials_recruitment.jpeg' %}" class="img-responsive img-circle" alt="">
</div>
<h5 class="mb-0">Margaret Wada</h5>
<span class="small-font">Recruiting Agent</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
Kindly advise as I am not that good in frontend. The css file is too big to share the code here, but I can get snipets of the sections that are used by the html section. Thank you.
Edit: Adding CSS COde Snippet
So, I have copied the code to JSFiddle and here is the link:
Code snippets on JSFiddle
You can try to specify:
min-width: someValue
and the element won't be smaller than this value;
i want to show 3 tiles in a one row. 3 tiles should come in one row in the mobile view also.now im able to see only 3 tiles in one row but in mobile its showing two tiles in a row. how to make 3 tiles should cover complete row and same 3 tiles i need to show mobile also .im using adminlte theme for the design
code pen
https://codepen.io/krishnakernel/pen/VQQyaV
<div class="row">
<div class="col-lg-3 col-xs-6">
<!-- small box -->
<div class="small-box bg-green">
<div class="inner">
<h3>64 ℃<sup style="font-size: 20px"></sup></h3>
<p><span>Oil Temperature</span></p>
</div>
<div class="icon">
<i class="fa fa-thermometer-3"></i>
</div>
<a href="#" class="small-box-footer">
More info <i class="fa fa-arrow-circle-right"></i>
</a>
</div>
</div>
<div class="col-lg-3 col-xs-6">
<!-- small box -->
<div class="small-box bg-yellow">
<div class="inner">
<h3>88<span style="font-size:30px">Amp</span></h3>
<p>R Current </p>
</div>
<div class="icon">
<i class="fa fa-flash"></i>
</div>
<a href="" class="small-box-footer">
More info <i class="fa fa-arrow-circle-right"></i>
</a>
</div>
</div>
<div class="col-lg-3 col-xs-6">
<!-- small box -->
<div class="small-box bg-red">
<div class="inner">
<h3>233 <span style="font-size:20px">⚡</span> </h3>
<p>R Voltage in kva</p>
</div>
<div class="icon">
<i class="fa fa-bolt"></i>
</div>
<a href="#" class="small-box-footer">
More info <i class="fa fa-arrow-circle-right"></i>
</a>
</div>
</div>
</div>
You didnt close the div properly
Change <div class="col-lg-3 col-xs-4">
Try changing the classes to col-xs-4 for all the elements you want to have displayed in a row.
In bootstrap, the grid summ need to be equal 12. Then if you want the xs to be a row, you need to change to col-xs-4 because you only have 3 div.
Check more info here: https://www.w3schools.com/bootstrap/bootstrap_grid_system.asp
If you want your layout to always be three columns use the xs breakpoint. The different breakpoints are designed to change the layout based on screen size.
This question already has an answer here:
Bootstrap 3 - Aligning column height
(1 answer)
Closed 6 years ago.
Beginner here, I am building a one page bootstrap site, I have divided the site into sections, i have already added 1st image as the background in section one.
I have tried using the columns but no vial.
I cant get the two images side by side like shown in the prototype (http://imgur.com/a/MJQ2w).
I want the page layout to be like this with no margins but i am unable to do this with bootstrap. Please help me with your expertise.
<header style="background-image: url('static/assets/home-bg.jpg');">
<div class="intro-content">
<div class="brand-name">Learning & Experience</div>
<hr class="colored">
<div class="brand-name-subtext">Lorem Ipsum Dolor Init
</div>
</div>
<div class="scroll-down">
<a class="btn page-scroll" href="#about"><i class="fa fa-angle-down fa-fw"></i></a>
</div>
</header>
<section id="about">
<div class="container-fluid">
<div class="row row-no-gutter">
<div class="col-md-6 img-responsive">
<img src="static/assets/training.png">
</div>
<div class="col-md-6 img-responsive">
<img src="static/assets/recruit.png" >
</div>
</div>
</div>
<div>
Check my example here, Without removes any padding provide by bootstrap
HTML
<section class="values">
<div class="col-md-4 box text-white box blues">
<div class="box-home">
<h4>our values</h4>
<p>At MOCAZ PRIME, with the expertise of experienced traders, we join in giving the best advice and knowledge to individuals to ensure their financial goals can be achieved in any market conditions.</p>
<div class="icon-text">
<p>01.</p>
</div>
</div>
</div>
<div class="col-md-4 text-white box bg-city blacks">
<div class="box-home">
<h4>our philipsophy</h4>
<p>It is our ambition to keep up challenges of a dynamic and changing market. Consequently it is necessary to flexibly bring new techniques which meet the needs of our customers. This all predetermines us to achieve a leading position in the global financial advisory services.</p>
<div class="icon-text">
<p>02.</p>
</div>
</div>
</div>
<div class="col-md-4 text-white box blacks">
<div class="box-home">
<h4>our mission</h4>
<p>Our mission is to facilitate a world-class foreign exchange, metal and contracts for difference trading environment. We're dedicated to providing industry-leading technology to the international trading community and we strive to deliver educational tools and resources that enable traders to further develop their trading skills.</p>
<div class="icon-text">
<p>03.</p>
</div>
</div>
</div>
</section>
DEMO
Replace your code
<div class="col-md-6 img-responsive">
<img src="static/assets/training.png">
</div>
<div class="col-md-6 img-responsive">
<img src="static/assets/recruit.png" >
</div>
With following line of code
<div class="col-md-6">
<img src="static/assets/training.png" class=" img-responsive" />
</div>
<div class="col-md-6">
<img src="static/assets/recruit.png" class=" img-responsive" />
</div>
Fixed the issue, Thanks guys.
<section id="about">
<div class="container-fluid">
<div class="row" id="port2-second-row">
<div class="col-xs-6 imgcont" id="port2-first-col">
<img src="static/assets/training.png" alt="training" />
</div> <!-- end col-sm-6 -->
<div class="col-xs-6 imgcont" id="port2-second-col">
<img src="static/assets/recruit.png" alt="recruit" />
</div> <!-- end col-sm-6 -->
</div> <!-- end port-second-row -->
CSS :
img {
width: 100%;
height: 100%;}
.imgcont {
padding: 0px;
I am working on a layout using bootstrap 4 alpha (really like the cards feature btw).
So, I have this area within the layout where I want the phone and email info to be placed on the same line. I'm no css guru and know barely enough to be dangerous. So, I'm unsure how to achieve the effect I'm after and do so correctly. Any tips or advice is greatly appreciated.
Here is the code I currently have:
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object" src="img/avatars/adelle.jpg" alt="Generic placeholder image">
</a>
</div>
<div class="media-body">
<span class="favorite"><i class="fa fa-star"></i></span>
<h6 class="media-heading">Jacqueline Perry</h6>
<span class="company">Domino Technologies</span>
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-8">
<ul class="details">
<li class="phone"><i class="fa fa-mobile fa-lg fa-lg"></i> (123) 786-4533 </li>
<li class="email"><i class="fa fa-paper-plane-o"></i> jacqueline.perry#smithcorporation.com</li>
<li class="address"><i class="fa fa-map-marker"></i> 338 West 23rd Street New York, NY 10011, USA </li>
</ul>
</div>
</div> <!-- ./row -->
</div>
</div>
What I'm trying to achieve is this (see image below)
http://jsfiddle.net/hamzanisar/d1mdm2tk/3
Maybe this will work for you. Just re-size the view port and it will be one line for responsive you can adjust as you want. I'm using row and col-*-* because with row and col-*-* its possible otherwise you need to make custom css