html5,twitter-bootstrap,css3 , boostrap & Normalize.css: spacing problems


boostrap & Normalize.css: spacing problems

Question:

Tag: html5,twitter-bootstrap,css3

Boostrap normalize does not seem to remove top and left/right spacing from theme i am developing. Could somebody give hint where is the problem in my code. I have tried several reset css files also without any effects.

Index

<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- GOOGLE FONTS -->
<link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<!-- /GOOGLE  FONTS -->
<link rel="stylesheet" href="css/bootstrap.css">


<link rel="stylesheet" type="text/css" href="css/flaticon.css">     

<!--do not edit-->
<link rel="stylesheet" href="css/style.css">
<!-- do not edit-->

<!-- add override css here-->
<link rel="stylesheet" href="css/mystyle.css">

<!-- Latest compiled and minified CSS -->

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<!-- Favicons  ================================================== -->
<link rel="shortcut icon" href="images/favicon.ico">

topbar-content

http://codepen.io/anon/pen/ZGJaVb


Answer:

As far as I see you have this style

.wrapper {
  border: 1px solid white;
}

Try to remove the border style. It should help you.


Related:


Prevent bootstrap 3 tab from stacking when window is resized (made smaller)


html5,css3,twitter-bootstrap-3
I have two tabs and I do not want them to stack when the window is resized. How do I do so? As shown below this is the code I've used to create my tabs. I don't understand why they would stack up when my window is resized. HTML Tab...

How to change my table based on screen size?


javascript,html,css,html5
I want to change my table so it would look nice on a mobile platform. All I want to do is change my table so it is two columns. I am using this code to send an email. So I cannot link a stylesheet to my html. It is recommended...

JSON.parse parsing a string into string


javascript,html5
I have confusion over the functionality of JSON.parse. I am writing code : dynamicMsgObj = '"rest, no disc"'; var jsonObj = {}; var isJsonString = function isJsonString(str) { try { jsonObj = JSON.parse(str); } catch (e) { return false; } return true; }(dynamicMsgObj); console.log(isJsonString);// returns true console.log(typeof jsonObj);//returns string How...

validation of AngularJS direcrives


