Expiring Today—Celebrate National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x

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 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
On Demand Webinar - Networking for the Cloud Era
LVL 10
On Demand Webinar - Networking for the Cloud Era

This webinar discusses:
-Common barriers companies experience when moving to the cloud
-How SD-WAN changes the way we look at networks
-Best practices customers should employ moving forward with cloud migration
-What happens behind the scenes of SteelConnect’s one-click button

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
Anyone know how to change these (in the red circle) automatically? I mean, it'll display the login user's name and also the avatar will change based on login user's gender (male avatar for male user and female avatar for female user).. Fyi, I use Admin LTE bootstrap template as in the picture below, PHP and mysql..Admin LTE
0
This is my first shot with bootstrap 4 for a web site I'm building. I'm running into a brick wall trying to make it work across all the major browsers. I'm still having styling issues in the header section. I could get the sticky footer work in IE with a flexbox workaround but pretty much stuck with the header. Following are my index.html and css files. Can someone point me in the right direction?

index.html

***************************************************************************
<!DOCTYPE html>
<html lang="en">
  <head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Book Info</title>

    <!-- Bootstrap core CSS -->
    <link href="externallibs/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <!--<link rel="stylesheet" href="cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">-->

    <!-- Custom styles for this template -->
    <link href="css/logo-nav.css" rel="stylesheet">

  </head>

  <body class="d-flex flex-column" style="display: flex; flex-direction: column; height: 100vh;">

        <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
			<div class="col-md-2 sidebar">
				<a class="navbar-brand" href="#">
					<img src="./logos/bn.png" class="img-fluid" width="220" height="50" alt="">
				</a>
			</div>

              <button class="navbar-toggler" 

Open in new window

0
Here's a screenshot of what I'm messing with:

Bootstrap screenshot
The table that's driving me nuts is the one where you see "status, incentive, details, reward." I can't get it to span 100% of the container's width.

Here's the twig file:

