I am creating a website using bootstrap3. I used an image as a background to a div but the image is not being displayed in correct ratio. The image being visible is displaying only a portion of it.
My code and css is as under:
<div class="jumbotron">
<div class="container">
<div class="col-md-12">
<div class="col-md-4">
<div id="show_div" class="dropdown">Menu
<span class="caret"></span>
<div id="hello" style="visibility:hidden;" >
<ul class="dropdown-menu" style="display:block!important;" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Our Services</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">About Us</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Contact Us</a></li>
</ul>
</div>
</div>
</div>
<div class="col-md-4">
<p class="text-center"><a role="button" href="#" class="btn btn-default">Sign Up</a></p>
</div>
<div class="col-md-4">
<p class="text-right"><a role="button" href="#" >Sign Up</a></p>
</div>
</div>
<div class="col-md-12 clear-fix"> </div>
<div class="cover-container">
<div class="inner cover">
<h2 class="cover-heading">hello</h1>
<p class="lead">
<a class="btn btn-lg btn-default" href="#">Login</a>
</p>
</div>
</div>
<div class="col-md-12 clear-fix"> </div>
<div class="col-md-12 botomopdv">
<div class="col-md-4 ">
<div class="text-center textwrap">+91-9898976766</div>
</div>
<div class="col-md-4 ">
<div class="text-center textwrap"><img src="images/visa.png"></div>
</div>
<div class="col-md-4 ">
<div class="text-center textwrap">
<i class="fa fa-youtube fsz fa-inverse"></i>
<i class="fa fa-twitter-square fsz fa-inverse"></i>
<i class="fa fa-facebook-square fsz fa-inverse"></i>
<i class="fa fa-linkedin-square fsz fa-inverse"></i>
</div>
</div>
</div>
</div>
</div>
My css is like this:
.jumbotron{
background-image:url('../images/slide.png');
padding-bottom:1px!important;
}
If i understand your problem correctly, try adding background-size:cover:
.jumbotron{
background-image:url('../images/slide.png');
padding-bottom:1px!important;
background-size:cover; /**** add this line ****/
}
all your code is correct but you can experiment with background-size: 100% 100%; or background-size: cover;
Related
I have a side navbar and I'm trying to make it active according to page click.
This is my sidenav.nav which is a component.
<template>
<aside class="col-md-3">
<nav class="list-group">
<a href="/" class="list-group-item" exact>
Account overview
</a>
<a class="list-group-item" href="/profile/address"> My Address </a>
<a class="list-group-item" href="/profile/orders"> My Orders </a>
<a class="list-group-item" href="/profile/wishlist"> My wishlist </a>
<a class="list-group-item" href="/profile/settings"> Settings </a>
<a class="list-group-item" href=""> Log out </a>
</nav>
</aside>
</template>
Below is my code for address page, other pages are similar to this.
<template>
<section class="section-content padding-y">
<div class="container">
<div class="row">
<sidenav />
<!-- col.// -->
<main class="col-md-9">
<a href="#" class="btn btn-light mb-3">
<i class="fa fa-plus"></i> Add new address
</a>
<div class="row">
<div class="col-md-6">
<article class="box mb-4">
<h6>London, United Kingdom</h6>
<p>
Building: Nestone <br />
Floor: 22, Aprt: 12
</p>
<a href="#" class="btn btn-light disabled">
<i class="fa fa-check"></i> Default</a
>
<a href="#" class="btn btn-light">
<i class="fa fa-pen"></i>
</a>
<a href="#" class="btn btn-light">
<i class="text-danger fa fa-trash"></i>
</a>
</article>
</div>
<!-- col.// -->
<div class="col-md-6">
<article class="box mb-4">
<h6>Tashkent, Uzbekistan</h6>
<p>
Building one <br />
Floor: 2, Aprt: 32
</p>
Make default
<a href="#" class="btn btn-light">
<i class="fa fa-pen"></i>
</a>
<a href="#" class="btn btn-light">
<i class="text-danger fa fa-trash"></i>
</a>
</article>
</div>
<!-- col.// -->
<div class="col-md-6">
<article class="box mb-4">
<h6>Moscow, Russia</h6>
<p>
Lenin street <br />
Building A, Floor: 3, Aprt: 32
</p>
Make default
<a href="#" class="btn btn-light">
<i class="fa fa-pen"></i>
</a>
<a href="#" class="btn btn-light">
<i class="text-danger fa fa-trash"></i>
</a>
</article>
</div>
<!-- col.// -->
</div>
<!-- row.// -->
</main>
</div>
</div>
</section>
</template>
<script>
import sidenav from "~/components/profile-sidenav";
export default {
components: {
sidenav,
},
};
</script>
I have set account overview as the active page, when i go to address page i need 'My address' tab to be active. How do i do that? I tried but that didn't work.
Instead of using <a> tags, use <nuxt-link>. Then, in your css, style the .nuxt-link-exact-active class— for example:
.nuxt-link-exact-active {
font-weight: bold;
}
Now if you have <nuxt-link to=“/address”>My Address</nuxt-link> and the user is on the /address page, the class is added to the nuxt-link element.
I'm having trouble having my footer cover the whole page. it's fine on an extra large screen but when I test it on lg,md,sm, there is a margin on the right side that scrolls to the right. It extends the width of the screen larger than the size of the screen (viewport?). Here is some code I have.
<footer class="footer text-center" style="height:420px; margin-top:220px">
<div class="container">
<h1 class="text-secondary col-lg text-center col-md offset-md-1" style="margin-bottom:5%">Contact</h1>
<div class="row" style="height:200px; margin-top:-2%">
<div class="col-md-4 mb-5 col-lg-4 col-md" style="">
<h4 class="text-uppercase mb-4 text-secondary"><u>Get in touch</u></h4>
<div class="col-lg col-md" style="">
<p class="footer-contact text-primary text-left"><i class="fa fa-home"></i> 9416 Barry dr, Romulus, MI</p>
<p class="footer-contact text-primary text-left"><i class="fa fa-phone"></i> 703-517-0030</p>
<p class="footer-contact text-primary text-left"><i class="fa fa-envelope"></i> hellochrisyou#gmail.com</p>
</div>
</div>
<div class="col-lg-4 col-md-3 offset-md-2" style="background-color:#ffffff; margin-left:0.5%">
<h4 class="text-uppercase col-lg text-secondary text-center"><u>Social Media</u></h4>
<ul class="list-inline mb-0 footer-social">
<li class="list-inline-item">
<a class="btn btn-outline-light btn-secondary text-center rounded-circle" href="#">
<i class="fa fa-fw fa-facebook icon-margin"></i>
</a>
</li>
<li class="list-inline-item">
<a class="btn btn-outline-light btn-secondary text-center rounded-circle" href="#">
<i class="fa fa-fw fa-google-plus icon-margin"></i>
</a>
</li>
<li class="list-inline-item">
<a class="btn btn-outline-light btn-secondary text-center rounded-circle" href="#">
<i class="fa fa-fw fa-twitter icon-margin"></i>
</a>
</li>
<li class="list-inline-item">
<a class="btn btn-outline-light btn-secondary text-center rounded-circle" href="#">
<i class="fa fa-fw fa-linkedin icon-margin"></i>
</a>
</li>
<li class="list-inline-item">
<a class="btn btn-outline-light btn-secondary text-center rounded-circle" href="#">
<i class="fa fa-fw fa-github icon-margin"></i>
</a>
</li>
</ul>
</div>
<div class="col-md-4 col-lg-4" style="margin-left:-0.5%">
<h4 class="text-uppercase mb-4 text-secondary"><u>Popular Links</u></h4>
<div class="container-fluid">
<div class="row footer-wide"">
<ul class="nav navbar-nav col-lg text-center" style="margin-left:5%">
<li><a style="color:#d3d3d3" href="#section1">Home</a></li>
<li><a style="color:#d3d3d3" href="#section2">About Me</a></li>
<li><a style="color:#d3d3d3" href="#section3">Education</a></li>
<li><a style="color:#d3d3d3" href="#section4">Skills</a></li>
<li><a style="color:#d3d3d3" href="#section5">Portfolio</a></li>
<li><a style="color:#d3d3d3" href="#section6">Contact</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</footer>
thanks.
Chris
EDIT:
The issue with this is that when you use 100vw for example, the scroll bar is taken in account for. As most people recommend, always use max-width as 100% to avoid any browser scroll bars.
Add these rules to your html and body css tags
max-width: 100%;
overflow-x: hidden;
if you are using Bootstrap
Make sure that your container class is .container-fluid
if the body container is only .container, then you can make separate container for the footer class set to .container-fluid and make its style="padding:0;margin:0"
====================
<body>
<div class="container">
html coding......
</div>
<div class="container-fluid" style="padding:0;margin:0">
<footer>
html coding.......
</footer>
</div>
</body>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.2/css/bootstrapValidator.min.css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"/>
<link href="https://fonts.googleapis.com/css?family=Work+Sans:400,500,700" rel="stylesheet"/>
<link rel="stylesheet" href="static/font-awesome/css/font-awesome.min.css"/>
<link rel="stylesheet" href="source.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>
<!-- Navigation -->
<nav class="navbar navbar-default bg-secondary fixed-top" style="height:200px" id="mainNav" role="navigation">
<div class="container">
<div class="row">
<p class="navbar-brand font-title col-xl-4 offset-xl-4 col-lg-4 offset-lg-4 col-md-4 offset-md-4 col-sm-4 offset-sm-3 text-center">Chris You</p>
</div>
<div class="row">
<a class="font-menu col-xl col-lg col-md col-sm text-center" style="color:#d3d3d3" href="#section1">Home</a>
<a class="font-menu col-xl col-lg col-md col-sm text-center" style="color:#d3d3d3" href="#section2">About Me</a>
<a class="font-menu col-xl col-lg col-md col-sm text-center" style="color:#d3d3d3" href="#section3">Education</a>
<a class="font-menu col-xl col-lg col-md col-sm text-center" style="color:#d3d3d3" href="#section4">Skills</a>
<a class="font-menu col-xl col-lg col-md col-sm text-center" style="color:#d3d3d3" href="#section5">Portfolio</a>
<a class="font-menu col-xl col-lg col-md col-sm text-center" style="color:#d3d3d3" href="#section6">Contact</a>
</div>
</div>
</nav>
<!--image-->
<div class="row" style="margin-top:300px">
<img class="col-xl-2 offset-xl-5 col-lg-4 offset-lg-4 col-md-4 offset-md-4 col-sm-4 offset-sm-4" src="me.gif">
</div>
<!--Description-->
<div class="jumbotron jumbo-header">
<div class="row">
<p class="about-title text-third text-center col-12"><strong>Software Developer</strong></p>
</div>
<p class="about-text text-primary text-left col-xl-4 offset-xl-4 col-lg-7 offset-lg-3 col-md-6 offset-md-3 col-sm-8 offset-sm-2"> Hi! I'm Chris. I am a very passionate software developer based in Detroit, MI. Highly motivated to write clean and effective code. I specialize in Java, C#, C++. Feel free to contact me!</p>
</div>
This is my HTML Code. I want css styling for active nav-tab.Now i want when my page loads Location tab should have blue background how can i get that
<div class="row">
<div class="col-sm-12 col-xs-12 col-lg-12 col-md-12 welcome">
<ul class="nav navbar-nav navbar-nav-primary">
<li class="active">
<a href="#one" data-toggle="tab">
<i class="fa fa-map-marker" aria-hidden="true"></i>
<span class="li-text">Location</span>
</a>
</li>
<li>
<a href="#two" data-toggle="tab">
<i class="fa fa-heartbeat" aria-hidden="true"></i> <span class="li-text">Heartbeats</span>
</a>
</li>
<li>
<a href="#three" data-toggle="tab">
<i class="fa fa-power-off" aria-hidden="true"></i>
<span class="li-text">Reboots</span>
</a>
</li>
<li>
<a href="#four" data-toggle="tab">
<i class="fa fa-compress" aria-hidden="true"></i>
<span class="li-text">Reconnects</span>
</a>
</li>
<li>
<a href="#five" data-toggle="tab">
<i class="fa fa-battery-full" aria-hidden="true"></i>
<span class="li-text">Charge</span>
</a>
</li>
</ul>
</div>
Location tab is the active tab
<div id="one" class="tab-pane active">
<div class="row">
<div class="col-sm-offset-10 col-md-offset-10 col-xs-offset-10 col-lg-offset-10 col-sm-2 col-md-2 col-xs-2 col-lg-2 searchDiv">
<div class="row">
<div class="col-sm-1 col-xs-1 col-lg-1 col-md-1">
<i class="fa fa-search fa-2x" aria-hidden="true"></i>
</div>
<div class="col-sm-1 col-md-1 col-lg-1 col-xs-1">
<i class="fa fa-ellipsis-v fa-2x" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
<div class="tab-pane active" id="1a">
<div ui-grid="gridOptions" class="grid-table" ui-grid-auto-resize ui-grid-cellNav ui-grid-edit ui-grid-resize-columns ui-grid-pinning ng-style="getTableHeight()"></div>
</div>
</div>
Now i want when my page loads Location tab should have blue background how can i get that.
Try this
CSS
.nav li.active a,
.nav li a:hover,
.nav li.active a:focus,
.nav li.active a:hover{
background-color:red;
}
Link for reference
hope this helps..
You can use it like this
.tab-pane.active {
background : blue; // or your desired color code.
}
I'm just developing a Reproting Tool and due to some reason i have two scroll bars,one which is for Chrome or any other browser and the other is part of the HTML,i couldn't trace anything back to the HTML..
> </head>
<body style="min-height:20px">
<!-- START PAGE CONTAINER -->
<div class="page-container" style="min-height:20px">
<!-- START PAGE SIDEBAR -->
<div class="page-sidebar">
<!-- START X-NAVIGATION -->
<ul class="x-navigation">
<li class="xn-logo">
Reports
</li>
<li class="xn-profile">
<!--<a href="#" class="profile-mini">
<img src="assets/images/users/avatar.jpg" alt="John Doe" />
</a>-->
<div class="profile">
<!--<div class="profile-image">
<img src="assets/images/users/avatar.jpg" alt="John Doe" />
</div>-->
<!--<div class="profile-data">
<div class="profile-data-name">John Doe</div>
<div class="profile-data-title">Web Developer/Designer</div>
</div>-->
<!--<div class="profile-controls">
<span class="fa fa-info"></span>
<span class="fa fa-envelope"></span>
</div>-->
</div>
</li>
<li class="xn-title">Navigation</li>
<li >
<span class="fa fa-cogs fa-spin" title="Configure Reports"></span> <span class="xn-text">Configure Reports</span>
</li>
<li>
<span class="fa fa-cogs fa-spin" title="Configure Dashboard"></span> <span class="xn-text">Configure Dashboard</span>
</li>
<li class="active">
<span class="fa fa-eye" title="View Dashboard"></span> <span class="xn-text">View Dashboard</span>
</li>
</ul>
<!-- END X-NAVIGATION -->
Any Help would be deeply appreciated
what you can do is
to the main div you can apply css like for example you have
<div class ="main">
// rest of your code
</div>
in your main style.css you can put
.main {
width:100%;
height:90%;
overflow:hidden;
}
if this doesn't work you can use
body {
overflow-y:hidden;
}
I have a web page ioterm which I tried to make it responsive. I tested on several web browsers FF, IE11 and Chrome 44. The problem is the div seems lower when it is displayed with Chrome. You can check it when you enter my sample page and navigate to products page. (WASPMOTE) When images slide, you will notice the WASPMOTE div positions lower than the others. It seems OK with FF and IE11. How can I fix this for Chrome?
Incase you can't access my page here is the images.imgur
Thanks in advance.
EdiT
Here is the problemmatic div.
<div class="row item active" id="one">
<div>
<div class="row ">
<div class="col-md-4" id="img1">
<img class="img-center" src="images/waspmote_pro_t.png" alt="waspmote">
</div>
<div class="col-md-4" id="img2">
<img class="img-center" src="images/waspmote_exp_radio_board_2-375_t.png" alt="waspmote">
</div>
<div class="col-md-4" id="img3">
<img class="img-center" src="images/u13_gw_t.png" alt="waspmote">
</div>
</div>
</div>
<div class="caption row ">
<div class="col-md-12">
<h3 class="productHeight">Waspmote</h3>
</div>
<div class="row" id="desc">
<div class="col-md-4" id="exp1">
<ul style="list-style-type: none;" class="productSize">
<li lang="tr">
<i class="fa fa-share-alt"></i> Tüm sensörlere bağlanabilir
</li>
<li lang="tr">
<i class="fa fa-rss"></i> Tüm wi-fi teknolojilerini destekler
</li>
<li lang="tr">
<i class="fa fa-cloud"></i> Bulut teknolojilerine uyumlu
</li>
</ul>
</div>
<div class="col-md-4" id="exp2">
<ul style="list-style-type: none;" class="waspmote">
<li lang="tr">
<i class="fa fa-check-circle"></i> Ultra düşük güç (0.7uA)
</li>
<li lang="tr">
<i class="fa fa-check-circle"></i> 100+ Sensör uyumluluğu
</li>
<li lang="tr">
<i class="fa fa-check-circle"></i> Kablosuz uzaktan programlama
</li>
<li lang="tr">
<i class="fa fa-check-circle"></i> Şifreleme Kütüphaneleri (AES, RSA)
</li>
<li lang="tr">
<i class="fa fa-check-circle"></i> Encapsulated line available
</li>
</ul>
</div>
<div class="col-md-4" id="exp3">
<ul style="list-style-type: none;" class="waspmote">
<li lang="tr">
<i class="fa fa-check-circle"></i> Desteklediği Protokoller: RS-232,RS-485,Modbus,CAN Bus, 4-20mA
</li>
<li lang="tr">
<i class="fa fa-check-circle"></i> 3G/GPRS/LoRaWAN/LoRa/Sigfox/868/900MHz,ZigBee/802.15.4/WiFi/RFID/ NFC/ Bluetooth 4.0
</li>
</ul>
</div>
</div>
</div>