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'm using Bootstrap 4 to right align 3 divs using flex-row. However in the code example given below, I would like to adjust it so that flex item 2 and flex item 3 are right aligned,
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Flexbox Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>

<body>

    <div class="container mt-3">
        <h1>Horizontal Direction</h1>

        <div class="d-flex flex-row bg-secondary">
            <div class="p-2 bg-info">Flex item 1</div>
            <div class="p-2 bg-warning">Flex item 2</div>
            <div class="p-2 bg-primary">Flex item 3</div>
        </div>
    </div>

</body>

</html>

Open in new window

0
Exploring ASP.NET Core: Fundamentals
LVL 13
Exploring ASP.NET Core: Fundamentals

Learn to build web apps and services, IoT apps, and mobile backends by covering the fundamentals of ASP.NET Core and  exploring the core foundations for app libraries.

Making a custom Wordpress page and using the  while loop:
while ( have_posts() ) : the_post(); 

Open in new window


i want to make the output 2 colums

i use bootstrap grid in our code so i should be able to do
<div = row>
  <div = col-md-6>left
  <div = col-md-6>right
</div>

Open in new window

and the
%2 mod operator

Open in new window

but that doesn't seam to work

here is my current code
<div class="clearfix">&nbsp;</div>			 

<?php 
$counter = 1;
if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
	<?php 
	$class = ($x%2 == 0)? 'RowWhiteBackground': 'RowGraybackground';
	?>
