Bootstrap

Bootstrap is a free and open-source collection of tools for creating websites and web applications. It contains HTML- and CSS-based design templates for typography, forms, buttons, navigation and other interface components, as well as optional JavaScript extensions. It aims to ease the development of dynamic websites and web applications. Bootstrap is a front end web framework, that is, an interface for the user, unlike the server-side code which resides on the "back end" or server.

Share tech news, updates, or what's on your mind.

Sign up to Post

Take a look at the screenshot below and notice how the word "hello" is hanging off to the right hand side...

screenshot
It only occurs in Landscape mode. Otherwise, it's centered beneath the rest of the content like you would expect of a footer.

It will look OK when I just have the word "hello" in place. As soon as introduce a line break, it gets kicked off to the side.

Why? And how can I fix it?

Here's my code:

<html>
<head>
<title>NEX Transport Employees - EZOnlineRegistration</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
	html, body {
		margin: 0px;
		padding:0px;
		font: 14px sans-serif;
		height:100%;
		background:#eaad02;
		background: -webkit-linear-gradient(#eaad02, #ffe39a); /* For Safari 5.1 to 6.0 */
		background: -o-linear-gradient(#eaad02, #ffe39a); /* For Opera 11.1 to 12.0 */
		background: -moz-linear-gradient(#eaad02, #ffe39a); /* For Firefox 3.6 to 15 */
		background: linear-gradient(#eaad02, #ffe39a);
		min-height: 100%;  /* Fallback for vh unit */
		min-height: 100vh; 
	}

	h4 {
		margin: 10px 0;
		color: #1823a0;
	}
	
	.container {
		height:100%;
		display:flex;
		justify-content: center;
		align-items: center;
		flex-flow:column wrap;
		flex-direction:column;
	}
	
	.content {
		max-width:625px; 
		border:1px solid #7b5b01;
		-moz-border-radius: 14px 14px 14px 14px; 
		border-radius: 14px 14px 14px 14px; 
		box-shadow:7px 7px 10px #7b5b01;
		display:flex;
		

Open in new window

0
[Live Webinar] The Cloud Skills Gap
LVL 4
[Live Webinar] The Cloud Skills Gap

As Cloud technologies come of age, business leaders grapple with the impact it has on their team's skills and the gap associated with the use of a cloud platform.

Join experts from 451 Research and Concerto Cloud Services on July 27th where we will examine fact and fiction.

Hello, with my code below I'm attempting to center my form in a div, when I do so the glyphicons stay left aligned and do not stay with the input control which do center align. How do I get this to work correctly?

 <div class="text-center">
                    <form action="" id="loginForm">
                        <div class="form-group input-group">
                            <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
                            <input class="form-control" type="text" name='username' placeholder="username" />
                        </div>
                        <div class="form-group input-group">
                            <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
                            <input class="form-control" type="password" name='password' placeholder="password" />
                        </div>
                        <div class="form-group">
                            <button type="button" class="btn btn-def">Login</button>
                        </div>
                        <input hidden id="hdnUserEnviroment" />
                    </form>
                </div>

Open in new window

0
Hello all,

I have a form that has three check boxes. I would like to use bootstrap validation for the user to check at least one check box from those three check boxes. I have found solutions that requires you to change the name of the check boxes to the same name. But I want to keep my check boxes just the way they are.

here is the check boxes I am using:

<div class="col-md-5">
 
  <h4>Scope <span class="style1"> *</span></h4>
    <label class="radio-inline" for="scope_fac">
   
      <input name="scope_fac" type="checkbox" id="scope_fac"  value="Y">
      Faculty
    </label>
    <label class="radio-inline" for="scope_staff">
      <input name="scope_staff" type="checkbox" id="scope_staff"  value="Y">
      Staff
    </label>
    <label class="radio-inline" for="scope_stu">
      <input name="scope_stu" type="checkbox" id="scope_stu"  value="Y">
      Students
    </label>
    <label class="radio-inline" for="scope_public">
      <input name="scope_public" type="checkbox" id="scope_public" value="Y">
      Public
    </label>
  </div>

The name of my form is "form1". So again all I want is to use bootstrap code to make the user to at least check on of the boxes.

My script begin and end is this:

<script type="text/javascript">
$(document).ready(function() {
    $('#form1').bootstrapValidator({
        message: 'This value is not valid',
       
        fields: {



});
</script>
0
Hi,

My router not connect to the internet VDSL. DHCP not workint too(the principal problem).  
The command "ip route" not exist!
Configuration:

CISCO881-SEC-K9
ROM: System Bootstrap, Version 12.4(22r)YB5, RELEASE SOFTWARE (fc1)

Running:


Current configuration : 1856 bytes
!
! Last configuration change at 14:20:53 UTC Wed Feb 6 2036
! NVRAM config last updated at 14:21:01 UTC Wed Feb 6 2036
! NVRAM config last updated at 14:21:01 UTC Wed Feb 6 2036
version 15.1
no service pad
service timestamps debug datetime msec
service timestamps log datetime msec
no service password-encryption
!
hostname Router
!
boot-start-marker
boot-end-marker
!
!
enable secret 4 tnhtc92DXBhelxjYk8LWJrPV36S2i4ntXrpb4RFmfqY
!
no aaa new-model
!
memory-size iomem 10
crypto pki token default removal timeout 0
!
!
ip source-route
!
!
!
!
ip dhcp pool DSL_DHCP
 import all
 network 10.0.0.0 255.255.255.0
 dns-server 189.40.220.41 8.8.8.8
 default-router 10.0.0.1
!
!
ip cef
ip name-server 189.40.220.41
ip name-server 8.8.8.8
no ipv6 cef
!
!
multilink bundle-name authenticated
license udi pid CISCO881-SEC-K9 sn FTX1648819M
!
!
!
!
!
!
!
!
!
!
!
!
!
interface FastEthernet0
 no ip address
!
interface FastEthernet1
 no ip address
!
interface FastEthernet2
 no ip address
!
interface FastEthernet3
 no ip address
!
interface FastEthernet4
 description DSL interface
 no ip address
 duplex auto
 speed auto
 pppoe-client …
0
Experts,

I am new to JS and jQuery. I have learned that you need jQuery in the code below to run a modal button.

For the most part, the below code works. What I am trying to accomplish is when you select the set of three @text modal buttons I would like for the end user to see the recipient field filled with testuser@cbatest.com and message field blank. What ultimately I want is for when the end-user hits submit, it actually sends the email with the above test account to the recpeint field and the message the end-user puts.

Can you show me how this is done?

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta name="robots" content="noindex, nofollow">
  <meta name="googlebot" content="noindex, nofollow">

<script type="text/javascript" src="https://code.jquery.com/jquery-git.js"></script>

    <link rel="stylesheet" type="text/css" href="/css/result-light.css">
    
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    
  

<style type="text/css">
    * {
  box-sizing: border-box;
}

#myInput {
  background-image: url('/css/searchicon.png');
  background-position: 10px 12px;
  background-repeat: no-repeat;
  width: 100%;
  font-size: 16px;
  padding: 12px 20px 12px 40px;
  border: 1px solid #ddd;
  margin-bottom: 

Open in new window

0
---> Attempting to connect to administrative share '\\IBL1FA03P.idsgrp.mpls.com\admin$' using account 'IDSGRP\BLRADMIN'      SMS_CLIENT_CONFIG_MANAGER      7/5/2017 5:53:20 PM      3720 (0x0E88)
---> The 'best-shot' account has now succeeded 3 times and failed 0 times.      SMS_CLIENT_CONFIG_MANAGER      7/5/2017 5:53:20 PM      3720 (0x0E88)
---> Connected to administrative share on machine IBL1FA03P.idsgrp.mpls.com using account 'IDSGRP\BLRADMIN'      SMS_CLIENT_CONFIG_MANAGER      7/5/2017 5:53:20 PM      3720 (0x0E88)
---> Attempting to make IPC connection to share <\\IBL1FA03P.idsgrp.mpls.com\IPC$>      SMS_CLIENT_CONFIG_MANAGER      7/5/2017 5:53:20 PM      3720 (0x0E88)
---> Searching for SMSClientInstall.* under '\\IBL1FA03P.idsgrp.mpls.com\admin$\'      SMS_CLIENT_CONFIG_MANAGER      7/5/2017 5:53:20 PM      3720 (0x0E88)
---> System OS version string "6.1.7601" converted to 6.10      SMS_CLIENT_CONFIG_MANAGER      7/5/2017 5:53:21 PM      3720 (0x0E88)
---> Unable to connect to WMI (root\ccm) on remote machine "IBL1FA03P.idsgrp.mpls.com", error = 0x8004100e.      SMS_CLIENT_CONFIG_MANAGER      7/5/2017 5:53:21 PM      3720 (0x0E88)
---> Creating \ VerifyingCopying existence of destination directory \\IBL1FA03P.idsgrp.mpls.com\admin$\ccmsetup.      SMS_CLIENT_CONFIG_MANAGER      7/5/2017 5:53:21 PM      3720 (0x0E88)
---> Copying client files to \\IBL1FA03P.idsgrp.mpls.com\admin$\ccmsetup.      SMS_CLIENT_CONFIG_MANAGER      7/5/2017 5:53:21 PM      3720 (0x0E88)
---> Copying file "C:\Program Files\Microsoft Configuration Manager\bin\I386\ccmsetup.exe" to "ccmsetup.exe"      …
0
Google use beautiful fonts and colors. Does Google have an option to download and use its fonts and colors on personal websites?
0
I can not understand why the "list-group panel" does not line up with the text on the first row.  I assumed the grid design would be very easy to implement, I am finding it more challenging than I thought it would be.  Any help would be appreciated.

Please reference https://jsfiddle.net/Spleendrivel/h69gtxzy/   (it will take awhile to load because of the js and css bootstrap code included.)

I have tried adjusting the size of the column in line 26 and 56
0
Let me explain you clearly what I am trying to achieve :

I have a form in which the user fills up details of the work/job along with the location and then submits the form when completed. The moment Submit button pressed, based on job location, mail will be sent to all the persons residing on that location with the message  :

There is an offer for you. If anybody is interested kindly revert back by clicking on the link Offer Accepted.

Link is created using mailto { <a href="mailto:xxx@email.com">Offer Accepted</a> }.
Once the user clicks on the link, mail will revert back to the sender.

Here at this point, I want to transfer this value "i.e email address of the applicant" within the mail inserted into the database automatically.

How will I achieve this in php. Please help
0
How to show the calendar if using bootstrap, because i was try and the calendar won't show.
please help me.
0
Free Tool: Path Explorer
LVL 9
Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

I use a Windows 7 Pro ISO which has been built with updates all the way up to May 2016 so I can roll updates out all together which saved a lot of time when rebuilding PCs.

There is one machine where the BIOS simply ignores the fact that there is a bootable disc inserted. Other discs work, even a base Windows 7 Pro SP1 ISO works, but the drivers on the disc aren't compatible with the board or USBs so the keyboard and mouse do not work. Windows 10 discs are also seen but Windows 7 Pro is needed in this case. I've checked BIOS settings and even disabled boot from HDD and NIC and nothing seems to have worked.
0
I have a SharePoint 2016 Server hosted in Azure.  Does anyone have any knowledge or links about adding bootstrap support here?
0
0
I am building a simple form using Bootstrap in which I am facing some layout issues related to spacing. This is how the form looks like
UI Issues
1. There is lots of space between the label and fields. For instance, in the above image empty space between label and name field is highlighted. I would like to increase the width of input field so that the space reduces. Further, Radio buttons in the options section are further to the left as compared to the name and other fields. I am not able to make out why that is the case

2. I would like to get rid of the vertical space between 2 fields. For instance, there is a space between author and IP fields. I would like them to be closed together. Again, not able to make out the reason.

This is the fiddle I have created to reproduce  the problem - https://jsfiddle.net/sbcobqz9/3/

Any help is much appreciated.
0
So I use the following to hide a display none div.
How can I "overload" this function in a sense to also swap out the clicked glyph.
make sense ?

var showhide = function(v_eleid){ 
  var o_ele = document.getElementById(v_eleid); 
  if (o_ele){ 
    if (o_ele.style.display == 'none'){ 
      o_ele.style.display = 'block'; 
    } else { 
      o_ele.style.display = 'none'; 
    } 
  } 
}

Open in new window


and in the html <a href="#" onclick="showhide('targetDIVpane');" > click event text link [ bootstrap icon here]</a>

<div id="targetDIVpane" style="display: none;"> content meat goes here </div>
0
I was making up a layout and got stucked while making up this image. What I have done till now is that I have inserted an image onto the background for background but confused how to get that group of profile pictures below it in same style and also show "+8" for more images. I am sure things will be done with js.This is the required layout i needed  Any help would be appreciated.
0
I am working up on this layout got it done till this much What I have made till now and have to reach at this placeRequired layout.

I am unable to get that profile picture in hexagonal shape. And secondly to get those tabs in the same style as the required picture. Also that navbar in somewhat different style as mine. Any help would be appreciated.

Here is my Code:
<style type="text/css">
.profile-widget {
  background: url(images/profile-widget-bg.jpg) no-repeat 0 0;
  background: position: cover;
  width: 250px;
  border-radius: 3px;
  padding: 15px;
}
.profile-widget img {
  border: 8px solid white;
  border-radius: 70px;
  float: left;
  width: 150px;
  margin-top: -170px;
}
.profile-widget {
  font-size: 11px;
  font-family: Verdana, Geneva, sans-serif;
  display: inline-block;
  color: #fff;
  margin-left: 350px;
}
.profile-widget:after {
  content: " ";
  display: table;
  clear: both;
}
.tabs{
    margin-left: 20px;
    margin-top: 20px;
}
</style>

<div class="container">
    <div class="row">
        <div class="col-sm-12" style=" margin-left: 100px; margin-top:-20px;">
            <img src="/cabme/2/1.jpg" width="904" height="336" />
                    <nav class="navbar navbar-default" style=" margin-right: 235px">
<div class="tabs">
<a href="">Sarah Cruiz</a>&emsp;&emsp;&emsp;&emsp;
<a href="c">Timeline</a>&emsp;&emsp;&emsp;&emsp;
<a 

Open in new window

0
I was making up a layout and got stucked while making up this image. I am confused how to get that profile picture and user name and other text along with that cover pic onto that rectangle. Any help would be appreciated.wqwqwq.png
0
I don't know what I'm doing wrong here but I expect it's something silly.

I'm using Bootstrap and I cannot get the toggle to work. Button appears but on clicking button inside menu doesn't appears.
<nav class="navbar navbar-default navbar-fixed" data-spy="affix" data-offset-top="20">
  <div class="container-fluid">
  <div class="navbar-header">
         <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    <a class="navbar-brand" href="index.php"><b>Title</b></a>
  </div>
  <div class="collapse navbar-collapse" id="navbar-collapse">
    <ul class="nav navbar-nav">
      <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#" id="home"><b>Home</b></a>
      </li>
      <li>
        <a href="#" data-toggle="modal" name="link" data-target="#myLoginModal"><b>Submik</b></a></button>
      </li>
      <li>
        <a href="#" data-toggle="modal" data-target="#myLoginModal"><b>Sub2</b></a>
      </li>
    </ul>
</div>
</div>
</nav>

Open in new window

0
What does it mean to be "Always On"?
LVL 4
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

I need help with the following code:
<section ng-init="getPlanAreas()">
  <div class="panel panel-primary">
    <div class="panel-heading">
      <h4 class="text-center">Plan Area Details</h4>
    </div>
    <div class="panel-body">
      <div class="col-lg-12">
        <table class="table table-condensed table-bordered">
          <thead>
          <tr>
                <thead style="background-color: #E0E0E0;">
                <th style="padding-left: 15px;">Plan Area</th>
                <th>Total Tasks</th>
                <th class="text-center" ng-repeat="row in monthMaxDays">{{row.name}}</th>
                <th class="text-center" width="60">Total Hours</th>
                </thead>
          </tr>
          </thead>
          <tbody class="summary-body">
          <tr ng-repeat-start="planArea in planAreas">
            <td style="vertical-align: middle;" ng-click="planToggle(planArea);">
              <a href="">
                <i ng-if="planArea.isCollapsed" class="fa fa-plus" aria-hidden="true"></i>
                <i ng-if="!planArea.isCollapsed" class="fa fa-minus" aria-hidden="true"></i>
              </a> {{planArea.name}}
            </td>
            <td align="center">{{planArea.countActivity}}</td>
            <td colspan="12"></td>
            <td class="text-center">{{planArea.totalHours}}</td>
          </tr>
          <tr ng-repeat-end uib-collapse="planArea.isCollapsed">
            <td colspan="15">
              <table class="table 

Open in new window

0
I would like to open webpage that like modal. but it is going to be web link but the bootstrap. Basically, open webpage (http://www.google.com) and grey out the background.
0
I have two distinct modules in an Angular app, a parent and a child. They both also have distinct default routing HTML pages. The Parent router has one basic router-outlet setup. However for the Child default route, I have a bootstrap side menu and another router-outlet.

When I go to the Child Module section, the side menu is appearing, however it looks like the Parent router-outlet is being utilized. I've searched for several hours for a resolution to this issue, but cannot find one. Each module (Parent and Child) has their own routing files and modules. And each module file has a distinct reference to a specific HTML initial routing page.

I'm sure this is something simple and stupid (which these things usually are), but any help would be appreciated. The angular.io documentation is so bad that finding anything that falls outside the realm of the 'Hero' demo is a waste of time.

Thanks!
0
Hi,

I have a site with 2 navbars:
On loading the page you only see the first navbar (.first).
The first navbar should go away when the user scrolls down and a second navbar (.navbar) should appear and remain fixed at the top.  
This part works perfectly: http://jsfiddle.net/044b4sjs/31/

What I can't manage to do is the following:
On screens smaller than 768 pixels (tablets/mobile) I would like to ONLY show the second fixed navbar and never the first navbar with its scroll effect.  Only the second navbar should be visible on load and when scrolling.

In other words I would like to imitate the behaviour of this site: https://blog.leevia.com/  When you scroll down the navbar changes.  When you scroll back to the top the first big navigation bar appears.  On smaller screens you only see the second navbar.

Please let me know.

Regards,
Laurent
0
HTML
<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Bootstrap Example</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
		<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
		<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
		<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.min.css" rel="stylesheet"/> 
		<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.min.js"></script> 
	</head>
	<style type="text/css">
		.table {
			margin: 0 auto;
			width: 50%;
			/*opacity: ;*/
		}
	</style>
</head>
<body>
	<form class="form-horizontal" name="form" role="form" method="post" action="" onclick="validator()">
	<center>
	<table class="table">
		<thead>
			<tr>
				<th>Enter Field Name<span class="label label"> <td><input id="new-state" type="text" placeholder="Field Name "/>
						</td></span></th>
				<td><button type="button" id="btn-add-state">ADD</button></td></tr>
			<tr>
				<th>Select Field Name <span class="label label"> <td>
							<select id="state" class="selectpicker" type="text" 

Open in new window

0
I am trying to convert an html file to a pdf document that will ultimately be emailed to several parties.  I am using phantomjs to render the dynamic html document to '/dev/stdout' to ultimately get attached to an email that will be sent out to multiple individuals.  The code involved in this scenario is outlined below:

//This is the capture.js file
var webPage = require('webpage');
var system = require('system');
var args = system.args;
var page = webPage.create();

if (args.length === 1) {
  phantom.exit(0);
} else {
	page.viewportSize = { width: 600, height: 600 };
	page.paperSize = { format: 'Letter', orientation: 'portrait', margin: '1cm' };
	page.open("http://localhost:3000/salesorder/" + args[1], function start(status) {
	  if (status === 'fail'){
		  phantom.exit(1);
		  return;
	  }
		
	  page.render('/dev/stdout', { format: 'pdf' });
	  phantom.exit();
	  return;
	});
}

Open in new window


//here is the code that reads '/dev/stdout, to retrieve the generated pdf'
function(resolve, reject) {
            	var childArgs = [
            		  path.join(__dirname, '../phantomservice/capture.js'),
            		  id
            		];

          		childProcess.execFile(phantomjs.path, childArgs, {maxBuffer: 1000*1024}, function(err, stdout, stderr) {
          			if (err){
          				reject(err);
          			}
          			
          			resolve(stdout);
          		});
            }

Open in new window


var mailOptions = {
		    from: fromaddress, // sender address
		    to: toaddresslist, // list of receivers
		    subject: subject, // Subject line
		    html: text
		};
		
		if (attachments){
			mailOptions.attachments = [
		        {   // binary buffer as an attachment
		            filename: 'invoice.pdf',
		            content: new Buffer(attachments),
		            contentType: 'application/pdf',
		            encoding: 'base64'
		        }
		    ];
		}

Open in new window


Here are the issues I am having:

1) When I send the file to stdout, I am getting a three page blank document, what could be causing this to happen and how can I fix it?
2) As an experiment, I wrote the file to a pdf file and reviewed the file.  In this case I got back the document, but I did not see the page populated with data from the database; the population occurs using jquery.
3) I am using bootstrap, and in the case where I am printing to a file; the formatting is way out of whack, it is treating the document as if it belongs on a tablet or phone because it appears to stack the document items as opposed to making them appear as they are on the webpage.  Wht can be done to fix this?  

This is a node.js app using bootstrap and currently running on my local mac os x laptop.  Any help would be greatly appreciated.
0

Bootstrap

Bootstrap is a free and open-source collection of tools for creating websites and web applications. It contains HTML- and CSS-based design templates for typography, forms, buttons, navigation and other interface components, as well as optional JavaScript extensions. It aims to ease the development of dynamic websites and web applications. Bootstrap is a front end web framework, that is, an interface for the user, unlike the server-side code which resides on the "back end" or server.