angularjs,html5,html-validation
I read on W3C School that to make a valid HTML page I have to add data before each angular directive in HTML file (e.g.: <p>The name is <span data-ng-bind="firstName"></span></p> or <div data-ng-app="" data-ng-init="firstName='John'"> Ok that's fine. I have two questions: Should this prefix be used only for ng- directives?...

RequiredFieldValidator not working in my ASp site


c#,css,asp.net,twitter-bootstrap
I'm trying to learn some C# & asp, while creating a booking page in Visual Studio. I have faced a little problem with the RequiredFieldValidator, because when i click the button, nothing happens. I'm using the bootstrap css files to make in a little more shiny. Some code of the...

CSS - Bootstrap centering col-md-3 with weird results


css,twitter-bootstrap
I was having an issue center col-md-3 divs inside a wrapper. When I have 3 col-md-3 and use this code in my wrapper: .wrapper { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; } the results are great! but when I have...

How secure are HTML5 forms?


html5
<input id="user_lic" type="number" min="5" max="30" step="5" value ="5"/> Would someone be able to disable this min="5" statement and then submit the input with a negative value. Or for example bypass the type=number statement and enter a symbol...

Left and Right Carousel Controls not Working when Smooth Scroll for Anchor Tags Used


javascript,jquery,twitter-bootstrap,carousel
I am using the following script for smooth scroll effect for anchor tags: $(function() { $('a[href*=#]:not([href=#])').click(function() { if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { var target = $(this.hash); target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); if (target.length) { $('html,body').animate({ scrollTop: target.offset().top }, 1000); return false;...

Bootstrap toggle doesn't display well when added dynamically


javascript,jquery,twitter-bootstrap
I'm trying to add bootstrap toggle switch dynamically but it does not display well after adding it. Thanks for your help! <input id="TheCheckBox" type="checkbox" data-off-text="Yes" data-on-text="No" checked="false" class="BSswitch"> <p> <a class="btn btn-lg btn-primary" href="#">Display another Toggle</a></p> $('.btn').on('click', function () { $('p').after( '<input id="TheCheckBox" type="checkbox" data-off-text="Male" data-on-text="Female" checked="false" class="BSswitch">' ); });...

bootstrap center 3 col-md-3 divs


css,twitter-bootstrap
I have a wrapper like so: <div class="community-images"></div> and inside this wrapper I have 3 col-md-3 divs: <div class="col-md-3"></div> <div class="col-md-3"></div> <div class="col-md-3"></div> what I am trying to do is center these 3 divs inside the wrapper, how would I accomplish this ? Here is the CSS: .community-images { padding:...

how can I use 'localStorage' to store an entire page?


javascript,html5
I've been reading the book HTML in action and in chapter 5 it shows how to create a mobile application that can be runned even offline. My only doubt is: Can I do it for an entire page? and can you give me a simple but complete example on how...

AngularJS & Bootstrap Modal - loading template outside controller


angularjs,twitter-bootstrap,angular-bootstrap
I have a dialog which is being used in 3 scenarios within the same page. I have created a controller similar to the below: var modalInstance = $modal.open({ templateUrl: 'myModalContent.html', controller: 'ModalInstanceCtrl', size: size, resolve: { items: function () { return $scope.items; } } }); <script type="text/ng-template" id="myModalContent.html"> <div class="modal-header">...

How to prevent bootstrap from making font bold?


javascript,jquery,html,css,twitter-bootstrap
Without including the bootstrap link in this simple example, the following code performs as expected: Hovering over any word turns the word red, and hovering away returns it to black. With the bootstrap link included, the change from red/black still works fine, but for some reason, the font becomes bold...

MvcSiteMapProvider - Enhanced bootstrap dropdown menu


c#,twitter-bootstrap,asp.net-mvc-5,mvcsitemapprovider,mvcsitemap
I'm trying to build a menu like this: For reference I'm using this library https://github.com/behigh/bootstrap_dropdowns_enhancement @Html.MvcSiteMap().Menu("BootstrapMenuHelperModel") @model MenuHelperModel <nav class="navbar" role="navigation"> <div class="container-fluid menu-container"> <div class="collapse navbar-collapse"> <div class="navbar-header"> <span class="navbar-brand">FAR BACKOFFICE</span> </div> <ul class="nav nav-pills"> @foreach (var node in Model.Nodes) { if...

Load javascript in consecutive order after browser load event


javascript,jquery,html,html5,browser
What am I trying to do? In an attempt to speed up my website I am loading non-essential javascript after the browser load event. (So the JS files are not render blocking) This is currently functioning correctly. What is the problem? The problem is sometimes the non-essential javascript depends on...

Datepicker not showing days - Bootstrap


javascript,jquery,html,twitter-bootstrap,datepicker
I'm struggling with the answer to this, the reason I'm struggling is because the datepicker is working on one of my pages. Could an issue be that i'm loading a datatable at the same time as the datepicker? Because on the broken page, i'm loading the datatable which uses the...

Bootstrap 3 DatePicker - How to reset selected date without resetting the picker configuration?


jquery,twitter-bootstrap,datepicker
I'm trying to reset the selected date on button click, but so far I'm only able to clear the input element, without the actual date on the picker. The following code resets everything, including the configuration and the date, so its obviously not what I need. $('#datepicker').datepicker('update',''); //resets everything To...

change icon on collapse in Bootstrap 2.3 not in bootstrap 3


javascript,jquery,css,html5,twitter-bootstrap
I am using bootstrap 2.3 collapse in my project. I need to change icons on collapse means on show and hide I need to change icons. with bootstrap 3 some shown and hidden functions are showing in internet but I need with Bootstrap 2.3. Please let me know how to...

Redraw text over clearRect HTML5 Canvas


jquery,html5,canvas
I'm trying to draw text (HTML5 canvas) depending on what option is selected in a select element. It works correctly until there's 2 set of text that appears at the same place. It seems like the clearRect function is the issue. The text won't be redrawn over that cleared space....

Centering navbar pills vertically within the navbar using flexbox


html,css,twitter-bootstrap,flexbox
I am terrible at CSS so I am having trouble centering my <li> (navbar pills) vertically for my navbar. This navbar is from twitter bootstrap Here is the HTML for my navbar: <div class="container"> <nav class="navbar navbar-default navbar-fixed-top"> <ul id="nav_pills" class="nav nav-pills" role="tablist"> <li role="presentation"> <a href="/">About</a> </li> <li role="presentation">...

Move icon up and inline with my main heading


html,css,twitter-bootstrap
I'm trying to move around with my main icon in the top, which is placed in the navbar. I'm using bootstrap and a normal css file called "Site.css" In my masterpage i i'm getting the files down by these: <link href="Content/Site.css" rel="stylesheet" /> <link href="Content/bootstrap.css" rel="stylesheet" /> Some code: <div...

Show only the requested forms using JS


javascript,jquery,html,html5,forms
As the image below illustrates, I have two forms and two buttons. Currently all the forms are visible. How can I only show the requested form "according to the option they have selected (from the blue buttons on the top)"? So, if the user clicked on the "send an invite"...

Saving image to localstorage - canvas


javascript,html5,html5-canvas
I'm using html5 storage to store my image. It works great in chrome. In FireFox it works 8/10 times. function getBase64Image(img) { var canvas = document.createElement("canvas"); canvas.width = img.width; canvas.height = img.height; var ctx = canvas.getContext("2d"); ctx.drawImage(img, 0, 0); console.log("line 1 : " + img.src); var dataURL = canvas.toDataURL('image/jpeg'); console.log("line...

CSS drop down navigation


css,html5,css3,drop-down-menu,navigation
I'm sure this is something simple I'm missing... My drop down menu is opening within the main navigation, widening it. Here is a link to the page I'm working on. The issue is with the navigation below the App buttons. http://membershq.incentiveusa.com/AwardPages/GoalUp_Test2/index_test3.html# Here is my HTML: <div class="container-fluid"> <div class="section-title2 text-center">...

More modern image maps?


javascript,html,css,html5
With all the recent advances in JavaScript/HTML5 it would be nice to think there would be a more modern way of implementing an image map. I know you can set a map property for the tag but I don't think this supports nicely formatted tooltips on rollover (near the region)....

Content section overlap footer


html,css,twitter-bootstrap,css3,twitter-bootstrap-3
I have a a page as following that works fine in big screens but in small screens the mainsection overlap the footer. How can I have the footer always at the bottom of the page. Also in small screens the location of the footer should be based on content of...

End to end alignment of 3 Columns using Bootstrap


twitter-bootstrap
I am new to bootstrap. I tried aligning three sections end to end (horizontal manner) with equal space. (1st column should be aligned to extreme left of the container and last should be aligned to extreme right.) There is extra space at the third column. I have added bootstrap css...

Modal from inside Bootstrap Tabs using Knockout foreach


jquery,twitter-bootstrap,knockout.js,twitter-bootstrap-3
I have Bootstrap tabs bound to a KnockoutJS observable array using a foreach binding, which is working fine. I now want to launch a Bootstrap modal from inside the active tab. <div class="tab-content"> <!-- ko foreach: trueData --> <div class="tab-pane fade in" data-bind="css:{active: $index() == 0}, attr :{'id': 'tab' +...

Bootstrap Grid on the screen


twitter-bootstrap
I am new to Bootstrap. I just created a sample web app using layoutit.com. When I do the preview on the website, the columns are aligned properly. I used md-2 and md-10, thereby dividing the screen into 2 layouts with 2 and 10. The first column with 2 grids, starts...

How can I make a DIV element Fixed but non-Scaleable?


html,css,html5
Hopefully I'm asking this question right. Basically, I'm trying to implement a drop down menu into my design. I've been looking around for help coding it, since I'm still relatively new to HTML/CSS and found a few great tutorials that I have altered a bit to match what I have...

Setting up the page grid using push and pull


html,twitter-bootstrap,css3,twitter-bootstrap-3
I'm using Bootstrap and I'm having issues setting up my grid. How do I use bootstrap's push/pull to setup my columns as below? This is what I've got so far, <div class="row"> <div class="col-xs-5 col-sm-3 col-md-3">A</div> <div class="col-xs-7 col-sm-9 col-md-2 .col-md-push-7">B</div> <div class="col-xs-12 col-sm-12 col-md-7 .col-md-pull-9">C</div> </div> ...

How to make background body overlay when use twitter-bootstrap popover?


html,css,twitter-bootstrap
Currently I used this twitter-bootstrap popover: <button type="button" class="btn btn-default" style="margin-top:11px; padding-bottom:4px; padding-top:4px;" data-container="body" data-toggle="popover" data-trigger="focus" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> Upgrade The output: How I can make the background overlay like bootstrap modal? My expected output I use this jquery to popover $(function(){ $('[data-toggle="popover"]').popover({ placement...

Swap nav and div vertically uing CSS only


html,css,html5,css3
So I have a <nav> in my <header> tag and just below it I have a <div> which shows the date. Now the problem is, my design is in such a way that I cannot put the <div> for the date inside my <header>. However since I'm working with a...

How can you drop an image from your desktop into an editor and move it around?


javascript,html5,contenteditable
The default behavior when you drop something from your desktop to a textarea is that you will see the path to the image at the position where you dropped it. My end goal is to convert the local image as base64 and insert it at the drop position within the...

What is the semantic HTML tag to display for URLs that are not links?


html,html5,url,tags,semantics
I have a search engine plugin that outputs results in a basic structure: <a href="page url"> <div class="searchResult"> <h3>Page title</h3> <p>Page url</p> <p>Page <meta> description</p> </div> </a> The plugin is designed to integrate into an existing website so it has no default styling. However, websites are supposed to be usable...

jQuery & CSS only load after many refreshes


jquery,css,html5,internet-explorer,internet-explorer-11
If you open this page in IE11, the CSS and jQuery don't load: http://javasmart.gooberdev.com/ If you refresh the page once, maybe even twice, it still doesn't load. But if you hit F5 a bunch of times in succession, the CSS and jQuery finally load and the page displays correctly. This...

Bootstrap Modal popup not scrolling with keyboard


jquery,twitter-bootstrap
I'm using bootstrap modal, I added a scroll bar and it works fine with the mouse, but when I use the keyboard only the background page scrolls. What can I do to solve this. This is the css code that I'm using. .modal .modal-body { height: 520px; overflow-y: auto; }...

Border spacing between the columns


html,css,twitter-bootstrap
I have 3 columns in a row, each of which has the class col-xs-4 and so they cover up the entire row. Now I need to add border for each of these columns and I don't want them to overlap. Currently, am using border but there's no spacing between the...

Tagging values in HTML document for automated extraction


html,xml,html5
We have a series of documents that are being converted to HTML for web access. The documents are operating instructions that list actions people have to do as well as distinct requirements. We wanted to put a tag around each requirement so it can be automatically extracted using some code....

why i don't get return value javascript


javascript,jquery,html,json,html5
When i debug my code i can see i have value but i don't get value to createCheckBoxPlatform FN function createCheckBoxPlatform(data) { var platform = ""; $.each(data, function (i, item) { platform += '<label><input type="checkbox" name="' + item.PlatformName + ' value="' + item.PlatformSK + '">' + item.PlatformName + '</label>' +...

How to fit the title to the entire page


html,css,twitter-bootstrap
I'm trying to fit this title to the entire page. For some reason, there is a padding around the text that's not allowing me to fit it. I set the padding of the column (Bootstrap) to 0, but that doesn't seem to help. As soon as I increase the font-size...

How to make my nav bar responsive


html5,css3,media-queries
I would like to use media query to make my navbar responsive. @media screen and (max-width: 600px) { .nav-wrap { position: relative; min-height: 40px; } .nav-wrap ul { position: absolute; } .nav-wrap li { display: none; /* hide all <li> items */ margin: 0; } .nav-wrap .current_page_item { display: block;...

Calling AngularJS function from a remote page loaded by Bootstrap modal


javascript,angularjs,twitter-bootstrap
I use Bootstrap 3 modal component to load a remote form, in which I define an Angular controller and several functions. But the browser said "Tried to Load Angular More Than Once". Main page: (omitted: ng-app="manageAppCollections", ng-controller="manageAppController") <button type="button" class="btn btn-success" ng-href="./appConfForm" data-toggle="modal" data-target="#saveModal">Add an App</button> <div id="saveModal" class="modal inmodal...

Bootstrap 'form-group has-error' not working with php codes [closed]


php,html,twitter-bootstrap
Inputs don't turn red and does not print the error messages when I'm submitting empty fields. How can I show the error messages and make the input boxes turn red when I'm sending empty fields with this code. <?php if ( !empty($_POST)) { require 'db.php'; // validation errors $fnameError =...

Using Aria to make a div table accessible


html,html5,wai-aria
Context: I have a div table that a client wants to be screen reader accessible like a regular html table is using the table commands Problem: Cant get aria to work to announce the header with the row value to keep the integrity intact with the data. Solutions: Only using...

after puttin php syntax, my website get stuck at preloader


php,twitter-bootstrap,session
I have this code on my php file for navbar: <?php if(!$session->is_logged_in()) { echo ' <a href="login.php" role="button" aria-expanded="false"> Login <span class="label"> login to system</span> </a> </li>';} else { echo ' <a href="#!" class="dropdown-toggle" role="button" aria-expanded="false"> ' . $session->user_name; . '<span class="badge bg-default">2</span> <span class="caret"></span> <span class="label">it is you</span> </a>';...

Teechart HTML5, line color and thickness


javascript,html5,teechart
How do you change the line color and thickness of a series in Teechart HTML5. I have been looking through the examples, but i can't find anything describing that....

Regex not working in HTML5 pattern


regex,html5
So I have this regex intended to let pass all text but those that contain as initial chars the "34" sequence: ^(?!34)(?=([\w]+)) The regex is working fine for me in https://regex101.com/r/iN1yN3/2 , check the tests to see the intended behavior. Any Idea why it isn't working in my form? <form>...

Owl Carousel implementation


jquery,twitter-bootstrap,carousel,owl
I can't use the Owl Carousel 2 I would like to use. I think it has something to do witht the files I have connected to my html but there might be a another problem. Do I even have the right files? This is my HTML so far. I already...