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

I have put 2 tabs into a bootstrap modal, one for selecting images and one for uploading images with dropzone. The image uploads but it doesn't display correctly and the standard progress bar never shows either. (see attached image as reference) I did notice when playing around that the issue may be that the drop zone form is within another form but I am not 100% sure.

drop zone
I tried to use a div instead and call the drop zone uploader with jQuery but that didn't make a difference.

<div class="row">
	<div class="col-md-4 col-md-offset-4 col-sm-6 col-sm-offset-3">
		<div class="form-wrapper clearfix">
			<form class="form-contact" id="accom-form">
				<div class="inputs-wrapper">
					<select name="category">
						<option value="" selected>Select Type</option>
						<option value="Option1">Option1</option>
						<option value="Option2">Option2</option>
					</select>
					<input type="text" placeholder="Name" name="name">
					<textarea name="description" rows="9" placeholder="Description"></textarea>
				</div>
				<input type="submit" value="Add" id="add-accom">
				<button type="button" class="btn btn-primary btn-filled select-images" data-toggle="modal" data-target="#gallery">Select Images</button>
				<input type="hidden" name="form_token" id="form_token" value="<?php echo make_form_token(); ?>">
				<div class="submitting"></div>
				<div class="form-success"></div>
				<div class="form-error"></div>
				<div class="thumbs"></div>
				

Open in new window

0
What’s Wrong with Your Cloud Strategy ?
LVL 10
What’s Wrong with Your Cloud Strategy ?

Even as many CIOs are embracing a cloud-first strategy, the reality is that moving to the cloud is a lengthy process and the end-state is likely to be a blend of multiple clouds—public and private. Learn why multicloud solutions matter in this webinar by Nimble Storage.

I'm guessing this mobile menu isn't working because of SSL. But the bootstrap CDM I'm linking to is https.

Any ideas? The URL is consolidatedutilities.com.
0
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
When I email a list of results via email we currently only have the HTML which is not very nice formatting.
When I display it as a webpage we use bootstrap so the formatting looks nice.

Is there a way to send the HTML table via email and make it look nice?  like the one we have online using bootstrap classes?

Alternatively do you know of any nice HTML5 template I can use to email tables with repeated regions?  (Many records)
I am trying to improve the look/feel of the email.
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
Hi,

I have a tab menu that I need to navigate.  

I'm not sure how to do this.

Please help me with the below code.

<script>
    $(document).ready(function () {
        $("nav").find("li").on("click", "a", function () {
            $('.navbar-collapse.in').collapse('hide');
        });
    });
</script>

 <ul class="nav nav-tabs nav-tab-default" role="tablist">
                    <li class="active"><a href="#Tab1" data-toggle="Tab1" style="color:White";>Tab1</a></li>
                    <li><a href="#Tab2" data-toggle="tab">Tab2</a></li> 
                    <li><a href="#Tab3" data-toggle="tab">Tab3</a></li>
                    <li><a href="#Tab4" data-toggle="tab">Tab4</a></li>
       </ul>

             <div role="tabpanel" class="tab-pane active" id="Tab1">
                        <ul class="col-md-12">
                           <li> 111111 </li>
                       </ul>
               </div>

              <div role="tabpanel" class="tab-pane" id="Tab2">
                        <ul class="col-md-12">
                        <li> 2222222 </li>
                       </ul>
               </div>

              <div role="tabpanel" class="tab-pane" id="Tab3">
                        <ul class="col-md-12">
                        <li> 333333 </li>
                       </ul>
               </div>

              <div role="tabpanel" class="tab-pane" id="Tab4">
                        <ul class="col-md-12">
                        <li> 44444 </li>
    

Open in new window

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 have this multi-level menu that operates a Bootstrap tab panel, kind of like a TabControl in C#.

I'm having difficulty with this as the menu items do not get de-slected when a new one is selected and then the item can't be selected again. It is similar to this post:
https://stackoverflow.com/questions/33229791/bootstrap-4-dropdown-tab-items-can-only-be-selected-once

I tried the workaround and it does not work, in fact, it never gets fired. At a loss as to what I'm doing wrong.

This is based on thie code here:
https://codepen.io/wizly/pen/BlKxo

