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 Office 2010
LVL 12
Cloud Class® Course: Microsoft Office 2010

This course will introduce you to the interfaces and features of Microsoft Office 2010 Word, Excel, PowerPoint, Outlook, and Access. You will learn about the features that are shared between all products in the Office suite, as well as the new features that are product specific.

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
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
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
Cloud Class® Course: Microsoft Windows 7 Basic
LVL 12
Cloud Class® Course: Microsoft Windows 7 Basic

This introductory course to Windows 7 environment will teach you about working with the Windows operating system. You will learn about basic functions including start menu; the desktop; managing files, folders, and libraries.

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
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
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
Cloud Class® Course: SQL Server Core 2016
LVL 12
Cloud Class® Course: SQL Server Core 2016

This course will introduce you to SQL Server Core 2016, as well as teach you about SSMS, data tools, installation, server configuration, using Management Studio, and writing and executing queries.

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
I have a MVC view called index.  I have a bootstrap modal on that form.   I have a "child" view that I need to show in a modal window.  The "child" view has several <div> s that expand or shink.  I can load the view into the modal dialog without issue, but the space between the <div> tags displays as transparent for some reason I can't figure out!  I've tried setting the opacity of the modal form to 1.0, but that doesn't make a difference.  How can I display the modal dialog without the parent form showing through?
0
mock up
I  learning bootstrap and trying to design a page and make it responsive, using bootstrap. I have attached a screen shot of the layout.
I'm trying to see if there are best practices i can follow.

Lot of tutorials I see, "nav navbar" classes used as a header at the top. aren't these classes for navigation items?

I want a different page header, where i can have the "name of the site" , centered in the header of the page, and "help" and sign out links at the top right of the header.
also logo at the left hand corner.  should I define my own css for the header or does bootstrap has some class for the header, if it is not just the nav bar at the top.

Also, how can I define/specity the location of different items like search box, help and signout links  inside this page header?
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
>