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 Experts!

Something is preventing checkbox and radio to display when this part of my Bootstrap is added. When I remove this part, those inputs show with default style.

Can you help me fix it?

See attached, please.
bootstrap_bug.txt
0
Cloud Class® Course: Microsoft Azure 2017
LVL 12
Cloud Class® Course: Microsoft Azure 2017

Azure has a changed a lot since it was originally introduce by adding new services and features. Do you know everything you need to about Azure? This course will teach you about the Azure App Service, monitoring and application insights, DevOps, and Team Services.

I am using bootstrap 4. My bottom footer I am having an issue making it sticky at the bottom.

CSS:
  .footer {
    position: relative;
    bottom: 0;
    height: 60px;
    width: 100%;
    padding-top:20px;
    background-color: #214761;
    color: #FFFFFF;
  }

Open in new window


If I set the position to absolute the footer is at the bottom but longer content will go past the footer.

My page starts with a <nav> ... </nav> followed by a <div class="container"> ... content ... </div> then followed by <footer> ... </footer>
0
I am adding pages to an existing web site. The current site is using it's own CSS. I need to make a checkout form, and I want to use Bootstrap.

When I add Bootstrap, it breaks all kinds of stuff. How can I use Bootstrap on this new page without breaking existing CSS?

Thanks!
0
dataTable boostrap Table How to hide duplicate values on cell?..
Form this

and I want to display my table like this

How can I achieve this experts?...
0
See this code:

<div class="row" style="border-bottom:1px;background-color: #5B9BD5">
	<div class="col-sm-1 col-xs-1 text-center" style="background-color: white;">&nbsp;<br>&nbsp;<br>&nbsp;</div>
	<div class="col-sm-1 col-xs-1 text-center" style="color:white; background-color: #5B9BD5">Config<br>ID</div>
	<div class="col-sm-3 col-xs-3 text-center" style="color:white; background-color: #5B9BD5">Project Name<br></div>
	<div class="col-sm-1 col-xs-1 text-center" style="color:white; background-color: #5B9BD5">Last<br>Config</div>
	<div class="col-sm-2 col-xs-2 text-center" style="color:white; background-color: #5B9BD5">Model<br></div>
	<div class="col-sm-1 col-xs-1 text-center" style="color:white; background-color: #5B9BD5">Accessories<br></div>
	<div class="col-sm-1 col-xs-1 text-center" style="color:white; background-color: #5B9BD5">Project<br>Trade<br>Price</div>
	<div class="col-sm-1 col-xs-1 text-center" style="color:white; background-color: #5B9BD5">LS-250<br>Status</div>
</div>

Open in new window


with this in head:
<head>
<meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="W3.css">
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<title>Lakos Configurator - Projects</title>

Open in new window


I'm using bootstrap.

See attached image. The div structure indicates 11 columns (not 12), but it insists on putting 12 (and unwantedly using the background where it is not needed).

How can I fix this (11 columns only)?
projects_12_cols.JPG
0
CSS Vs Jquery Vs Bootstrap

I have watched few videos about CSS , Jquery , Bootstrap and they all seem  to me like  they are used to design the web page.
However I am not sure if I can use just one of them and will be enough or there are some specific things that can be done by one of them and cannot be done by the other.

Any Expert to explain when  to use one and not the other. Which of them I have to focus on learning that can do more of what is needed in Web Development.
I have not included JavaScript, because I am assuming that one is a Must to know for Wed Dev.

Thanks
0
I'm using this plugin https://eonasdan.github.io/bootstrap-datetimepicker/  (please scroll to Custom Formats)

Is there a way to change the look-and-feel and make it smaller? It's so big...in your face :)

p1.png
0
Experts!

Please how can I adjust the Bootstrap Notify so the width automatically adjusts to the screen size?

See the screenshots.

My own:
Screenshot_1.png
I want something like this:
like_this.png
Thanks
0
I have what appears to be a download issue with IE and multiple applications developed as an .HTA where the library files for bootstrap and jquery will not download.  This does not happen every time.  There will be a delay as long as 20 minutes and then I will get the download dialog in IE  "The file couldn't be downloaded." or a script error in the HTA files showing the cdn link.  This just started a few days ago and the HTA files have been working for months with no problems.  Is there a way to trace where the delay is at or what might be causing it?  I have cleared cache several times.  When the HTA does come up if I use control + F5 then everything works as normal.  This in on windows 7 machine.  I have tried clearing all the content in the HTA file with the exception of the script src and css cdn references and it still occurs.  I have also tried different cdn sites and no change.  I don't know if I can force the HTA to use the cached version of the files instead of downloading each time or if that is even the issue.
0
Hi, I am populating a table using php. How can I get the value of 'JOB' from the table where the user clicks the checkbox. I have tried to add a class like previously suggested, but I cannot make it work.  I am attaching my code