Here is a Pen showing the behavior:
https://codepen.io/anon/pen/eGRrpx

  <div class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-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>
      <div class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
          <li><a href="/Home/Index">Home</a></li>
          <li>
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">CNP<b class="caret"></b></a>
            <ul class="dropdown-menu">
              <li><a href="#CNPAU" data-toggle="tab">CNPAU</a></li>
              <li><a href="#CNPPAC" 

Open in new window

0
Hi,

I am working on a site using bootstrap v4 beta. Previously if I wanted to hide an element on bigger screens I would do this in the CSS file and do something like:

@media (min-width: 576px) {

 #mobileonlysection{ 
  display:none; (or maybe visibility:hidden;)

 }

}

Open in new window


However, that's working not so great at the moment. Is it the case that this is no longer supported by bootstrap and I should be using the line

 
<section id="mobileonlysection">
		 <div class="container d-md-none"> <!-- displays none on medium and up--> 
		 	  <div class="row>....etc

Open in new window


The does seem to work but it leaves a white line between elements relating to the padding or margin from mobileonlysection in the medium screens and up. Made me wonder if there is a better way to do this? Is there?

Thanks,

Adam
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
Independent Software Vendors: We Want Your Opinion
Independent Software Vendors: 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 have an issue with creating "multiple select"-dropdowns with bootstrap-select.
Mostly that the menu get 3dtranslated upwards the more I move my webedit-tool-window upwards.
which of course is very annoying..

I tried to resimulate this behaviour in jsfiddle.. however, here I wont even get it to show to begin with..
Some help to make it show, and then perhaps we can move forward to the real problem?

https://jsfiddle.net/37a4s2sn/2/

// Walkman69
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
I essentially have 2 forms on one page. Each has some input controls and a button. I want to validate the controls relative to the button, but when using basic bootstrap validation techniques, both buttons validate the entire page.

How do I break up the forms and only validate the controls relative to the 2 buttons?

For example...

 <div class="col-lg-12">
    <h2><u>Daily Schedule</u></h2>
    

    <div class="col-md-3">
    <label for="heard2">Enabled?</label>
    <div class="form-group">
    <asp:DropDownList ID="ddlDaily" runat="server" class="form-control"></asp:DropDownList>
    </div>
    </div>
    
                    <div class='col-md-3'>
                     <label for="heard">Start Date/Time <i>(will repeat daily)</i></label>
                    <div class="form-group">
                        <div class='input-group date' id='myDatepicker'>
                            <asp:TextBox ID="tbDDT" runat="server" class="form-control"></asp:TextBox>
                            <span class="input-group-addon">
                               <span class="glyphicon glyphicon-calendar"></span>
                            </span>
                        </div>
                    </div>
                    </div>
   
    
    </div>
    <div class="col-md-3">&nbsp;&nbsp;&nbsp;<asp:Button ID="Button1" runat="server" Text="Submit" OnClick="Button1_Click" class="btn btn-primary" /><br /><br /><br /></div>

Open in new window


How would I only validate the fields above when clicking the button above, ignoring anything else that might be on this page?
0
Hi,

I've been building a website from a tutorial I'd followed. The tutorial was initially for bs v4 alpha but since bs beta was launched I've made changes so it now seems to work for v4 beta.

The tutorial, as I understood it, was creating a website for larger screens and using the code
 @media(max-width:768px)

Open in new window

to specify any changes to the divs or sections IDs to be applied on screens smaller than 768  - i.e. phones and smaller tablets.

