Search Results

Search found 724 results on 29 pages for 'bootstrap'.

Page 1/29 | 1 2 3 4 5 6 7 8 9 10 11 12  | Next Page >

  • Rails 3 and Bootstrap 2.1.0 - can't fix my footer

    - by ExiRe
    I have Rails application with bootstrap 2.1.0 (i use twitter-bootstrap-rails gem for that). But i can't get working footer. It is not visible unless i scroll down the page. I can't get how to fix that. Application.html.haml !!! %html %head %title MyApp = stylesheet_link_tag "application", :media => "all" = javascript_include_tag "application" = csrf_meta_tags %meta{ :name => "viewport", :content => "width=device-width, initial-scale=1.0" } %body %div{ :class => "wrapper" } = render 'layouts/navbar_template' %div{ :class => "container-fluid" } - flash.each do |key, value| = content_tag( :div, value, :class => "alert alert-#{key}" ) %div{ :class => "row-fluid" } %div{:class => "span10"} =yield %div{:class => "span2"} %h2 Test sidebar %footer{ :class => "footer" } = debug(params) if Rails.env.development? bootstrap_and_overrides.css.less @import "twitter/bootstrap/bootstrap"; body { padding-top: 60px; } @import "twitter/bootstrap/responsive"; // Set the correct sprite paths @iconSpritePath: asset-path('twitter/bootstrap/glyphicons-halflings.png'); @iconWhiteSpritePath: asset-path('twitter/bootstrap/glyphicons-halflings-white.png'); // Set the Font Awesome (Font Awesome is default. You can disable by commenting below lines) // Note: If you use asset_path() here, your compiled boostrap_and_overrides.css will not // have the proper paths. So for now we use the absolute path. @fontAwesomeEotPath: '/assets/fontawesome-webfont.eot'; @fontAwesomeWoffPath: '/assets/fontawesome-webfont.woff'; @fontAwesomeTtfPath: '/assets/fontawesome-webfont.ttf'; @fontAwesomeSvgPath: '/assets/fontawesome-webfont.svg'; // Font Awesome @import "fontawesome"; // Your custom LESS stylesheets goes here // // Since bootstrap was imported above you have access to its mixins which // you may use and inherit here // // If you'd like to override bootstrap's own variables, you can do so here as well // See http://twitter.github.com/bootstrap/less.html for their names and documentation // // Example: // @linkColor: #ff0000; //MY CSS IS HERE. html, body { height: 100%; } footer { color: #666; background: #F5F5F5; padding: 17px 0 18px 0; border-top: 1px solid #000; } footer a { color: #999; } footer a:hover { color: #efefef; } .wrapper { min-height: 100%; height: auto !important; height: 10px; margin-bottom: -10px; }

    Read the article

  • Responsive Inline Elements with Twitter Bootstrap

    - by MightyZot
    Originally posted on: http://geekswithblogs.net/MightyZot/archive/2013/11/12/responsive-inline-elements-with-twitter-bootstrap.aspxTwitter Boostrap is a responsive css platform created by some dudes affiliated with Twitter and since supported and maintained by an open source following. I absolutely love the new version of this css toolkit. They rebuilt it with a mobile first strategy and it’s very easy to layout pages once you get the hang of it. Using a css / javascript framework like bootstrap is certainly much easier than coding your layout by hand. And, you get a “leg up” when it comes to adding responsive features to your site. Bootstrap includes column layout classes that let you specify size and placement based upon the viewport width. In addition, there are a handful of responsive helpers to hide and show content based upon the user’s device size. Most notably, the visible-xs, visible-sm, visible-md, and visible-lg classes let you show content for devices corresponding to those sizes (they are listed in the bootstrap docs.) hidden-xs, hidden-sm, hidden-md, and hidden-lg let you hide content for devices with those respective sizes. These helpers work great for showing and hiding block elements. Unfortunately, there isn’t a provision yet in Twitter Bootstrap (as of the time of this writing) for inline elements. We are using the navbar classes to create a navigation bar at the top of our website, www.crowdit.com. When you shrink the width of the screen to tablet or phone size, the tools in the navbar are turned into a drop down menu, and a button appears on the right side of the navbar. This is great! But, we wanted different content to display based upon whether the items were on the navbar versus when they were in the dropdown menu. The visible-?? and hidden-?? classes make this easy for images and block elements. In our case, we wanted our anchors to show different text depending upon whether they’re in the navbar, or in the dropdown. span is inherently inline and it can be a block element. My first approach was to create two anchors for each options, one set visible when the navbar is on a desktop or laptop with a wide display and another set visible when the elements converted to a dropdown menu. That works fine with the visible-?? and hidden-?? classes, but it just doesn’t seem that clean to me. I put up with that for about a week…last night I created the following classes to augment the block-based classes provided by bootstrap. .cdt-hidden-xs, .cdt-hidden-sm, .cdt-hidden-md, .cdt-hidden-lg {     display: inline !important; } @media (max-width:767px) {     .cdt-hidden-xs, .cdt-hidden-sm.cdt-hidden-xs, .cdt-hidden-md.cdt-hidden-xs, .cdt-hidden-lg.cdt-hidden-xs {         display: none !important;     } } @media (min-width:768px) and (max-width:991px) {     .cdt-hidden-xs.cdt-hidden-sm, .cdt-hidden-sm, .cdt-hidden-md.cdt-hidden-sm, .cdt-hidden-lg.cdt-hidden-sm {         display: none !important;     } } @media (min-width:992px) and (max-width:1199px) {     .cdt-hidden-xs.cdt-hidden-md, .cdt-hidden-sm.cdt-hidden-md, .cdt-hidden-md, .cdt-hidden-lg.cdt-hidden-md {         display: none !important;     } } @media (min-width:1200px) {     .cdt-hidden-xs.cdt-hidden-lg, .cdt-hidden-sm.cdt-hidden-lg, .cdt-hidden-md.cdt-hidden-lg, .cdt-hidden-lg {         display: none !important;     } } .cdt-visible-xs, .cdt-visible-sm, .cdt-visible-md, .cdt-visible-lg {     display: none !important; } @media (max-width:767px) {     .cdt-visible-xs, .cdt-visible-sm.cdt-visible-xs, .cdt-visible-md.cdt-visible-xs, .cdt-visible-lg.cdt-visible-xs {         display: inline !important;     } } @media (min-width:768px) and (max-width:991px) {     .cdt-visible-xs.cdt-visible-sm, .cdt-visible-sm, .cdt-visible-md.cdt-visible-sm, .cdt-visible-lg.cdt-visible-sm {         display: inline !important;     } } @media (min-width:992px) and (max-width:1199px) {     .cdt-visible-xs.cdt-visible-md, .cdt-visible-sm.cdt-visible-md, .cdt-visible-md, .cdt-visible-lg.cdt-visible-md {         display: inline !important;     } } @media (min-width:1200px) {     .cdt-visible-xs.cdt-visible-lg, .cdt-visible-sm.cdt-visible-lg, .cdt-visible-md.cdt-visible-lg, .cdt-visible-lg {         display: inline !important;     } } I created these by looking at the example provided by bootstrap and consolidating the styles. “cdt” is just a prefix that I’m using to distinguish these classes from the block-based classes in bootstrap. You are welcome to change the prefix to whatever feels right for you. These classes can be applied to spans in textual content to hide and show text based upon the browser width. Applying the styles is simple… <span class=”cdt-visible-xs”>This text is visible in extra small</span> <span class=”cdt-visible-sm”>This text is visible in small</span> Why would you want to do this? Here are a couple of examples, shown in screen shots. This is the CrowdIt navbar on larger displays. Notice how the text is two line and certain words are capitalized? Now, check this out! Here is a screen shot showing the dropdown menu that’s displayed when the browser window is tablet or phone sized. The markup to make this happen is quite simple…take a look. <li>     <a href="@Url.Action("what-is-crowdit","home")" title="Learn about what CrowdIt can do for your Small Business">         <span class="cdt-hidden-xs">WHAT<br /><small>is CrowdIt?</small></span>         <span class="cdt-visible-xs">What is CrowdIt?</span>     </a> </li> There is a single anchor tag in this example and only the spans change visibility based on browser width. I left them separate for readability and because I wanted to use the small tag; however, you could just as easily hide the “WHAT” and the br tag on small displays and replace them with “What “, consolidating this even further to text containing a single span. <span class=”cdt-hidden-xs”>WHAT<br /></span><span class=”cdt-visible-xs”>What </span>is CrowdIt? You might be a master of css and have a better method of handling this problem. If so, I’d love to hear about your solution…leave me some feedback! You’ll be entered into a drawing for a chance to win an autographed picture of ME! Yay!

    Read the article

  • Updating an interface to bootstrap

    - by Anagio
    I'm updating a web apps interface to bootstrap. There's a lot of existing CSS and Javascript/jQuery i'll have to migrate, most i'll scrap and use bootstraps. But for parts of the app that use datatables and such all that code has to be migrated. I'm working on a development server. The app has a header.phtml sidebar.phtml and a lot of content area view files. Right now i'm building static versions of view files say the header. I then open my existing header.phtml into notepad++ split screen with the static file and copy over the dynamic code. Then replace the old header.phtml with the one I just made. To make sure the header displayed correctly I had to add all the CSS and JS from bootstrap. This is conflicting with the current CSS styles and some JS conflicts as well. Should I go through the app note what JS I absolutely need what I don't and same with the CSS. Then strip all the CSS/JS from the old app that is not needed so it only has bootstraps and any other critical files and not worry about the way pages look as i'm making progress to updating them. I'd be working on mostly a wireframe of the old site without any styles until I get to applying bootstraps. Is this efficient or is there another way I can get through all these files and update them easily?

    Read the article

  • Grails Twitter Bootstrap Plugin Issue with navbar-fixed-top

    - by Philip Tenn
    I am using Grails 2.1.0 and Twitter Bootstrap Plugin 2.1.1 and am encountering an issue with navbar-fixed-top. In order to get the Navbar fixed to the top of the page to behave correctly during resize, the Twitter Bootstrap Docs states: Add .navbar-fixed-top and remember to account for the hidden area underneath it by adding at least 40px padding to the . Be sure to add this after the core Bootstrap CSS and before the optional responsive CSS. How can I do this when using the Grails Plugin for Twitter Bootstrap? Here is what I have tried: main.gsp <head> ... <r:require modules="bootstrap-css"/> <style type="text/css"> body { padding-top: 60px; padding-bottom: 40px; } .sidebar-nav { padding: 9px 0; } </style> <r:require modules="bootstrap-responsive-css"/> <r:layoutResources/> </head> The problem is that Grails Plugin for Twitter Bootstrap takes the content of bootstrap.css and bootstrap-responsive.css and combines them into the following merged file: static/bundle-bundle_bootstrap_head.css. Thus, I am not able to put the body padding style "after core Bootstrap CSS and before Responsive CSS" as per Twitter Bootstrap docs. Here is the View Source HTML that I get from the main.gsp above <style type="text/css"> body { padding-top: 60px; padding-bottom: 40px; } .sidebar-nav { padding: 9px 0; } </style> <link href="/homes/static/bundle-bundle_bootstrap_head.css" type="text/css" rel="stylesheet" media="screen, projection" /> If there is no way to do this, I could always just drop the Grails Twitter Bootstrap Plugin and manually download Twitter Bootstrap and put it my Grails Project's web-app/css, web-app/images, and web-app/js. However, I would like to be able to use the Grails Twitter Bootstrap Plugin. Thank you very much in advance, I appreciate it!

    Read the article

  • Bootstrap-Switch options don't take effect

    - by Linda Keating
    I'm using Bootstrap-Switch and the documentation says that options can be passed as an object on initialization. enter link description here And here is a list of options: enter link description here So my code looks like this: var options = { onText: "Yes", onColor: 'primary', offColor: 'danger', offText: "No", animate: true, }; $("[name='radioGroup1']").bootstrapSwitch(options); And it all switch works fine, but none of the defaults are overwritten by the options. Anybody got any examples of how this might work? Thanks

    Read the article

  • How to make multiple segmented inputs in a single input group in Bootstrap

    - by metaculus
    This is how it is supposed to look like on Airbnb home page http://airbnb.com I have tried .input-group-addon and nest in it another <input> like so: <div class="col-lg-6"> <div class="input-group"> <input type="text" class="form-control"> <span class="input-group-addon"> <input type="text" id="nested-input" class="form-control"> </span> <span class="input-group-btn"> <button class="btn btn-default" type="button">Go!</button> </span> </div> </div> </div> And it didn't work. Does Bootstrap support this styling?

    Read the article

  • Twitter Bootstrap Ajax call error in dialog2.js

    - by naveen kumar
    We are using Twitter Bootstrap for my application. I have situation where I have to pull the data from server and show it to popup/model div. We are using dialog2.js for it but it does work. We not want to use .load functionality as we are not using any single url call. We want it to do with “URL” by ajax call and response send back to popup/model content area. We have tried following $('#proposalInDialog2').click(function(event){ var url="abc.do" $('<div/>').dialog2({title: "Goals-Based Proposal", content: url}); }); Please help us to to find out this, thanks

    Read the article

  • dynamic date formats in eyecon's Bootstrap Datepicker

    - by Jennifer Michelle
    I need to update my datepickers' date format (mm.dd.yyyy etc) using a select box. I am currently using Eyecon's Bootstrap Datepicker because it had the smallest files size that I could find (8k minified), and includes the date formats I need. I also tried to trigger date format changes in several other datepickers without any success. Fiddle: http://jsfiddle.net/Yshy7/8/ Is there an obvious way to trigger a change from the select box to the datepickers? //date format var dateFormat = $('#custom_date_format').val() || "mm/dd/yyyy"; $('#custom_date_format').change(function() { var dateFormat = $(this).val(); }); //start and end dates var nowTemp = new Date(); var now = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), nowTemp.getDate(), 0, 0, 0, 0); var checkin = $('.j-start-date').datepicker({ format: dateFormat, onRender: function(date) { //return date.valueOf() < now.valueOf() ? 'disabled' : ''; } }).on('changeDate', function(ev) { if (ev.date.valueOf() > checkout.date.valueOf()) { var newDate = new Date(ev.date) newDate.setDate(newDate.getDate()); checkout.setValue(newDate); } checkin.hide(); $('.j-end-date')[0].focus(); }).data('datepicker'); var checkout = $('.j-end-date').datepicker({ format: dateFormat, onRender: function(date) { return date.valueOf() <= checkin.date.valueOf() ? 'disabled' : ''; } }).on('changeDate', function(ev) { checkout.hide(); }).data('datepicker');

    Read the article

  • Diagnosing Bootstrap 3 Glyphicon Button Icons Not Showing

    - by Paulb
    I have a glyphicons in Bootstrap 3. They work very nicely here: latest Chrome latest Firefox latest Safari latest Explorer latest Android At one facility, the glyphicons don't show. The buttons come up blank. How do I troubleshoot? They are security sensitive there. I don't have systems or network access.. and am not in a position to request that. Troubleshooting with advanced tools isn't going to happen. Here's what I have access to: Internet Explorer 9 Behind a very secure firewall Sometimes, I think the glyphs not showing is the IE 9.. but my code should be addressing that. Sometimes, I think their firewall is blocking the CDN. Can I enter a URL into a browser to test if the CDN is there? Sometimes, I think my FB share and like buttons upset this facilty's firewall, and they tie the whole thing down. Any suggestions at how I begin to research this? Or maybe you have an outright idea for IE 9 and glyphs (though my code is very-very close to the demo's which work).

    Read the article

  • Twitter Bootstrap Navbar blocking svg viewBox

    - by user1167650
    I have a navbar fixed to the bottom and I have page that has a title and a giant svg (created by d3.js). I would like the svg to take up the entire screen (whatever is left over), but it always seems to have some part appear behind the bottom nav bar. I've tried: 1) using viewBox to auto-resize, setting the parent div and the svg to be block elements 2) adding padding-bottom to the body element But the svg still appears behind the navbar on wide screen monitors.

    Read the article

  • Bootstrap inline button dropdown within <p> jumbotron

    - by C.B.
    Currently I have a jumbotron setup with some paragraph text, and I would like to stick a button dropdown inline with the text. Dropdown button <span class="btn-group"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> Button... <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> <li><a href="#">Opt 1</a></li> <li><a href="#">Opt 2</a></li> </ul> </span> Jumbotron <div class="jumbotron"> <h1>Hello!</h1> <p>Welcome</p> <p>Another paragraph <!-- dropdown is here --> </p> </div> <!-- jumbotron --> If the dropdown is within the <p> tag, it does not "dropdown" (but renders). If it is outside of the <p> tag it functions fine, but I would like it to be inline with the text and need the text to be in the <p> tag to get the style. Any ideas? Things to note -- If I replace the <span> tags with <div> tags, it will work fine within the <p> tags, but won't be inline.

    Read the article

  • Bootstrap toggleable tag

    - by user1869816
    I am a newbies to bootstrap. I have tried to play with the code to make a page with toggleable tag. However, I have checked my code for many times but I still can't find the problem in my code. Would anyone help me, please? <div class="row"> <div class="tabbable"> <ul class="nav nav-tabs" id="tabs" data-tabs="tabs"> <li class="active"><a href="#having_a" data-toggle="tab">Having a</a></li> <li><a href="#having_b" data-toggle="tab">Having b</a></li> <li><a href="#having_c" data-toggle="tab">Having c</a></li> </ul> <!-- content of the tab --> <div class="tab-content" id="tab-content"> <div class="tab-pane active" id="having_a"> <p>a</p> </div> <div class="tab-pane" id="having_b"> <p>b</p> </div> <div class="tab-pane" id="having_c"> <p>c</p> </div> </div> </div> <script type="text/javascript"> jQuery(document).ready(function ($) {$('#tabs').tab(); }); </script> </div> <hr> <footer> <p>&copy;2012</p> </footer> </div> <!-- /container --> <!-- Le javascript ================================================== --> <!-- Placed at the end of the document so the pages load faster --> <script src="js/jquery.js"></script> <script src="js/bootstrap-transition.js"></script> <script src="js/bootstrap-alert.js"></script> <script src="js/bootstrap-modal.js"></script> <script src="js/bootstrap-dropdown.js"></script> <script src="js/bootstrap-scrollspy.js"></script> <script src="js/bootstrap-tab.js"></script> <script src="js/bootstrap-tooltip.js"></script> <script src="js/bootstrap-popover.js"></script> <script src="js/bootstrap-button.js"></script> <script src="js/bootstrap-collapse.js"></script> <script src="js/bootstrap-carousel.js"></script>

    Read the article

  • Is Bootstrap 2.1 compatible with jQuery UI?

    - by Ghopper21
    It's a known problem that the older Bootstrap didn't work out of the box with jQuery UI, as you can see from this github discussion. There are a few mashups of the two, including jQuery Bootstrap by John Seigers and jQuery UI Bootstrap by Addy Osmani. Are those mashups still necessary with the new version of Bootstrap, or can you now just use Bootstrap and jQuery UI out of the box (as is alluded to vaguely in the github discussion)?

    Read the article

  • Why is the Twitter Bootstrap "fixed" layout NOT fixed?

    - by leonel
    The Twitter Bootstrap site reads as follows: The default and simple 940px-wide, centered layout for just about any website or page provided by a single <div class="container">. Quote from http://twitter.github.com/bootstrap/scaffolding.html#layouts That's exactly what I have in my HTML but when I inspect the element, I see this CSS apply to it: .container, .navbar-fixed-top .container, .navbar-fixed-bottom .container { width: 1170px; } By the way, if I override that CSS rule by adding... div.container{ width:940px; } Then the elements inside the div.container are wider than the div.container itself and look out of place. So, why is the Twitter Bootstrap "fixed" layout NOT fixed? and how can I make it fixed?

    Read the article

  • bootstrap: Uncaught TypeError: Object [object Object] has no method 'tooltip', 'typeahead'

    - by DarkKnightFan
    I am trying to use the tooltip, typeahead, datepicker features of bootstrap. But I keep getting these errors in the console! Uncaught TypeError: Object [object Object] has no method 'tooltip' Uncaught TypeError: Object [object Object] has no method 'typeahead' This is how my imports look like: <link href="css/bootstrap.css" rel="stylesheet"> <link href="css/datepicker.css" rel="stylesheet"> <link href="css/bootstrap-responsive.css" rel="stylesheet"> <script type="text/javascript" src="js/jquery-1.8.0.js"></script> <script type="text/javascript" src="js/bootstrap.js"></script> <script type="text/javascript" src="js/bootstrap-datepicker.js"></script> <script type="text/javascript" src="js/bootstrap-typeahead.js"></script> <script type="text/javascript" src="js/highcharts.js"></script> <script type="text/javascript" src="js/exporting.js"></script> <link type="text/css" rel="stylesheet" href="css/jquery.dropdown.css" /> <script type="text/javascript" src="js/jquery.dropdown.js"></script> Some sample code: <a class="btn btn-success" data-toggle="modal" href="#payments" rel="tooltip" data-placement="top" title="Record your payments"> <i class="icon-check icon-white"></i> Payments</a> $("#payments").tooltip('show'); Similarly I have code for datepicker and typeahead. any solution?

    Read the article

  • Twitter Bootstrap TypeAhead to work like DropDown List / Select Tag with Autocomplete Feature

    - by Dinesh P.R.
    I want to have a DropDown List / < Select HTML Tag behaviour with AutoComplete Feature using Twitter Bootstrap TypeAhead. The link here achieves the feature of Combo Box where user can provide his own input also. I want to restrict the User to select only from the option provided. Is there any way to tweek the Twitter Bootstrap TypeAhead Plugin to emulate the behaviour of DropDown List / Tag with Autocomplete Feature. I have referred the Following question before posting Adding a dropdown button to Twitter bootstrap typeahead component

    Read the article

  • Navbar Dropdown in Bootstrap 3

    - by user2333842
    I recently started learning and using Bootstrap 3. I figured I would start with something simple- a header and a dropdown bar. I used the code from the Bootstrap website. I started out with the basic Bootstrap template, then added the bootstrap navbar. This is my code so far. <!DOCTYPE html> <html> <head> <title>WEBSITE NAME</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet" media="screen"> <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries --> <!--[if lt IE 9]> <script src="../../assets/js/html5shiv.js"></script> <script src="../../assets/js/respond.min.js"></script> <![endif]--> </head> <body> <h1>WEBSITE NAME</h1> <nav class="navbar navbar-default" role="navigation"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse navbar-ex1-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Tutorials</a></li> <li><a href="#">Software</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li><a href="#">Separated link</a></li> <li><a href="#">One more separated link</a></li> </ul> </li> </ul> <form class="navbar-form navbar-left" role="search"> <div class="form-group"> <input type="text" class="form-control" placeholder="Search"> </div> <button type="submit" class="btn btn-default">Submit</button> </form> <ul class="nav navbar-nav navbar-right"> <li><a href="https://twitter.com/"><span class="glyphicon glyphicon-comment"></span> Twitter</a></li> <li><a href="https://youtube.com/"><span class="glyphicon glyphicon-facetime-video"></span> YouTube</a></li> </ul> </li> </ul> </div><!-- /.navbar-collapse --> </nav> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="//code.jquery.com/jquery.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="js/bootstrap.min.js"></script> </body> </html> The dropdown menu is absolutely not working at all- hovering or clicking it. What do I need to do?

    Read the article

  • Simple html page using Bootstrap

    - by Athashri
    I am writing a simple HTML page using the Twitter Bootstrap. But the navbar and links are rendered as normal HTML on the browser. I have referred to multiple sites but the same steps are given everywhere. I am not sure where I am going wrong. Code: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <link rel= "stylesheet" href= "css/bootstrap.css" type="text/css"> <title> Bootstrap example</title> </head> <body> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="js/bootstrap.js"></script> <h1>Hello, world!</h1> <div class ="container"> <h1><a href="#">Bootstrap Site</a></h1> <div class="navbar"> <div class="navbar-inner"> <div class="container"> <ul class="nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Projects</a></li> <li><a href="#">Services</a></li> <li><a href="#">Downloads</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </div> </div> </div> </div> </body> </html>

    Read the article

  • POST from edit/create partial views loaded into Twitter Bootstrap modal

    - by mare
    I'm struggling with AJAX POST from the form that was loaded into Twitter Bootstrap modal dialog. Partial view form goes like this: @using (Html.BeginForm()) { // fields // ... // submit <input type="submit" value="@ButtonsRes.button_save" /> } Now this is being used in non AJAX editing with classic postbacks. Is it possible to use the same partial for AJAX functionality? Or should I abstract away the inputs into it's own partial view? Like this: @using (Ajax.BeginForm()) { @Html.Partial("~/Views/Shared/ImageEditInputs.cshtml") // but what to do with this one then? <input type="submit" value="@ButtonsRes.button_save" /> } I know how to load this into Bootstrap modal but few changes should be done on the fly: the buttons in Bootstrap modal should be placed in a special container (the modal footer), the AJAX POST should be done when clicking Save which would first, validate the form and keep the modal opened if not valid (display the errors of course) second, post and close the modal if everything went fine in the view that opened the modal, display some feedback information at the top that save was succesful. I'm mostly struggling where to put what JS code. So far I have this within the List view, which wires up the modals: $(document).ready(function () { $('.openModalDialog').click(function (event) { event.preventDefault(); var url = $(this).attr('href'); $.get(url, function (data) { $('#modalContent').html(data); $('#modal').modal('show'); }); }); }); The above code, however, doesn't take into the account the special Bootstrap modal content placeholder (header, content, footer). Is it possible to achieve what I want without having multiple partial views with the same inputs but different @using and without having to do hacks with moving the Submit button around?

    Read the article

  • WiX - create a bootstrap that passes arguments to the msi

    - by Dror Helper
    I need to create a bootstrap for my WiX project I've tried using setupbld.exe but it will only allow me to create an executable that will show my UI or one that will behave as a silent installer but not both. I need to be able to run the resulting executable with argument that will tell it wether or not to show the UI during installation. I've found this post by John Robbins that explains how to re-build the setup.exe stub used in the creation of the bootstrap but I was hoping there is a simpler way to do what I need. Does anyone know of a way to create a bootstrap that I use to run either as a simple (with UI) install or as a silent install.

    Read the article

  • WiX - create a bootstrap that passes arguments to the msiexec

    - by Dror Helper
    I need to create a bootstrap for my WiX project I've tried using setupbld.exe but it will only allow me to create an executable that will show my UI or one that will behave as a silent installer but not both. I need to be able to run the resulting executable with argument that will tell it wether or not to show the UI during installation. I've found this post by John Robbins that explains how to re-build the setup.exe stub used in the creation of the bootstrap but I was hoping there is a simpler way to do what I need. Does anyone know of a way to create a bootstrap that I use to run either as a simple (with UI) install or as a silent install.

    Read the article

  • Initializr Bootstrap. Knowledgebase. How to create and edit content?

    - by Idle Mind
    I am in the process of creating a knowledgebase website for my office and I find bootstrap pretty awesome. Now, people at work, which may not be HTML savvy, will be creating new articles and then posting them to this knowledge base. Is there something you can recommend that would allow such type of user to create a document on somthing similar to Microsoft Word but web based and then publish? Or do I have to write it from scratch? Thanks for any help.

    Read the article

  • Reduce size and change text color of the bootstrap-datepicker field

    - by Lisarien
    Programing an Android application based on HTML5/JQuery launching in a web view, I'm using the Eternicode's bootstrap-datepicker. BTW I'm using Jquery 1.9.1 and Bootstrap 2.3.2 with bootstrap-responsive. The picker is working fine but unfortunately I get yet two issues which I was not able to solve at this time: the picker theme is not respected and some dates are not readable (see the attached picture). Some there is css conflict such as the datepicker's font is displayed white on white background. I'm not able to reduce the size of the date picker field such as it holds on alone row. My markup code is: <div class="row-fluid" style="margin-right:0px!important"> <label id="dateId" class="span6">One Date</label> <div id="datePurchase" class="input-append date"> <input data-format="yyyy-MM-dd" type="text" /> <span class="add-on"> <i data-time-icon="icon-time" data-date-icon="icon-calendar"></i> </span> </div> </div> I init the datepicker by Javascript: $("#dateId").datetimepicker({ pickTime: false, format: "dd/MM/yyyy", startDate: startDate, endDate: endDate, autoclose: true }); $("#dateId").on("changeDate", onChangeDate); Do you get any idea about these issues? Thanks very much

    Read the article

  • Bootstrap 3.0.0: How to use data-slide-to outside of indicators?

    - by Griffin
    I am attempting to make a small gallery like the one shown below - I'm sure you've all seen them considering they are fairly common. When trying to make one using bootstrap I ran into a major problem. I can't seem to link the smaller bottom images to the larger top one that was when one of the smaller ones is clicked it changes to the selected image. I am attempting to use data-slide-to however it does not seem to work outside of the "carousel-indicators". I can't put it into the carousel indicators list because that moves the images up into the gallery (It may be possible to fix this with CSS but my attempts have been worthless). Does anyone know the problem? I've tried tags around each image that didn't seem to work then I tried divs. Still nothing. Things to note: I am using 3.0.0 All images are generated (if you haven't guessed already) Smaller images are separate from larger one (not auto scaled down)

    Read the article

  • Metro-Bootstrap + jQuery + Overscroll

    - by MikeParks
    Originally posted on: http://geekswithblogs.net/MikeParks/archive/2013/10/19/dashboard--metro-bootstrap--jquery--overscroll.aspxJust playing around with some jQuery. Pretty cool stuff :) Metro-Bootstrap: http://talkslab.github.io/metro-bootstrap/ Overscroll: http://www.azoffdesign.com/overscroll Dashboard Demo Apps App 1 App 2 App 3 App 4 App 5 App 6 App 7 App 8 App 9 App 10 App 11 App 12 App 13 App 14 Tweet

    Read the article

1 2 3 4 5 6 7 8 9 10 11 12  | Next Page >