<div class="row">
	{#<div class="col s12">
        <h1 class="hdr-widget theme-color-1">{{ ppwProperties.title }}</h1>
    </div>#}

    {% if data.incentives is empty or data.incentives.rewards is empty %}
    <div class="col empty"><p><em>{{ translate('INCENTIVES_NONE_CURRENTLY_AVAILABLE') }}</em></p></div>
    {% else %}

    <div class="row">
        <div class="col s12" style="padding: 0 1.5rem;">
	
		<!-- here's the start of your table -->
		      <div class="table-responsive">
				<table class="table" style="width:100%;">
					<tbody style="overflow-y: scroll; height:235px; width:98%; position: absolute;">
						<tr>
						  <td style="width:25%; text-align:center; margin:0; padding:0;"><div class="hdr-incent theme-color-1-bg">{{ translate('INCENTIVES_STATUS') }}</div></td>
							<td style="width:25%; padding:0; margin:0;"><div class="hdr-incent theme-color-1-bg">{{ translate('INCENTIVES_INCENTIVE') }}</div></td>
							<td style="width:25%; text-align:center; margin:0; padding:0;"><div class="hdr-incent theme-color-1-bg">details</div></td>
							<td style="width:25%; text-align:center; margin:0; padding:0;"><div class="hdr-incent theme-color-1-bg">{{ translate('INCENTIVES_REWARD') }}</div></td>
						</div>
					

Open in new window

0
i have to represent no of device for each status(new,paired,blocked..etc) in the charts.
i want use  jquery and bootstrap with out using CanvasJS
please provide example of donut charts
0
I am using front page to write my html code for bootstrap, but everytime I use the 'preview', it gives me script errors and the page doesn't shows as it should.  I have to upload it in order to see the result or changes. Is there any way that I can overcome this situation, like another software or download something in able to 'preview it without uploading the page'

Tnx
0
Hi,

My app use Cflayout border and cflayout tabs inside one of the panel and i use bootstrap for responsive.

In CF9/10 my app works fine, when i resize browser window, the content of tab adapt and responsive works fine, in CF2016 no :/

Here is the code.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    
		<cflayout name="layoutTest" type="border" fittowindow="yes" >
			<cflayoutarea name="left" position="left" collapsible="false" splitter="false" minSize="500" size="500"/>

			<cflayoutarea name="center" position="center" >
				<cflayout type="tab" align="center" name="tabLayout"  tabposition="top"  tabstrip="false">
					<cflayoutarea title="dashboard" closable="false" refreshonactivate="false">
						<div class="container" role="main" style="width:100%;">
							<div class="row">     
								<div class="col-lg-6" style="background-color:red;">col1</div>
								<div class="col-lg-6" style="background-color:blue;">col2</div>
							</div>
						</div>
					</cflayoutarea>
				</cflayout>
			

Open in new window

0
Can someone tell me why this form does not condense to vertical on a cell phone please?
    <div class="row">
        <div class="col-xs-8">
  	        <form class="form" name="edit_accnt" method="Post" action="profile.asp" onSubmit="return chkFlds();">
            <div class="form-group">
                <label for="screen_name" class="control-label col-xs-2">Screen Name:</label>
                <div class="col-xs-4">
                    <input class="form-control" type="text" name="screen_name" id="screen_name" maxLength="12" value="">
                </div>
                <label for="email" class="control-label col-xs-2">Email:</label>
                <div class="col-xs-4">
                    <input class="form-control" type="text" name="email" id="email" maxLength="50" value="bschneider@stjosephwaconia.org">
                </div>
            </div>
            <div class="form-group">
                <label for="cell_phone" class="control-label col-xs-2">Cell Phone:</label>
                <div class="col-xs-4">
                    <input class="form-control" type="text" name="cell_phone" id="cell_phone" maxLength="50" value="6122193926">
                </div>
                <label for="cell_provider" class="control-label col-xs-2">Provider:</label>
                <div class="col-xs-4">
                    <select class="form-control" name="cell_provider" id="cell_provider">
                        <option value="">&nbsp;</option>
                        
   

Open in new window

0
Hi
how do i made

 <asp:button ID="btnsubmit"  class="btn btn-lg btn-block btn-warning"  runat="server" Text="Enviar"  onclick="submit_values" />

Open in new window


respond to an enter button, is a modal multi nav tabs, the  activ, its repond to enter
but the others dont!
0
Hire Technology Freelancers with Gigs
LVL 10
Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

I had this question after viewing asp.net repeater modal & data command.
0
I just read the Bootstrap 4 is finally in beta. Is it okay to use Bootstrap 4 in productions?
0
Im working with ajax toolkit tabs it is working properly but when i am adding bootstrap css files the tabs css  overwrite
Can u Help me to SOlve this problem?
Thanks in advance
0
Hello, with my code below I'm attempting to center my form in a div, when I do so the glyphicons stay left aligned and do not stay with the input control which do center align. How do I get this to work correctly?

 <div class="text-center">
                    <form action="" id="loginForm">
                        <div class="form-group input-group">
                            <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
                            <input class="form-control" type="text" name='username' placeholder="username" />
                        </div>
                        <div class="form-group input-group">
                            <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
                            <input class="form-control" type="password" name='password' placeholder="password" />
                        </div>
                        <div class="form-group">
                            <button type="button" class="btn btn-def">Login</button>
                        </div>
                        <input hidden id="hdnUserEnviroment" />
                    </form>
                </div>

Open in new window

0
Hi,

My router not connect to the internet VDSL. DHCP not workint too(the principal problem).  
The command "ip route" not exist!
Configuration:

CISCO881-SEC-K9
ROM: System Bootstrap, Version 12.4(22r)YB5, RELEASE SOFTWARE (fc1)

Running:


Current configuration : 1856 bytes
!
! Last configuration change at 14:20:53 UTC Wed Feb 6 2036
! NVRAM config last updated at 14:21:01 UTC Wed Feb 6 2036
! NVRAM config last updated at 14:21:01 UTC Wed Feb 6 2036
version 15.1
no service pad
service timestamps debug datetime msec
service timestamps log datetime msec
no service password-encryption
!
hostname Router
!
boot-start-marker
boot-end-marker
!
!
enable secret 4 tnhtc92DXBhelxjYk8LWJrPV36S2i4ntXrpb4RFmfqY
!
no aaa new-model
!
memory-size iomem 10
crypto pki token default removal timeout 0
!
!
ip source-route
!
!
!
!
ip dhcp pool DSL_DHCP
 import all
 network 10.0.0.0 255.255.255.0
 dns-server 189.40.220.41 8.8.8.8
 default-router 10.0.0.1
!
!
ip cef
ip name-server 189.40.220.41
ip name-server 8.8.8.8
no ipv6 cef
!
!
multilink bundle-name authenticated
license udi pid CISCO881-SEC-K9 sn FTX1648819M
!
!
!
!
!
!
!
!
!
!
!
!
!
interface FastEthernet0
 no ip address
!
interface FastEthernet1
 no ip address
!
interface FastEthernet2
 no ip address
!
interface FastEthernet3
 no ip address
!
interface FastEthernet4
 description DSL interface
 no ip address
 duplex auto
 speed auto
 pppoe-client …
0
Google use beautiful fonts and colors. Does Google have an option to download and use its fonts and colors on personal websites?
0
How to show the calendar if using bootstrap, because i was try and the calendar won't show.
please help me.
0
I have a SharePoint 2016 Server hosted in Azure.  Does anyone have any knowledge or links about adding bootstrap support here?
0
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 am building a simple form using Bootstrap in which I am facing some layout issues related to spacing. This is how the form looks like
UI Issues
1. There is lots of space between the label and fields. For instance, in the above image empty space between label and name field is highlighted. I would like to increase the width of input field so that the space reduces. Further, Radio buttons in the options section are further to the left as compared to the name and other fields. I am not able to make out why that is the case

2. I would like to get rid of the vertical space between 2 fields. For instance, there is a space between author and IP fields. I would like them to be closed together. Again, not able to make out the reason.

This is the fiddle I have created to reproduce  the problem - https://jsfiddle.net/sbcobqz9/3/

Any help is much appreciated.
0
So I use the following to hide a display none div.
How can I "overload" this function in a sense to also swap out the clicked glyph.
make sense ?

var showhide = function(v_eleid){ 
  var o_ele = document.getElementById(v_eleid); 
  if (o_ele){ 
    if (o_ele.style.display == 'none'){ 
      o_ele.style.display = 'block'; 
    } else { 
      o_ele.style.display = 'none'; 
    } 
  } 
}

Open in new window


and in the html <a href="#" onclick="showhide('targetDIVpane');" > click event text link [ bootstrap icon here]</a>

<div id="targetDIVpane" style="display: none;"> content meat goes here </div>
0
I was making up a layout and got stucked while making up this image. What I have done till now is that I have inserted an image onto the background for background but confused how to get that group of profile pictures below it in same style and also show "+8" for more images. I am sure things will be done with js.This is the required layout i needed  Any help would be appreciated.
0
I am working up on this layout got it done till this much What I have made till now and have to reach at this placeRequired layout.

I am unable to get that profile picture in hexagonal shape. And secondly to get those tabs in the same style as the required picture. Also that navbar in somewhat different style as mine. Any help would be appreciated.

Here is my Code:
<style type="text/css">
.profile-widget {
  background: url(images/profile-widget-bg.jpg) no-repeat 0 0;
  background: position: cover;
  width: 250px;
  border-radius: 3px;
  padding: 15px;
}
.profile-widget img {
  border: 8px solid white;
  border-radius: 70px;
  float: left;
  width: 150px;
  margin-top: -170px;
}
.profile-widget {
  font-size: 11px;
  font-family: Verdana, Geneva, sans-serif;
  display: inline-block;
  color: #fff;
  margin-left: 350px;
}
.profile-widget:after {
  content: " ";
  display: table;
  clear: both;
}
.tabs{
    margin-left: 20px;
    margin-top: 20px;
}
</style>

<div class="container">
    <div class="row">
        <div class="col-sm-12" style=" margin-left: 100px; margin-top:-20px;">
            <img src="/cabme/2/1.jpg" width="904" height="336" />
                    <nav class="navbar navbar-default" style=" margin-right: 235px">
<div class="tabs">
<a href="">Sarah Cruiz</a>&emsp;&emsp;&emsp;&emsp;
<a href="c">Timeline</a>&emsp;&emsp;&emsp;&emsp;
<a 

Open in new window

0
I was making up a layout and got stucked while making up this image. I am confused how to get that profile picture and user name and other text along with that cover pic onto that rectangle. Any help would be appreciated.wqwqwq.png
0
I don't know what I'm doing wrong here but I expect it's something silly.

I'm using Bootstrap and I cannot get the toggle to work. Button appears but on clicking button inside menu doesn't appears.
<nav class="navbar navbar-default navbar-fixed" data-spy="affix" data-offset-top="20">
  <div class="container-fluid">
  <div class="navbar-header">
         <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    <a class="navbar-brand" href="index.php"><b>Title</b></a>
  </div>
  <div class="collapse navbar-collapse" id="navbar-collapse">
    <ul class="nav navbar-nav">
      <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#" id="home"><b>Home</b></a>
      </li>
      <li>
        <a href="#" data-toggle="modal" name="link" data-target="#myLoginModal"><b>Submik</b></a></button>
      </li>
      <li>
        <a href="#" data-toggle="modal" data-target="#myLoginModal"><b>Sub2</b></a>
      </li>
    </ul>
</div>
</div>
</nav>

Open in new window

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.