<?php 
       if ($counter == 1)
        {
               echo '<div  id="'.$counter.'" class="'.$class.'">';
		               echo  '<div class="col-md-4">';
					   ?>
					   	<div class="panel panel-primary">
							<div class="panel-heading"><h5><a href="<?php the_permalink(); ?>" style="color: #fff;" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h5></div>
							<div class="panel-body">
							<img height="150" width="150" style="padding : 0px 10px 0px 10px;"  vspace="10" class="alignleft" alt="<?php the_title_attribute(); ?>" src="<?php echo catch_that_image()?>" />
							<?php echo get_the_excerpt(); ?> 
							</div>
						</div>
						<?php 
					    $counter++;
					   echo  '</div>';
        } else if ($counter == 2) {
		                echo  '<div class="col-md-4">';
					   ?>
					   	<div class="panel panel-primary">
				

Open in new window

0
i am using simple bootstrap website. and I want to know if there is any pop calendar to pop two calendar so I can choose start and end date, and drop both into a single html textbox.
0
I have this code:

<div class="row" style="padding-top:10px;">
			<div class="col-sm-12 col-xs-12 text-left"><input type="checkbox" name="selall" >&nbsp;<span id="selall" onClick="sel_all();">Select All</span></div>
		</div>
		<div class="row" style="padding-top:10px;">
				
			<div class="row" style="padding-top:10px;">
				<div class="col-sm-6 col-xs-6"><input type="checkbox" id="summtr" name="summtr" >&nbsp;<span id="strtxt" onClick="setsummtrcheck();">Summary (Trade Pricing)</span></div>
				<div class="col-sm-6 col-xs-6"><input type="checkbox" id="spec" name="spec" >&nbsp;<span id="spectxt" onClick="setspeccheck();">Sample Spec</span></div>
			</div>	
			<div class="row" style="padding-top:10px;">
				<div class="col-sm-6 col-xs-6"><input type="checkbox" id="summnt" name="summnt" >&nbsp;<span id="snttxt" onClick="setsummntcheck();">Summary (Net Pricing)</span></div>
				<div class="col-sm-6 col-xs-6"><input type="checkbox" id="broc" name="broc" >&nbsp;<span id="broctxt" onClick="setbroccheck();">Product Brochure</span></div>
			</div>	
			<div class="row" style="padding-top:10px;">
				<div class="col-sm-6 col-xs-6"><input type="checkbox" id="summnp" name="summnp" >&nbsp;<span id="snptxt" onClick="setsummnpcheck();">Summary (No Pricing)</span></div>
				<div class="col-sm-6 col-xs-6"><input type="checkbox" id="draw" name="draw" >&nbsp;<span id="drawtxt" onClick="setdrawcheck();">PDF Drawing File</span></div>
			</div>	

Open in new window


It produces the output as in the attached image. Why does the "Select All" not align vertically with the checkbox elements underneath? I tried everything I could think of, like text-left, which is superfluous .

Thanks
Misalign.PNG
0
I have been looking for pop up the calendar (show two) like this one below: https://www.facilities.umd.edu/Style%20Library/FM%20Publishing/JQuery/daterangepicker/website/index.html#overview

And my website using <script type="text/javascript" src="scripts/jquery-2.2.0.min.js"></script>  and I have the following codes and the calendar does not work anymore.
When <script type="text/javascript" src="scripts/jquery-2.2.0.min.js"></script> is removed, everything is working.

Do you know how to fix it?

Thanks


<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Testing.aspx.cs" Inherits="RvRentOutCOM.Testing" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
<!-- Include Required Prerequisites -->
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap/3/css/bootstrap.css" />

<!-- Include Date Range Picker -->
<script type="text/javascript" src="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css" />
<script type="text/javascript">
    $(function () {
        $('input[id="daterange"]').daterangepicker();
    });
</script>
</head>
<body>
    <form id="form1" 

Open in new window

0
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_form_steps
I am using above form wizard and everything is working fine except the validation. the current code will only validate if the <input> field is empty.
My question is: how to use jquery built-in validation in this case so I do not have to write codes to check one by one? Because in my case, I have over 20+ <input> for each steps and I have at least 5 steps to go.

thanks
0
I have using UI on getbootstrap.com
and integrate with the following form wizard
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_form_steps

Everything is working fine except the following validateform() on w3school.com.
My question is: inside of validateform(), how can I call the bootstrap basic client validation? Because all of the my input html 5 is under bootstrap, and I want to take an advantage of using it instead of re-code everything manually.


function validateForm() {
        // This function deals with validation of the form fields
        var x, y, i, valid = true;
        x = document.getElementsByClassName("tab");
        y = x[currentTab].getElementsByTagName("input");
        // A loop that checks every input field in the current tab:
        for (i = 0; i < y.length; i++) {
            // If a field is empty...
            //if (y[i].value == "") {
                // add an "invalid" class to the field:
            //    y[i].className += " invalid";
                // and set the current valid status to false
            //    valid = false;
           // }
        }
        // If the valid status is true, mark the step as finished and valid:
        if (valid) {
            document.getElementsByClassName("step")[currentTab].className += " finish";
        }
        return valid; // return the valid status
    }

Open in new window

0
using getbootstrap.com for my website and have some questions how to  <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
inside of the <input type=text> as below.

 <div class="form-group row">
            <label for="@i.QuestionControlID" class="col-sm-@i.QuestionHtmlLabelSize col-form-label col-form-label-sm">@i.QuestionHtmlLabel</label>
            <div class="col-sm-@i.QuestionControlIDSize">
               <input value="" data-toggle="tooltip" data-placement="bottom" title="@i.QuestionToolTip" class="form-control" type="@i.QuestionHtmlType" placeholder="@i.QuestionHtmlPlaceHolder" id="@i.QuestionControlID" @i.QuestionHtmlIsRequired />
            </div>
        </div>

Open in new window

0
I have the following codes from W3 school and it works fine.
But when I try to add glyphicon. like : <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>

The input group addon icon is shown below the <input> and it should be inside of <input>

Can you show me how to make it?

  <div class="form-group">
        <label class="control-label col-sm-2" for='@i.QuestionControlID'>
            @i.QuestionHtmlLabel
                    @if (i.QuestionHtmlIsRequired == "Required")
                    {
                    <font color="red">*</font>
                    }
                </label>
        <div class="col-sm-10">
                <input data-toggle="tooltip" title="Hooray!" value="" class="form-control" type="@i.QuestionHtmlType" placeholder="@i.QuestionHtmlPlaceHolder" id="@i.QuestionControlID" @i.QuestionHtmlIsRequired />                
        </div>
    </div>

Open in new window

0
Adtran NetVanta 1335 using a DB9 serial cable following the below procedures the router prompts for username and password.

Problem:  Acquired a used Adtran 3450 router and needed to configure it for a location that needed a router.   Problem was that I didn’t know the password for the web user, enable and the console user.   I needed to find a way to reset this router or change the password.

Solution:  To get into the router and bypass the passwords, you need to console into the router using a DB9 serial cable and a VT100 emulator like Putty or HyperTerminal.  When connected, pres ESC within the first 5 seconds of the unit powering on to get into bootstrap mode.  Once in bootstrap mode, type bypass passwords and press enter.  Then type boot and the unit will reboot, bypassing the need for passwords.

Reset Password:

At the # prompt type config terminal and press Enter.
At the (config)# prompt, type enable password password Where password is your new password.
At the (config)# prompt, type username youruser password yourpassword and click enter.  Of course yourmuser and Your password are the user and password that you choose.  This will create a new administrator user where you can login without going into bootstrap mode.
Type exit and the write mem to save the config.

Tried putty and hyperterminal get the same results.
0
Bootstrap 4: Exploring New Features
LVL 13
Bootstrap 4: Exploring New Features

Learn how to use and navigate the new features included in Bootstrap 4, the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first websites.

I'm developing a Bootstrap project and started out with a UI kit theme but found that tweaking it was an issue, so I'm now using standard-issue Bootstrap.  My question is what or where are recommended/best form UI Components?  I've researched, but am not sure which are quality ones, so recommendations or a guide to resources is appreciated.   I usually use Foundation, and this project is also new to me as it is financial and has dates, amounts, percentages and charts.

I'm using the current Bootstrap version as it is today at https://getbootstrap.com/.

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
 
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>


UI components of …
0
I use HTML5 and JS.
I use Bootstrap modal for pop-up.
The modal works on clicks,

How can I show it when page loads. ( without clicking )
this is the script that I use
<script>
$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').trigger('focus')
})
</script>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Open in new window