However, I've tried to make some more changes to my divs using the
@media(max-width:768px

Open in new window

command line but they appear not to be working when I minimize my browser to phone size. I wonder if this is because, as I read, small size resolution - i.e. for phones is the default, so the max width query is perhaps being over-written?

If I am using bootstrap v4 beta do I have to redo the site so the @media(max-width:768px is effectively the default and I'd need to make changes using (min-width: 576px / 768px) so things look different on the medium larger screens? ALternatively is there a way at the beginning to tell bootstrap that the 'default' is 768px and upwards....Hope this makes sense...Bit confused...Thanks
0
I have a page with several pics, and my problem is that they don't look symetric.  If the pixels difference is even minimal, you will see the difference. How can I make ALL pics look the same size REGARDLESS of original pic.  I have tried width=auto height="252" both auto, specify like below, etc... but the results when displaying pics are the same IF THERE IS A DIFFERENCE IN PIXELS, YOU WILL NOTICE IT

I want all pics on the page be W=267 H=252. but I don't want to modify pic by pic to be that specific size

<div class="panel-body"><img src="/images/Thumb/deh2.jpg" class="img-responsive center-block" width=267 height=252 onClick="location.href='deh1.htm'" alt="Image">

Tnx
0
I have this code in bootstrap, and I would like to add it to cart when the user clicks 'add to cart' button.  How do I accomplish that ?
I have more than 1 item and I would like to do it per item
I have my paypal account and the price per item varies

Tnx in advance

      <div class="col-sm-2">
      <div class="panel panel-primary">
        <div class="panel-heading">SPINACHS</div>
        <div class="panel-body"><img src="/images/deh2.jpg" class="img-responsive center-block" width="100" height=auto onClick="location.href='deh1.htm'" alt="Image"></div>
        <div class="panel-footer">12oz organic</div>
        <h3 align="center">$14.99</h3>

        <button type="button" class="btn btn-link"> <img src="/images/addtocart.PNG" width="125" height=auto</button>
      </div>
      </div>
dehydrated.htm
0
Hi all,

I've been trying to build the front end of a website using bootstap. So far the site seems to look okay in Chrome and Firefox, but not on Internet Explorer.

The site is here  - http://www.orangojapan.com/

the explorer vs chrome/firefox
The image shows how the page looks in explorer (left) against how it looks in Chrome/Firefox (right). The second row is all squashed and isn't running across all 12 columns as I specified. Also the  Bootstrap cards are not displaying properly (too much empty white space at the bottom of the cards).

The code for the initial part of the site with the row not displaying properly is displayed below:
<!-- HEADER1 --> 

 <section id="header1"><!-- header starts - this has all the information relating to the header-->
 <div class="container"><!-- section starts --> 
 	  		
			
			
			<div class="row"><!-- row starts --> 
				
	  	    				<div class="col-sm-4 header-right float-right">
							<form>
							<h4>Find a teacher</h4>
							<div class="form-group">
                              
							  <label for="exampleSelect1">Study Language:...&nbsp;&nbsp;</label>
                              <select class="form-control" id="exampleSelect1">
                                <option>1</option>
                                <option>2</option>
                                <option>3</option>
                                <option>4</option>
                                <option>5</option>
                              

Open in new window

0
Hi all,

I'm trying to build a website using Bootstap v4 beta.

Something seems to have happened to my float right command since I upgraded to v4 beta - it appears not to work.

I have a section ID and in it I have a form. I want to move the form to the right of that section. Currently it positioned to the left. This can be seen here:

http://www.orangojapan.com/index.php

I tried a couple of things to get it to move to the right:

In my code I have  tried the following:

<div class="col-sm-4 header-right float-right">

Open in new window


I was hoping float-right was a bootstrap class which I didn't have to define, but it didn't seem t work. So I defined a class 'header right' in my CSS file. In that class I specified:  float:right;

 
 #header1{
 background:url('../img/homepageimage.jpg') center center no-repeat;/*Image we display in the header - top part of the webapge*/
 background-size:cover; /*used to cover the entire page*/
 height:100%;
 color:#000000;
 display:flex;
 align-items:right;
 
 
 }
 
 #header1 img{
 padding:0 0 0px;
 width:80%;
 }
  
  
 #header1 .header-bottom{
 background:rgba(255,255,255,0.7);
 padding-top:20px;
 margin-top:20px;
 border-radius:10px;
 
 }
  
  
 #header1 .header-right{
 background:rgba(0,0,0,0.5);
 padding:30px;
 margin-top:80px;
 border-radius:10px;
 color:#FFFFFF;
 float:right;
 
 }

Open in new window



None of these seemed to work. The full code for the section ID header1 is shown below.
Any suggestions / advise much appreciated.

Many thanks

Adam



Open in new window

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
Free Tool: ZipGrep
LVL 10
Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

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