while($row = $result->fetch_assoc()) {
        printf("<tr><id='traba'><td>%s</td><td>%s</td><td>%s</td><td>%s</td><td>%s</td><td><input class='boxtocheck' type='checkbox' id='editar' name='editar' value='".e."' ><td></tr>",$row["fecha"], $row["job"],$row["tipo"],$row["valor"],$row["dinero"],$row["editar"]);
        $total=$total+$row["valor"];
        $total2=$total2+$row["dinero"];
        $jobs=$jobs+1;
    }
} else {
    echo "0 results";
}

Open in new window



<script>    
$(document).ready(function()
{
$('.boxtocheck').change(function() 
  {
    if(this.checked === true)
    {
// I am trying to see if the correct value is posted        y1 = document.getElementById('traba').value;
//                                                                                           console.log(y1);
         alert('Load page to edit');
    }
  });   
});    
</script>

Open in new window

0
Cloud Class® Course: C++ 11 Fundamentals
LVL 12
Cloud Class® Course: C++ 11 Fundamentals

This course will introduce you to C++ 11 and teach you about syntax fundamentals.

I am populating a table with php, and I am adding a checkbox per ROW
I want to edit the CHECKBOX CLICKED , and with the code attached below, I am only checking THE FIRST ROW. Ex. if four rows are added, only the FIRST one is checked. I want to be able to check if the USER clicks ON ANY checkbox ROW
Tnx

while($row = $result->fetch_assoc()) {
        printf("<tr><td>%s</td><td>%s</td><td>%s</td><td>%s</td><td>%s</td><td><input type='checkbox' id='editar' name='editar' value='".e."' ><td></tr>",$row["fecha"], $row["job"],$row["tipo"],$row["valor"],$row["dinero"],$row["editar"]);
        $total=$total+$row["valor"];
        $total2=$total2+$row["dinero"];
        $jobs=$jobs+1;
    }
} else {
    echo "0 results";
}

Open in new window

<script>    
$(document).ready(function()
{
    console.log('changed');
  $('#editar').change(function() 
  {
    if(this.checked === true)
    {
         alert('Load page to edit');
    }
  });   
});    
    
    
</script>

Open in new window

0
How to add a check box field from a sql database using php. I am getting my report working already, what I want to accomplish is a check box field to EDIT that particular row

I am able to get my report, and once I get my report I just want to check it, and be able to edit that row,
Tnx
here is my code to populate report
$result = $conn->query($sql);
$total=0;$jobs=0;$total2=0;

if ($result->num_rows > 0) {
    // output data of each row
 
    while($row = $result->fetch_assoc()) {
        //echo "<br> Date: ". $row["fecha"]. "   - Job: ". $row["job"]. "   ". $row["tipo"]. "  - Amount " . $row["valor"] . "<br>";
        printf("<tr><td>%s</td><td>%s</td><td>%s</td><td>%s</td><td>%s</td></tr>", $row["fecha"], $row["job"],$row["tipo"],$row["valor"],$row["dinero"]);
        $total=$total+$row["valor"];
        $total2=$total2+$row["dinero"];
        $jobs=$jobs+1;
    }
} else {
    echo "0 results";
}

Open in new window

0
Usage of Bootstrap

I have done some reading online about Bootstrap, it states that Bootstrap includes HTML and CSS, and makes the web forms generated in easy and faster way.
I am not sure what they mean by that. DO they mean that when we open Bootsrop text editor we can write HTML and CSS on the same page ?
Another thing that I want to know is How does Javascript interact with Bootstrap ?

Thak you
0
I made some changes in my meta file and now my bootstrap datepicker doesn't work.  Here is what I have in the header:
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="GENERATOR" Content="Microsoft Visual Studio 6.0">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="alternate" href="http://gopherstateevents.com" hreflang="en-us" />

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<link rel="shortcut icon" href="/assets/images/g-transparent2-351x345.png" type="image/x-icon">
<link rel="stylesheet" href="/assets/web/assets/mobirise-icons/mobirise-icons.css">
<link rel="stylesheet" href="/assets/tether/tether.min.css">
<link rel="stylesheet" href="/assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="/assets/bootstrap/css/bootstrap-grid.min.css">
<link rel="stylesheet" href="/assets/bootstrap/css/bootstrap-reboot.min.css">
<link rel="stylesheet" href="/assets/socicon/css/styles.css">
<link rel="stylesheet" href="/assets/dropdown/css/style.css">
<link rel="stylesheet" href="/assets/theme/css/style.css">
<link rel="stylesheet" href="/assets/mobirise/css/mbr-additional.css" type="text/css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.0/css/bootstrap-datepicker.css">