1
Is Jquery outdated? what's the new technology that has replaced JQuery? Is it Bootstrap, Angular or React?

FYI, I don't have enough knowledge on Bootstrap, Angular or Reactjs hence am trying to determine what is the latest that I should be using on newer web applications.

Thanks for the info.
1
The results displays nav items go away when I display this on a small screen: https://www.gopherstateevents.com/results/cc_rslts/cc_rslts.asp?meet_id=617&show_indiv=n&hide_team=n&hide_ind=n&sport=Nordic%20Ski#

Any idea how I can fix this please?

Thanks you!
1
1
Can someone please tell me why the header on this page bleeds onto the header image if it is opened in a narrow window?
http://www.gopherstateevents.com/events/ccmeet_info.asp?meet_id=617
Thanks!
1
I am looking for a better way to display the nav bar links starting with "Awards     Bib Look-Up     Results by Team ..."  on https://www.gopherstateevents.com/results/cc_rslts/cc_rslts.asp?meet_id=548&show_indiv=n&hide_team=n&hide_ind=n&sport=Nordic%20Ski

Any ideas would be much appreciated!
1
I am having a slight issue with my nav-bar. I am using bootstrap and the menu on my nav-bar's are all joint together n space in-between them. Kindly can someone assist me through this? i used to inspect stuff to try i couldnt get it, tried adding display's and margin's too didnt work.
here is the screenshot and the navbar code:

 <div class="wrapper">
  <div class="container">
    <nav style="background: linear-gradient(to right,rgba( 0, 0, 0, 0.55),  rgba( 234, 15, 15, 0.39),rgba(14, 168, 6, 0.4));
	-webkit-transition: all 0.6s;" class="navbar navbar-default navbar-fixed-top">
      <div class="container"> 
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header page-scroll">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
        </div>
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse navbar-right" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav">
            <li><a style="color: white;"  class="page-scroll" href="../index.html">Home</a></li> 
            <li><a style="color: white;"  class="page-scroll" href="../index.html">About</a></li>
            <li><a style="color: 

Open in new window

0
Hi Experts,

Bootstrap row is not working in my react application.  Please see the screenshot for reference.

I want two columns in a single row but each column is in each row.  Please help me in resolving this issue.

row not working
What I need is col-md-8 and col-md-4 in a single row not one below the other.

Please help me in resolving this issue.

With Many thanks,

