Go Premium for a chance to win a PS4. Enter to Win

x

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

Hello i am new to gulp and i am trying to cache bootstrap css.
Gulp documentation is not very good, so any help would be appreciated !
0
Free Tool: Path Explorer
LVL 11
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.

Scenario:
<form id="a">
Form collecting data (Name, Email, Address)
Submitting to Firebase
</form>

<form id="b">
Upload field to send file to Dropbox
</form>

Using:
Jquery, Bootstrap
Firebase

Not tied to any of these if suggested to change.


1. Added Form with fields ( in a <form> ) container
2. click submit to add to firebase
This works

3. Added a second <form> to hold the upload control
4. Added javascript to upload to dropbox
5. Has a "add files" button to add the files (javascript also located in main.js)
This does not work.  No errors, just does not fire. No console responses either.

I'm thinking maybe they need to be combined into 1 <form>??  Partial code below.

HTML for uploader
<section class="container main">

    <form onSubmit="return uploadFile()">
        <input type="file" id="file-upload" />
        <button type="submit">Add Files</button>
    </form>

    <!-- A place to show the status of the upload -->
    <h2 id="results"></h2>
</section>
            </div>
        </div>
    </div>
    <script src="https://www.gstatic.com/firebasejs/4.5.0/firebase.js"></script>
    <script src="main.js"></script>

Open in new window


Javascript for uploader
function uploadFile() {
    var ACCESS_TOKEN = 'abababababTHISISAFAKEACCESSTOKENababababababab';
    var dbx = new Dropbox({
        accessToken: ACCESS_TOKEN
    });
    var fileInput = document.getElementById('file-upload');
    var file = fileInput.files[0];
    dbx.filesUpload({
            path: '/testLFL' + file.name,
            contents: file
        })
        .then(function (response) {
            var results = document.getElementById('results');
            results.appendChild(document.createTextNode('File uploaded!'));
            console.log(response);
        })
        .catch(function (error) {
            console.error(error);
        });
        
    return false;
}

Open in new window

0
I am getting an error in MDT while capturing the custom image. Settings looks ok, connection is fine. I am able to get to the share from the reference machine. MDT 2013 and Reference machines (windows 10) are not part of domain. Can you please tell me if rules and bootstrap looks ok?

Error:
A connection to the deployment share could not be made. connection Ok . Possible cause:invalid credentials.

UNC path :\\192.168.101.1\Deploymentshare$\

these are the rules:
[Settings]
Priority=Default
Properties=MyCustomProperty

[Default]
OSInstall=Y
SkipCapture=NO
SkipAdminPassword=YES
SkipProductKey=YES
SkipComputerBackup=YES
SkipBitLocker=NO

Bootstrap:

[Settings]
Priority=Default

[Default]
DeployRoot=\\192.168.101.1\DeploymentShare$
0
I'm using bootstrap-select for a few select items, I'm wanting to use a tooltip when someone clicks on the select. I have the code to show when the select is clicked but I want to insert the title into the jquery.

<div class="form-group">
  <label>My Select: </label>
    <select class="bootstrap-select" data-width="100%" id="myselect">
      <option value="1" selected>1</option>
      <option value="2">2</option>
    </select>
</div>


$('#myselecet').on('shown.bs.select', function (e) {
  $('#myselect').tooltip('show');
});
0
I'm looking to handle the validation of a particular form in a more programmatic way, but I'm struggling with it.  

I have static inputs for 15 rows of first and last names, so 30 total text inputs.  I'll just use two rows in my example, so hopefully that'll cut down on the post length.

The example I'm posting below is what I ended up going with out of frustration, and it's not even totally what I need.  
Here are the rules to the validation that I'm looking for:
  • Must have at least one entry of a first and last name.  It does not matter which row this entry is on.  If someone enters a first and last name on row 2 instead of row 1, it should not show row 1 as being in error.  The form would be valid under this condition.
  • If a user clicks submit on a blank form, the error message is only shown under the first row of input vs. all inputs
  • If a row has a first name, the last name is required. If a row has a last name, the first name is required.
  • If a user deletes an entry in it's entirety, the first and last names in this row should no longer be required.

It is not an option for me to include a way for users to dynamically add additional inputs as needed. I have to go the static route.  Compatibility with older browsers is a concern, but not to the degree of switching to server-side validation methods. I'm using jQuery 2.2.4 if that helps.

Here are some methods I tried and failed to implement:
0
This is so simple but I can't find how to do it. I want to make 3 images and description appear on the same row inside a DIV, but I've tried several times and I get them BUT LIKE A LIST, one below each other !
I would like :

Image text                    image text                   Image text
           more  text                     more text


<div class="row">
  <div class="col-sm-12">
  </div>
</div>
0
Can I have one MODAL with several buttons and just change the MODAL-BODY ? Right now I have :

     <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">Q & A</button>         

    <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-body">
                            <p>This is a test</p>
      </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>

But I would like to have that same modal, and then be able to send the modal-body according to the button that was pressed. I want to do this to avoid writing a modal per button (coding would be too long and I just want to modify the modal content.
Ex, Button 1 - modal this is button 1 content
Button 2 - modal this is button 2 content
Button 3 - modal this is button 3 content
etc...
0
Hi, I am using bootstrap treeview , I would like to know how I can add node dynamically at run time. means users should able to add any node.

any help will be highly appreciated.

Regards,

Aamir
addNodes.png
0
i have to represent no of device for each status(new,paired,blocked..etc) in the charts.
i want use  jquery and bootstrap with out using CanvasJS
please provide example of donut charts
0
Hi,

My app use Cflayout border and cflayout tabs inside one of the panel and i use bootstrap for responsive.

In CF9/10 my app works fine, when i resize browser window, the content of tab adapt and responsive works fine, in CF2016 no :/

Here is the code.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    
		<cflayout name="layoutTest" type="border" fittowindow="yes" >
			<cflayoutarea name="left" position="left" collapsible="false" splitter="false" minSize="500" size="500"/>

			<cflayoutarea name="center" position="center" >
				<cflayout type="tab" align="center" name="tabLayout"  tabposition="top"  tabstrip="false">
					<cflayoutarea title="dashboard" closable="false" refreshonactivate="false">
						<div class="container" role="main" style="width:100%;">
							<div class="row">     
								<div class="col-lg-6" style="background-color:red;">col1</div>
								<div class="col-lg-6" style="background-color:blue;">col2</div>
							</div>
						</div>
					</cflayoutarea>
				</cflayout>
			

Open in new window

0
What does it mean to be "Always On"?
LVL 5
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.

Hi
how do i made

 <asp:button ID="btnsubmit"  class="btn btn-lg btn-block btn-warning"  runat="server" Text="Enviar"  onclick="submit_values" />

Open in new window


respond to an enter button, is a modal multi nav tabs, the  activ, its repond to enter
but the others dont!
0
I had this question after viewing asp.net repeater modal & data command.
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
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 have a SharePoint 2016 Server hosted in Azure.  Does anyone have any knowledge or links about adding bootstrap support here?
0
0
Industry Leaders: We Want Your Opinion!
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

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

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.