http://dev2.magickitchen.com/#popular  the photo here slides down, revealing text. The designer wants this, a short orange line under the H3 tag:

popular.JPG
I am not sure how to do this... a bottom border? Of course it needs to be responsive. Thanks in advance for your help
0
I am trying to display a message in my bootstrap page IF THERE IS AN ERROR IN THE EMAIL FIELDS
I am using :
      <div class="form-group">
            <div class="col-sm-10 col-sm-offset-2">
                  <! Will be used to display an alert to the user>
            </div>
      </div>
I am able to execute the email.php form correctly if everything is fine, but if there is an error I am using
header("location:javascript://history.go(-1)");
to go to the previous page with the USER INPUT.  I have tried several examples from the web and tutorials, but NONE of them have worked for me but this one (history)
My problem is that since it is history page, NO MESSAGE IS DISPLAYED
My question is HOW CAN I APPEND INFO TO MY FIELDS IN BOOTSTRAP LIKE THE ALERT PREVIOUSLY POSTED
Tnx
contactus.htm
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
Hi, Please see the dark footer at dev.magickitchen.com, user name pepe and pw: BobTheBuilder45!!

I need to add a div in front of the words DON'T MISS OUR LATEST PROMOS AND NEWS, aligned left, with social icons in it.

So it will look like:
Capture.JPG
With the social icons in a separate div from the text.

Here's the social icons code: <a href="http://facebook.com/magickitchen"><i class="fa fa-facebook" aria-hidden="true"></i></a>&nbsp;&nbsp;<a href="http://pinterest.com/magickitchen"><i class="fa fa-pinterest" aria-hidden="true"></i></a>&nbsp;&nbsp;<a href="http://twitter.com/magickitchen"><i class="fa fa-twitter" aria-hidden="true"></i></a>&nbsp;&nbsp;

With or without the non-breaking spaces, I just need a way to create that extra div and can't figure that part out. Thanks.
0
I am trying to get the add button to enable if I select a valid file otherwise disable it. Also i'm trying to show messages if an invalid file is selected. The code below doesn't not seem to generate the desired result:

<form name="myForm">
<div class="modal-content">
	<div class="modal-header">
		<h4 class="modal-title">Add Image</h4>
	</div>
	<div class="modal-body">
		<!-- <table class="table table-responsive table-hover table-condensed"> -->
		<div class='row'>
			<div class="form-group">
				<div class="col-sm-10">
					<input type="file" class="form-control-file"  
						ng-file-select="onFileSelect($files)" 
						ngf-accept="'.jpg,.png'" 
						ngf-pattern="'.jpg,.png'" 
						ngf-max-size="'500KB'"	
						name="img" id="img" ng-model="product.filename" required>
					<div ng-messages="myForm.img.$error && myForm.img.$touched" ng-show="myForm.img.$dirty" style="color:red">
						<div ng-message="maxSize"><p>Image is to large, it must be smaller than 10 Mb</p></div>
						<!-- <div ng-message="minSize"><p>Image is to small, it must be bigger than 1 Mb</p></div> -->
						<div ng-message="accept"><p>File must be an image: (png, tiff, jpeg)</p></div>
						<p ng-message="required">Providing a filename is mandatory.</p>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="modal-footer">
	    <button type="button" class="btn btn-secondary" ng-click="addImage()" data-dismiss="modal" ng-disabled="myForm.$invalid">Add</button>
        <button type="button" 

Open in new window

0
Hello,

This is a navigation menu from https://www.w3schools.com/bootstrap/bootstrap_navbar.asp

<li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1
        <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="#">Page 1-1</a></li>
          <li><a href="#">Page 1-2</a></li>
          <li><a href="#">Page 1-3</a></li>
        </ul>
      </li>

Open in new window


I find that sometimes, for the 'page1' link, when I press the down caret button, the menu doesn't drop down; instead the '#' sign gets added to the end of the URL in the address bar.

Any way around this? Why does it happen only sometimes? I found that by omitting the '#", or even the entire 'href="#"', the drop down menu always works.
<a class="dropdown-toggle" data-toggle="dropdown" href="">Page 1

Open in new window


Shall I go with the above route, deleting '#', or even the entire 'href="#"'?

Thank you for your help,

Neo
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.