Bharath AK
1
Become a Certified Penetration Testing Engineer
LVL 13
Become a Certified Penetration Testing Engineer

This CPTE Certified Penetration Testing Engineer course covers everything you need to know about becoming a Certified Penetration Testing Engineer. Career Path: Professional roles include Ethical Hackers, Security Consultants, System Administrators, and Chief Security Officers.

My bootstrap is messed up on https://www.gopherstateevents.com/series/cc_nordic/series_results.asp

Can someone tell me why the data table is spanning the entire page please?

Thank you very much!
0
What settings are needed to create responsive emails in Outlook?

Bootstrap and other CSS settings which work on web pages don't work when viewed in Outlook on phones and small form factors.

I know this problem has existed for years. Not sure if this has changed over the years. Any resources or HTML template to handle this would be appreciated. Thanks.
0
socialHandles.push('<div id="editAction'+[i]+'" data-toggle="dropdown" class ="col-lg-3 dropdown-toggle"><div class="file-manager__item file-manager__item--directory card card-small social-hover mb-3"><div class="card-footer"><span class="file-manager__item-icon"><img class="img-responsive img-thumbnail" src="images/icons/fullcontact/' + demo1.infomation.TYPE_ID[i] + '.png"/></span><h6 class="file-manager__item-title">'+demo1.infomation.TYPE_NAME[i]+'</h6></div></div></div><div id="social-action'+[i]+'"  class="dropdown-menu" aria-labelledby="editAction'+[i]+'"> <a class="dropdown-item edit-social-profile" href="#"><i class="fas fa-wrench mr-1"></i>Edit</a><a id='+ demo1.infomation.ID[i] +' class="dropdown-item delete-social-profile" href="#"><i  style = "" class="fas fa-times-circle mr-1"></i>Delete</a></div>');
            }// end for
        }


   
        $("#social-handles").append(socialHandles);

Open in new window


This code is in a for loop from a array.

now it output correctly but the dropdown isnt working correctly,  as yo see i have sperated each dropwon with the number of entires 0, 1 ,2 3 etc,

all seems correct but when i trigger the drop down it keeps opening the first for example

when i click a container with id editActions3 it will open editActions0 dropdown ?

any hints
1
I'm having a problem with a menu.  Full page looks good, but mobile cuts off bottom of menu.  I think the problem is in the dropdown-menu class in the bootstrap.min.css.  Please see attached

http://insuranceqa.illinois.gov/GCI6/index.html
menuError.jpg
0
I have this HTML (based on bootstrap):
<!DOCTYPE html>
<html>

<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="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.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>

    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <link rel="stylesheet" href="/resources/demos/style.css">

    <title>Backflow Assembly & Test Report Form - Log In</title>
    <style>
        .nopadding {
            padding: 0 !important;
            margin: 0 !important;
        }
        
        .wrapper {
            max-width: 767px;
            min-width: 480px;
            margin: 0 auto;
        }
    </style>
	<script>
	sus = "";
	u = "";
	s = "";
	function chk_vals() {
		if (document.st.uid.value == "" || document.st.pwd.value == "") {
			alert("Please enter Email & Password");
			return false;
		}
		return true;
	}
	$(function() {
            $("#datepickerfr").datepicker();
        });
    $(function() {
            $("#datepickerto").datepicker();
        });
	

Open in new window

1
<div id="property-2563" class="form-group text-left"><label class="control-label" style="" for="property2563">Contact CheckBox</label><br><div style="margin-top:20px; " class="form-check form-check-inline"><input style="width: 0 !important;" class="form-check-inline" type="checkbox" name="property2563[]" id="property25630" value="Winning"><label style="margin-top:0px; margin-left:5px" class="form-check-label" for="property25630">Winning</label></div><div style="margin-top:20px; " class="form-check form-check-inline"><input style="width: 0 !important;" class="form-check-inline" type="checkbox" name="property2563[]" id="property25631" value="Winning"><label style="margin-top:0px; margin-left:5px" class="form-check-label" for="property25631">Winning</label></div></div>

Open in new window



cant check my checkboxes,  these are created from a database.

anyone see why ?

using bootstrap 4 forms
1

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
>