<script src="/assets/web/assets/jquery/jquery.min.js"></script>
<script 

Open in new window

0
Please see attached image. This is the output of a php program. The display uses bootstrap & the left half is displayed first (based on the flow of the php program), the right half after that.

The issue is this. When a user enters a markup value (a number > 0 and < 10), that number is used as a multiplier on the the total price and that is displayed, as you can see. I entered 1.1 and it displayed as $16,109.50.

What we also want to have happen is that the prices change in the lower left to say Modified Trade Pricing & each item to be multiplied by 1.1, the total then being identical to the total on the right after New Modified Total Trade Price.

The way I am now making work what you see is when the Confirm button (a submit element), the corresponding Javascript calls another php program. The Javascript is like this ( the variable ac is set to "co":
if (ac == "co") {
			if (!isnumeric(document.st.markup.value.trim())) {
				alert("Invalid markup value.")
				return false;
			}
			val = document.st.markup.value;
			valok = false;
			if (val > 0 && val <= 10) {
				valok = true;
				document.st.action = "apply_markup.php?fr=" + fr + "&em=" + em + "&ddocs=" + ddocs + "&ps=" + ps + "&nosumm=" + nosumm;
				return true;
			} else {
				alert("Invalid markup value. Must be > 0 and less than or equal to 10.")
				return false;
			}	
		}	

Open in new window


The apply_markup.php looks like this:
<?php
// apply_markup.php
ini_set('session.cache_limiter','public');
	

Open in new window

0
Hello Experts!

Please how can I implement Bootstrap Notify on my pages for simple Success and Error Notifications?

I read the documentation but can't seem to understand how to call the notification based on conditional events not just onclick.

I sincerely thank you in advance.
0
We have a site that has some js that opens/closes panels in a bootstrap theme.   We want to be able to add to the script to post if the panel is opened or closed so that if the user comes back, it will be open or closed like it was when they were there last.

This is the code that is called in an external .js file.

jQuery(document).on('click', '.panel .tools .fa-chevron-down', function () {
        var el = jQuery(this).parents(".panel").children(".panel-body");
        if (jQuery(this).hasClass("fa-chevron-down")) {
            jQuery(this).removeClass("fa-chevron-down").addClass("fa-chevron-up");
            el.slideUp(200);
        } else {
            jQuery(this).removeClass("fa-chevron-up").addClass("fa-chevron-down");
            el.slideDown(200);
        }
    });

Open in new window


This is the html that is calling it

<div class="col-lg-6 column draggable" id="panel_id_1" data-column="#panel_id_1_col#" data-row="#panel_id_1_row#">

                      <section class="panel">
                          <header class="panel-heading panel-homes">
                              MY NOTIFICATIONS SINCE LAST LOGON					

                              <span class="tools pull-right">
                                <a href="javascript:;" class="fa fa-chevron-down chevwhite"></a>
                            </span>
                          </header>
</section>
</div>

Open in new window


I know I need to add an update to it (I think!) and pass the id variable - id: $(this).attr("id") and some sort of post but I have no idea where to put it, etc to call my script (that I have already written.    Can i get some guidance on where to add this new information to the current script?
0
Im wondering why the Meet Logo on the right of this page is overlapping the left text a little?  I have it set as img-responsive.

https://www.gopherstateevents.com/results/cc_rslts/cc_rslts.asp?sport=Nordic%20Ski&meet_id=454&rslts_page=overall_rslts.asp&show_indiv=n

Thanks!
0
I want to make my header mobile friendly -> which turns into those 3 lines when a user is on their phone, i found alot of sites that have examples, but the problem is some on my headers have dropdowns on their own, can anyone help?
Here is the code of the header
<div class='header'>
			<div style='float:left;margin-top:20px;padding-left:20px'>
    			<a class= "menuword" href= "../menu">
    				 <span class='text'>MENU</span>
    			</a>
    			<div class="dropdown" style="padding-bottom:10px">
    			<a class= "aboutword" style="cursor:pointer" >
    				<span class= "text">ABOUT</span>
    			</a>
    		<div class="dropdown-content1" style="width:300px; margin-top:10px">
				<span style="display:flex;" class="dropdown_text">
				    <a href="..">NEWS + INSIGHTS</a>
				    <a href="../faqs">FAQS</a>
				 </span>
				  </div>

    			</div>

			</div>

    			<img src= "http://blog.com/wp-content/uploads/2017/09/head2.png" style="cursor:pointer;margin-top:5px;    width: 195px;margin-left:420px;" height = "50px" onclick="window.location.href='/'">

			<div style='float:right;margin-top:20px;padding-right:19px'>
			<div class="dropdown" style="margin-right:27px;padding-bottom: 10px">
    			<a class="phone">
    				<span class= "text">CONTACT</span>
    			</a>
    			<div class="dropdown-content1 dropdown_text" style="margin-top:10px">
    			 <div style="width:5px;margin-top:5px"></div>
				    <a href= "../contact">CALL US </a>
				    <a href= "../contact">EMAIL 

Open in new window

0
Cloud Class® Course: MCSA MCSE Windows Server 2012
LVL 12
Cloud Class® Course: MCSA MCSE Windows Server 2012

This course teaches how to install and configure Windows Server 2012 R2.  It is the first step on your path to becoming a Microsoft Certified Solutions Expert (MCSE).

Hi Experts,

Bootstrap row is not starting on a newline.   It is starting at the end of the first row. Homepage button is not starting at the new row.  Please find the html and css below.

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1 shrink-to-fit=no">
    <!-- Bootstrap CSS -->
	<link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/style.css">
    <title>Stolen Generations</title>
  </head>
   <body>
    <div class="banner container-fluid">
<div class="row">
<div class="col-md-12">
<div id="tabs">	
<ul class="nav nav-pills" role="tablist">
    <li class="nav-item">	    
        <a class="nav-link active tab-head" data-toggle="tab" href="#1" id="1" role="tab">
		<div class="detail-content" style="color:rgb(255,255,255);width:130px;text-align:center;margin:0 auto">
		    <div class="number">
			      <h1 style="text-align:center;margin-bottom:25px">1</h1>
			</div>
			Marjorie Foster</br>
			07:48
			
		</div>
		</a>
		
    </li>
    <li class="nav-item">
        <a class="nav-link tab-head" data-toggle="tab" href="#2" role="tab">
		<div class="detail-content" style="color:rgb(255,255,255);width:130px;text-align:center;margin:0 auto">
		    <div class="number">
			      <h1 style="text-align:center;margin-bottom:25px">2</h1>
			</div>
			Barbara Raymond</br>
			04:53
			
		</div>		
		</a>
 

Open in new window

0
Hello, I am just learning bootstrap and find this very helpful example of the type of menu that I would like on my site.
https://codepen.io/ajaypatelaj/pen/prHjD

However, I would like so that after moving away from any of the menu, the "dropdown" menu will disappear.  
Let see if I can clarify.  
I click on Menu 1 and the dropdown submenu is shown.
When I move away from Menu 1 and  hover over Menu 2, the submenu from Menu 1 go away.

Please help.  Thank you.
0
Am I having a problem with bootstrap multiselect.  I am losing the checkboxes on display by way of
on click which opens the multiselect items. Ctrl and click will select the items but the checkboxes have
disappeared alone with the make selection button which appears before the items to select from in the list.  I would also
like to combine text fields in my source prior to databind.  See Attached. My code is below

When asp button is clicked,  the link box associated button is made visible
<div>

<asp:ListBox ID="ListBox1" runat="server" Height="240px" SelectionMode="Multiple" Width="400px" BackColor="#CCFFFF" Visible="false" Rows="400" AutoPostBack="False"></asp:ListBox>

<asp:Button ID="Button1" runat="server" Text="Submit" Visible="false" Enabled="false" CausesValidation="false"/>

<asp:Label ID="label1" runat="server" Text="<< See Selections" Visible="false" Enabled="true"/>

</div>

<script type="text/javascript">

$(function () {

$('#ListBox1').multiselect({

includeselectAllOptions: true

})

})

</script>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous" />

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/css/bootstrap-multiselect.css" type="text/css" />

<script type="text/javascript" …
0
Why do my vertical images on the right of this page overlay the calendar on a moderately sized window but not on a full-sized or very small sized window?  Works well on my iPhone when portrait but not when landscape.

https://www.gopherstateevents.com/calendar/calendar.asp

Thank you!
0
I pulled this collapsible navbar off of W3Schools and it seems like it is missing some formatting.  There is no black background (ie: inverse) and there is only one horizontal bar.  What support file am I missing for this utility?  It "works"...it just doesn't render well.

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span> 
      </button>
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Page 1</a></li>
        <li><a href="#">Page 2</a></li> 
        <li><a href="#">Page 3</a></li> 
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
        <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
      </ul>
    </div>
  </div>
</nav>

Open in new window

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

Top Experts In
Bootstrap
<
Monthly
>