Jump to content

Search the Community

Showing results for tags 'bootstrap'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • W3Schools
    • General
    • Suggestions
    • Critiques
  • HTML Forums
    • HTML/XHTML
    • CSS
  • Browser Scripting
    • JavaScript
    • VBScript
  • Server Scripting
    • Web Servers
    • Version Control
    • SQL
    • ASP
    • PHP
    • .NET
    • ColdFusion
    • Java/JSP/J2EE
    • CGI
  • XML Forums
    • XML
    • XSLT/XSL-FO
    • Schema
    • Web Services
  • Multimedia
    • Multimedia
    • FLASH

Calendars

  • Community Calendar

Group


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests


Languages

Found 36 results

  1. Bootstrap Vertical alignment

    I am working on a landing page that has two horizontal columns in bootstrap. Everything works well except that I cannot vertically align the "COMING SOON" text in the top box without separating the 2 boxes and leaving a gutter between them. I would like to vertically center the text in the top column. Any help will be highly appreciated. Below is the code: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> </head> <style> body{ background-color : #222 !important; /*background-color : #ECECEA; !important*/ } .container{ background-color: white; height:210px; } .row h1{ color: #FF530D; font-size: 3em; font:bold; } .container p{ color: black; font-size: 1.5em; } .jumbotron{ background-color : #222 !important ; } .jumbotron p { color: #A9A9A9; !important; } .jumbotron h1{ color: #FF530D !important ;<!--Thank you Jesus--> } } //vertical-align-self-center; </style> </head> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <!-- jQuery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!-- Latest compiled JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <div class="jumbotron text-center"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p> </div> <div class="container text-align center;"> <div class="row align-self-center"> <section="col-sm-12-col-sm-offset-0 "> <SPAN STYLE="color: #FF530D; font-size: 3em;"><center>Coming Soon!</center></SPAN><!--I am trying to vertically aligh coming soon--> </section> <div class="col-sm-12-col-sm-offset-0" style="background-color:#558c89;height:310px; margin-top: 130px; margin-bottom: 130px;"><!--to center a div in bootstrap use this formula 12-n/2 where n is the number in the column--> <!--next put another div inside a div to hold the form and its button--> <div class ="section-center2"> <h2 style="padding-top:65px; margin-bottom:20px;color: black;"><center>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo. <center/></h2> <h3 style="margin-top:65px;"><center><mark>Be the first to know when we launch! Sign up below:<mark/><center/></h3> </div> <center> <form class="form-inline"> `<div class="form-group"> ` <label for="email">Email address:</label> ` <input type="email" class="form-control" id="email"> <button type="submit" class="btn btn-default">Submit</button> ` </div> </center></form> </div> </div> </html>
  2. i created a website using w3schools bootstap. it was a while ago and i can't remember how to get to the editing page. could someone help me please. thanks, steve
  3. Bootstrap Grid Question

    With respect to the Bootstrap Grid system, can the Grid cover the whole page or is it limited to the body area? Thanks,
  4. Changing the place of input and label

    The html code is this : <div class="form-group"> <label class="col-sm-4 control-label">Checkbox inputs</label> <div class="col-sm-8"> <div class="checkbox check-transparent"> <input type="checkbox" value="1" id="opt01" checked> <label for="opt01">Option 1</label> </div> <div class="checkbox check-transparent"> <input type="checkbox" value="1" id="opt02"> <label for="opt02">Option 2</label> </div> <div class="checkbox check-transparent"> <input type="checkbox" value="1" id="opt03"> <label for="opt03">Option 3</label> </div> </div> </div> I attached the results photo : I want to change the place of checkbox and label I mean I want first be label and then checkbox. It had bootstrap too I uploaded the bootstrap files too : https://www.dropbox.com/s/kc8ytkkd5dxcmc1/assets.zip?dl=0 Who can say that how can I change the place of checkbox and label I will be thank.
  5. I am creating a web page layout using bootstrap and the backend is PHP 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 to debug the CSS code to make the two sections visible in mobile,,,please assist? HTML <!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> CSS 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%; } }
  6. how to link another page using id

    Hello folks, i want to link the page from to another page ex: In my footer column, i've 5 types of products but when i click those products it links to product.html page.Actually In that product page there 5 no of products are listed. when i click the product from index page.I want exact header location for the product.. Thanks in advance
  7. Hi, I am going through bootstrap 4 alpha version. But when I tried to create a simple modal I found that it doesn't work in my browser. Can anyone find out what is wrong I am doing? The problem is fixed. It was causing problem because of incorrect data-target attribute. <!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, shrink-to-fit= no"/> <title> . Bootstrap</title> <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"> </head> <body> <div class= "container"> <div class= "row"> <div class= "col-12"> <h1 class= "alert-info">Live Demo</h1> <div class= "w-100"></div> <button type= "button" class= "btn btn-primary" data-toggle= "modal" data-target= "#liveModal"> Go Live </button> <div class= "modal fade" tabindex="-1" id= "liveModal" role= "dialog" aria-labelledby= "liveModalLabel"> <div class= "modal-dialog" role="document"> <div class= "modal-content"> <div class= "modal-header"> <h5 class= "modal-title">Modal Title</h5> <button class= "close" type="button" data-dismiss= "modal" aria-label= "Close"> <span aria-hidden= "true">×</span> </button> </div> <div class= "modal-body"> <p> Toggle a working modal demo by clicking the button below. It will slide down and fade in from the top of the page. </p> </div> </div> </div> </div> </div> </div> </div> <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> </body> </html>
  8. Bootstrap vs Media Queries

    Dear all, Since bootstrap has container and container-fluid classes, does a heavy lifting, and is easy to use, I am inclined to think that css's media query has no advantage. I'd appreciate sharing any opposite opinion that sees usefulness/advantage in media queries.
  9. Is It Safe To Use W3.CSS Together With Bootstrap Without Any Conflicts?
  10. Full width rows in Bootstrap

    Hello. This is my page: http://feriapixel.cl/anchour/ I'm using Bootstrap's grid system and whenever i use divs with the row class they get stuck in a container, and i want them to use be full width. This is one of my divs for example: <div class="content-seis" > <div class="row" > <div class="col-sm-6 showroom coffee-break" > <h2>Un coffee break con sabor y atención casera, para tu trabajo</h2> <p>Café americano, tapaditos, fruta, jugos, opciones vegetarianas y más. Tenemos promociones ya armadas, pero tomamos tu pedido con gusto.</p> <a href="#" class="btn btn-showroom" role="button">NECESITO COFFEE BREAK</a> </div> <div class="col-sm-6 showroom pasteleria-diseno"> <h2>Pastelería con diseño</h2> <p>Tortas con diseño, popcakes, cupcakes, alfajores y más. Te damos el diseño que necesites.</p> <a href="#" class="btn btn-showroom" role="button">QUIERO TORTAS CON DISEÑO Y MÁS</a> </div> </div> </div> I want that div to be full width. Sorry for the really basic question, but i can't manage to do it, i tried putting all inside a div withe the container-fluid class but it didn't work.
  11. Bootstrap navbar always collapsed

    Reading the bootstrap tutorial on this site, we can have a collapsed navbar when we are watching the site on a small screen: http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_navbar_collapse&stacked=h How can i have the same collapsed navbar all the time? i mean, i want the same collapsed navbar that appears on mobile to have it on the desktop's wide-screen too.
  12. All divs/rows the same size in Bootstrap

    This is my page: http://codelcolab.feriapixel.cl/ When i shrink the browser window or watch it on a mobile device, the first divs (with class row) have least width than the ones that came after them, so i'm having a blank space to the right of the first divs because of the wider ones. How can i do to make all the divs the same width? Here is how it looks, notice the white space to the right of the orange boxes:
  13. Hello all, pretty new here (and to web design, in truth) I have been toying around with Dreamweaver the past 3 weeks or so trying to redesign my company's web page and one of the elements I was adding to the page is a carousel for showing off some things. I have the carousel working properly and things are great, but there are a few things I want to try and learn how to do in order to make the page look fresh and appealing. Here is an example of what my bootstrap resembles for this topic. Pay attention to only the carousel at the top. https://getbootstrap.com/examples/carousel/ So I am trying to find out a few different styling things with the carousel. First off, on the sides of where the image would be (centered) there are areas of dark gray with arrow glyph icons indicating the direction the user can make the carousel rotate. I found a way to remove the background coloring and make the carousel "white" however I would prefer to remove those areas altogether. I would also like to push the arrow keys into the actual carousel on top of the images (maybe in a corner out of the way) I want to change what the image indicators look like on the bottom of the carousel. Currently, as in the example, the indicators are small circles that change color when a particular image pane is active. Is there a way to design icons to replace those, perhaps a line that brightens when the selection is active? For example, in the 3 slide referenced above, instead of 3 circles, the indicators are dashes that, when a current active slide is up in the carousel, the dash indicator brightens or is highlighted. The last thing I want to do is make a translucent/transparent box covering half or third of the image in the center (on a side) with text. The issue I am having is trying to get the text in a transparent/translucent box preferably one that does not change when the carousel rotates.
  14. Hi i am new for the PHP, i had the experienced before to do a login system page but what i want it is HTML and PHP file to separate i dont want PHP with HTML together to 1 file , cause professional people will more likely to use 2 file rather than 1 file easy to maintain and edit how to use the external PHP file coding without re-design whole page cause normally what i tested before was link or turn to other new page and result will come out but the design was totally gone so have any ways and suggestion to do that ... in the end, im sorry i not well in english and my knowledge of PHP still quite new , thanks you so much
  15. .popover will suddenly delay

    HI there, first i apology my english not too well, hope you may understand what i mean ,Thanks Im try to using the Bootstrap one of the function is popover similar like tooltips, but i facing the problem For example : <div id="all"> <div id="a" class="circle_ball" data-user-id="2">●</div> <div id="b" class="circle_ball" data-user-id="1">●</div> </div> and my Jquery code is : $('#all').on('mouseenter','div',function(){ $(this).popover({ title: 'Jun Hoo', content: $(this).attr('data-user-id'), trigger:'hover', html:true }); }); but the result on the code will showing delay and at least need to hover the target more than 2 time ... any ways to figure out? thanks you so much i found ways to solve the delay speed, but will keep popover the content when mouse pointer hover the first popover body the ways is add one more code --- $('#all').popover({title: 'Loading', content: '...',selector: 'div',trigger:'hover',html:true}); Thanks for helping
  16. Hello I'm having a of a time getting my image element aligned in the top right corner of my web application and everything I try fails. at the top (head) of the page I'm using a navbar and below that I have an input group. I'm trying to float right an image (which is my school logo) but no matter what I do. I cant get it to sit nica and square where i want it. I provided a screen shoot of the problems I'm having and included is a code snippet. Can somebody please tell me WTH I'm doing wrong here? First part of code is NavBar and the second is input group. How would I set the logo by itself above the blue side panel where its supposed to be? <nav class="navbar navbar-progress"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">Existential Graph Editor</a> </div> <ul class="nav navbar-nav"> <!--li class="active"><a href="#">Home</a></li--> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">File <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Page 1-1</a></li> <li><a href="#">Page 1-2</a></li> <li><a href="#">Page 1-3</a></li> </ul> </li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">Edit <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Page 1-1</a></li> <li><a href="#">Page 1-2</a></li> <li><a href="#">Page 1-3</a></li> </ul> </li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">Help <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Page 1-1</a></li> <li><a href="#">Page 1-2</a></li> <li><a href="#">Page 1-3</a></li> </ul> </li> <li><a href="#">About</a></li> </ul> <!--ul class="nav navbar-nav navbar-right"> <!--li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li> <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li--> <!--img src="../images/uahLogo.png" class="img-rounded" --> <!--/ul--> </div> </nav> <form> <!--label class="label label-primary" for="drawType">Enter Expression (e, c, p, q):</label--> <div class="input-group"> <input id="drawType" type="text" class="form-control" placeholder="Enter Expression" aria-describedby="basic-addon2"> <span class="input-group-addon" id="drawC" onclick="return OnClickDraw();">Submit</span> <span class="input-group-addon" id="clear" onclick="return clearArea();">Clear</span> <span class="input-group-addon" id="save">Save</span> <span class="uahImg"><img src="../images/uahLogo.png" height="100"> </span> </div> </form>
  17. Hi, i am in need of urgent help. I have created a web template using bootstrap. I have created a "collapseble" nav bar and used "parallax, jquery single page nav" to scroll on the same page smoothly.This worked fine. There is no problem in it. After that according to the requirement i have used "affix" to have a div on top of the menu bar. suddenly my nav bar when collapsed (i mean on mobile devices) not working properly. It is showing a strange behavior. When nav bar got collapsed for the first time when the page gets loaded if i click on the nav bar the menu bar is sliding down and when i click on the menu item of the menu where the page scrolls to that section, the slided down menu bar is automatically getting slided up without me pressing on the collapsed menu button. After the page slides to that particular section when i click on the collapsed menu it is not working at all. I am attaching my home page where the problem persists. Can somebody help me fix this issue. home.zip
  18. The w3schools tutorial on Bootstrap 3 is excellent. Thanks for producing it! It would be helpful if there were a forum section on Bootstrap 3 so that users could post questions, issues or problems and learn from one another.
  19. Greetings classmates! School is in session. It seems this is mostly a CSS question. So my apologies for any re-tread. I have seen numerous posts addressing similar, but can't seem to put it together. Any help or direction to existing solutions is greatly appreciated. I am Developing an ASP.NET/MVC5 web app. It uses bootstrap 3. I am new to bootstrap and never really got into CSS more than the basics. Question: How can I change/override the a:hover of a thumbnail to include a user-defined hoverscale? So in the thumbnail.less file I see: @thumbnailHoverScale : 1.3; . . . a:hover img.thumbnail { .selected(@thumbnailHoverScale); } HoverScale is not a style attribute it seems so I can't override in standard local definition HTML style="..."!?! I do understand I can define a <style/> in local HTML to override, but again fail to comprehend exactly how. Here is my HTML: <div id="thumbnailContainer"> <div class="thumbnail-loading-spinner"></div> <ul id="thumbnails" data-bind='template: {name:"thumbnailsTemplate", foreach: thumbnails}'></ul> <div class="admin"></div> </div> and the template: <script id='thumbnailsTemplate' type="text/x-jquery-tmpl"> <li> <a href="${Url}" data-vpath="${VPath}"> <img class="thumbnail" src="${UrlThumbnail}" /> </a> </li> </script> So basically in the template, I want to override hoverscale just for just the generated thumbs. I have tried a number of style="" property definitions, then realized HoverScale is not a property. I also tried a number of variations like: ...class="thumbnail {HoverScale:2}" I think I am close on this one, possibly, but not sure how I would apply it to just the generated thumbs?? <style> a.thumbnail:hover { .selected(3) } </style> with no joy. Anyone? Thanks! Cheers!
  20. BS Navbar

    Hi, just walking through the tutorial of bootstrap. The NavBar is really cool, but how does it navigation. I don't have any idea how I can switch from one page (or content) to another whild clicking on the links in the nav bar. I the sample absolutely nothing happens here. Thanks for helping a newbee. With best regards Gerhard
  21. I have a php based website script which I want to make responsive. What are the ways to make it responsive? I am not a developer so need an easy way. I know a little bit of html and css. Download the template from https://www.dropbox.com/s/pfolvxhn9co2qd3/bluesky.zip?dl=0 to have an idea about the coding and website structure.
  22. A responsive php based b2b website

    I have a script developed in php. It is non-responsive. I want to convert it to a responsive website. Is there any free tool or software or step by step guide to do it? I know a little html and css, but not php. I was wondering if there is a place where I can import my existing template, apply bootstrap with one click and export. It is an open source script and can be downlaoded from phpb2b.com.
  23. Bootstrap

    Dear all: If I will learn js, jQuery, Ajax, and json, do I need to additionally learn bootstrap? What extra value would I get from bootstrab?
  24. Hi w3 Community i want to learn how to replicate this effect on the main screen of this website https://overv.io/ The traget(booklets) starts off somewhere fixed and translate/rotates towards 0 once it's reached it's original location, scrolling further down won't change any location scrolling back up with move the items back towards the location it stated. Here's something which i think it should look like.. window.onscroll = function() {var speed = 1; //this should be adapted to the height of divvar startdeg = 130; //var startx = 300;var starty =-300;var scroll = $(window).scrollTop(); //using scrolling as variablevar deg = (startdeg - scroll) / speed;var translatex = startx - scroll/ speed;var translatey = starty - scroll/ speed;//Here should be some conditioner or maybe a do-while loop to stop transforming once it reached it's original location?$(".logo").css({"transform": "translate("translatex+"px,"translatey+"px) rotate("+deg+"deg)",}); }; https://jsfiddle.net/aavelyn/ktccxr6j/1/ PS: I'm fairly basic with javascript,jquery though i can fully understand the code presented. Thanks a lot!!
  25. Trouble linking HTML and CSS files

    I am building my first web site using HTML, CSS, and Bootstrap. After extensive searching, I can’t get my HTML file to link with my CSS file. The HTML document and CSS document are in the same domain so there shouldn’t be any reason to mention a file in the code, but my CSS isn’t affecting the HTML when I load it in Chrome. Any help would be greatly appreciated. I have enjoyed learning how to make a website, but this is hampering my progress/enjoyment. Below is some of the code (most comes from the Bootstrap site with minor customization). <head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--> <title>TruNord</title><link href=“GOOGLE FONT PAGE” rel=“stylesheet” /><link href=“css/bootstrap.min.css” rel=“stylesheet” /><link href=“main.css” type=“text/css” rel=“stylesheet” /></head>
×