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;
  }

Select all 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>

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

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

Experts!

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

See the screenshots.

My own:

I want something like this:

Thanks

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";
}

Select all 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>

Select all Open in new window

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";
}

Select all Open in new window

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

Select all Open in new window

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

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;
			}	
		}	

Select all Open in new window

The apply_markup.php looks like this:

<?php
// apply_markup.php
ini_set('session.cache_limiter','public');
	

Select all Open in new window

…

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);
        }
    });

Select all 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>

Select all 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?

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 

Select all Open in new window

…

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>
 

Select all Open in new window

…

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" …

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>

Select all Open in new window