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

Not familiar with bootstrap.

See the attached image. How can I make such alignment accordingly?

SnapShot.png
1. Make the text field closer to point #1
2. Make the submit button closer to point #2

<div class="form-group">
                                    <label class="col-sm-4 control-label">Primary Contact Number:</label>

                                    <div class="col-sm-5">
                                        <label class="control-label"><input type="text" class="form-control" id="print_send_mobile" autocomplete="off"  name="print_send_mobile" required>
                                    </div>

                                    <div class="col-sm-3">
                                        <label class="control-label"><input type="submit" class="btn btn-default yellowBg" value="Send Me Passcode">
                                    </div>
                                </div>

Open in new window


Thank you.
0
Free Tool: IP Lookup
LVL 9
Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

We did this bootstrap html site back in 2014.  I am not that familiar with bootstrap to try and figure out what happened but today, site is whacked out.  

http://www.wiplastic.com

I am trying to fix it.  Found references to css that was commented out and I removed the comments so now this test page is looking more like the site used to look but there are still problems.

1. Font is HUGE
2. Animation doesn't work
3. Right sidebar is pushed to bottom of page
4. footer messed up


http://www.wiplastic.com/test3.html
0
I just read the Bootstrap 4 is finally in beta. Is it okay to use Bootstrap 4 in productions?
0
Im working with ajax toolkit tabs it is working properly but when i am adding bootstrap css files the tabs css  overwrite
Can u Help me to SOlve this problem?
Thanks in advance
0
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
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
Google use beautiful fonts and colors. Does Google have an option to download and use its fonts and colors on personal websites?
0
How to show the calendar if using bootstrap, because i was try and the calendar won't show.
please help me.
0
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
On Demand Webinar - Networking for the Cloud Era
LVL 9
On Demand Webinar - Networking for the Cloud Era

This webinar discusses:
-Common barriers companies experience when moving to the cloud
-How SD-WAN changes the way we look at networks
-Best practices customers should employ moving forward with cloud migration
-What happens behind the scenes of SteelConnect’s one-click button

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
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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE
LVL 4
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

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
I am using Bootstrap and am looking for the best way to accomplish a design where I have three images that I want to appear:

  • As Three Across on a Wide Desktop Screen
  • As Two Across on a medium screen with the third centered below.
  • Stacked on a small screen.

I have attached an image that shows what I'm looking for.

I know how to get it to do three across for big and stacked for small, but I'm not sure how to design this so that it switches to Two and then One below for the medium.

A simple example would be helpful. Thanks.
bootstrap_example.png
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.