Bootstrap

990

Solutions

2

Articles & Videos

660

Contributors

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

Have a HP Elite 8300 2 Hard drives one is the OS and one the data. when turning on the computer it does find a disk to boot. but by entering to the boot menu [F9] / select OS drive, it boots

Window 10

Please help
0
Industry Leaders: We Want Your Opinion!
Industry Leaders: 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!

Hi

The Video Adverts on pages I visit (always dev and games) have repeatedly told me about visual Composer to help me design my blog. I haven't liked the builders I've tried so far.

It says it can work with existing content. My existing content is okay. Does anyone have experience or an opinion on Composer Pro? It looks good for drag and drop WYSIWYG and can work with existing content. Can I change aspects of the templates? I have a blog with "zero gravity" Theme, like changing the header-banner size, or page width? adverts size/location?
I'd like to make the banner size different and main horizontal menu below it higher and such.


Is visual composer Pro better than Visual Composer bootstrap 3 ?
 
Visual Composer     here

thanks
0
Am am looking for either a library or some code to use that would allow me to add code snippets to my html pages with syntax highlighting.

What options do I have that will work with or on top of Bootstrap 3?
0
I want to reduce the height of input fields. So, I have created a css class

.input-field {
  height: 20px
}

Open in new window


This works fine for text fields and also reduces the height of drop downs. However, in drop down the selection text is cut. How can I ensure that the complete text inside the drop down is visible

Here is the fiddle - https://jsfiddle.net/zvn3wknj/

The selection text 'Approve' and 'Reject' is cut and not displayed correctly.
0
I'm looking for a reliable utility I can create a bootable USB from a ISO I'm currently using windows 7 USB download which does a great job but will only convert one ISO on each USB I would like to be able to boot all versions of windows from one USB (I have them as ISO files)
0
I am creating a form in Bootstrap 3. Would like to have the input fields and label surrounding them to appear smaller than what bootstrap provides by default.

In order to do so, I have created a couple of css classes

.input-field {
  height: 20px
}

.label-size {
  font-size: 10px;
  line-height: 1.2;
}

Open in new window


however, this has messed up the alignment for checkboxes. The label for each checkbox does not appear properly aligned with the checkbox and also the label for the field (<label> tag) appears mis aligned.

Here is the fiddle - https://jsfiddle.net/yyky0ms1/1/

How can I correct this?
0
Bootstrap validator trying to validate the form and submit to the database. The validation part works but it does not submit

the link is here https://jsfiddle.net/tsomik1/5cu96c6y/10/
0
I have 4 tabs in bootstrap, and each tab has a pagination system.

The problem is when you are on anything other than the default tab and click next page, it reverts back to the first tab.

I am looking for a way to identify which active tab its on currently and pass that along so it doesnt keep reverting to the default tab.

I am not sure how to identify which tab is active and pass the value along.

I can provide more detailed code if needed but basically the question is how to structure my code to find the currently active tab in bootstrap and maintain that tab when the page is reloaded (in this case when the user clicks next page or last page).

Thanks!
0
I am trying to validate using remote options, but it is always validate as failed
<div class="row">
										<div class="col-sm-12 col-xs-12">
											<input type="text" name="userName" placeholder="Username" class="form-control input-lg" required="required" data-bv-remote="true"/>
										</div>
									</div>

Open in new window

 userName: {
                message: 'The username is not valid',
                validators: {
                    notEmpty: {
                        message: 'The username is required and can\'t be empty'
                    },
                    stringLength: {
                        min: 6,
                        max: 30,
                        message: 'The username must be more than 6 and less than 30 characters long'
                    },
                    regexp: {
                        regexp: /^[a-zA-Z0-9_\.]+$/,
                        message: 'The username can only consist of alphabetical, number, dot and underscore'
                    },

                    remote: {
	                    url: '/includes/website.cfc?method=checkusername',
	                    message: {
	                        en_US:  "This usenrame is already taken, please choose another one",
	                    },
	                    data: {
	                        type: 'userName'
	                    },
	                    type: 'POST',
	                    delay: 1000
	                }


                }
            },

Open in new window

<cffunction name="checkusername" output="true" returntype="any" access="remote" returnformat="JSON" >
          <cfargument name="username" required="true" type="string" />
          <!--- set the default value to false --->
          <cfset var emails = StructNew() />
          <cfset emails.valid = "false" />


          <!--- code to check email in system --->
          <cfquery name="findemail" datasource="#request.datasource#">
               select username
               from users
               where username = <cfqueryparam  value="#arguments.username#" cfsqltype="cf_sql_varchar" />
          </cfquery>
          <cfif findemail.RecordCount eq 0>
               <cfset emails.valid = "true" />
          </cfif>
          <cfoutput>#SerializeJSON(emails)#</cfoutput>
     </cffunction>

Open in new window

0
qwqw.png  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 a blue rectangle for background but confused how to get that profile picture and user name and followers onto that rectangle. Any help would be appreciated.
0
Enroll in June's Course of the Month
LVL 8
Enroll in June's Course of the Month

June's Course of the Month is now available! Every 10 seconds, a consumer gets hit with ransomware. Refresh your knowledge of ransomware best practices by enrolling in this month's complimentary course for Premium Members, Team Accounts, and Qualified Experts.

I am trying to validate the form using bootstrapValidator but I do not get error messages and the form does not get validated
				<form id="togglingForm" data-toggle="validator" role="form" class="form-horizontal">
						<div class="form-section">
							<h2>Student / Driver Information</h2>

									<input type="text" name="firstName" id="firstName" placeholder="First Name" class="form-control" data-error="Please enter name field."  required="required">

									<input type="text" name="middleName" class="form-control"  placeholder="Middle Name"/>


									<input type="text" name="lastName" class="form-control"placeholder="Last Name" required="required" data-error="Please enter last name field."/>
							<div class="styled-select">
					        	<select name="suffix">
									<option>Suffix?</option>
									<option value="mr">Mr</option>
									<option value="mrs">Mrs</option>
									<option value="ms">Ms</option>
								</select>
				        	</div>
				        	<input type="email" name="emailAddress" class="form-control" placeholder="Email Address" required="required"/>
				        	<input type="email" name="reenterEmailAddress" placeholder="Re-Enter Email Address"/>

							<div class="spacer" style="height: 20px;clear: both;"></div>

							<input type="text" name="streetAddress" placeholder="Street Address"/>
							<input type="text" name="city" placeholder="City"/>
							<div class="styled-select state">
					        	<select name="state">
							

Open in new window

0
Hello,

I am using bootstrap and sass for a website. Please tell me if and how the following can be accomplished:

column | column | column | column

for all screen sizes apart from xs

when screen size gets to xs I would like the content in the above columns to be displayed as follow:

column | column
column | column

(the pipe line is for explanatory purposes, it won't show up in the design)

i have a feeling that the way to accomplish the above is by using two identical rows,
displaying one row after the other in the html, and then using 'hidden' and 'visible' elements
for each column depending on screen size.

I tried this but couldn't make it work, is this the right way to go?

Thanks for your help.
0
I build couple of  MDT servers for couple of our  projects and copied Deployment share of one of existing MDT server and both servers runnign absolutely fine without any problem. Now I recently build third one and copied same Deployemnt Share  changed server name and password in to the customsetings.ini and bootstrap.ini. Now when I try to connect client to the deployment .It connectsh fine wiht PXE and goes in to the Bootstrap process and after I see a mesage says "Processing Bootstrap settings"  I get an error mesage
says "A connection to the deployment share(\\WIN-LO.....) The server name is actuall L0 not Lo I assume I may did the typo in had incorrect server name in customsettings.ini or in bootstrap.ini but bot have correct server name. I tried to connect with one of the windows 7 laptop and manually  connected to the share and ran LIte Touch.VB and had simillar error message but it has correct server message. (Attached).
error mesage
0
I have a form (which I inherited) which has a bootstrap datetime picker on it.  When the user selects the date,  the value displayed for the selection doesn't include the time.  I need the time to be displayed for this.
0
I have created a bootstrap popup login page . When the client click on the login button it will launch the popup and the client will be asked to either login or register. Once login button is clicked I need to validate the credentials and log them in. If the login is not successful I Need to keep them on the same page and show the error message.

Also   I have 2 options forgot user name and forgot password I need to incorporate that within the same popup so it slides and another form is shown
<li class="login-link"><a href="#" data-toggle="modal" data-target="#myModal">Login</a></li>

<div id="myModal" class="modal fade" role="dialog">
			<div class="modal-dialog">
			    <!-- Modal content-->
			    <div class="modal-content">
			    	<div class="modal-header">
			        	<button type="button" class="close" data-dismiss="modal">&times;</button>
						<h2 class="modal-title">Account Login</h2>
			    	</div>
					<div class="modal-body">
						 <form data-toggle="validator" role="form">
			        	<h3>Welcome to I Drive Smart. Please log-in to access your account.</h3>
			        	<div class="form-group">
			        		<input class="modal-username" type="text" name="firstname" class="form-control" data-error="Please enter name field." placeholder="Username" required="required">
			        			<div class="help-block with-errors"></div>
			        	</div>
			        	<div class="form-group">
			        		<input class="modal-password" type="password" 

Open in new window

0
Hi EE,
please see JS Fiddle here which showns a standard "Linked Picker" as described on the Bootstrap 3 datetime picker website.
My aim and what I need a hand with is to highlight the date selected on the first picker on the second calendar.
I.E. If I select the 31of May on the first picker then this date will be highlighted on the second.

Thanks for reviewing.
NB
0
It displays correctly on desktop, iPad and Android phone.  Help! What am I missing here?

You can browse to this page at: http://pricelearman.com/beta/serena_b8/test-iPhone2.htm,
or copy the code below

<!DOCTYPE html>

<html lang="en">
      <head>

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

            <style>
                #page-wrapper {
                    position: relative;
                    overflow: hidden;
                    width: 100%;
                    height: 100%;
                    background-color:#FFF;
                }

                .container-full-width {
                    margin:0;
                    padding:0;
                    width:100% !important;
                }

                .row-full-width {
                  padding:0;
                  margin:0;
                }

                .photogrid{
                  width:100%;
                  height:auto;
                  margin:0;
                  display:-webkit-flex;
                  display:flex;
                  -webkit-flex-direction:row;
                  -webkit-flex-wrap:wrap;
                  flex-flow:row wrap;
                  -webkit-justify-content:center;
                  

Open in new window

0
Here's what I've got right now:

 <div class="col-xs-10">
        <p>The Aggregate Report provides results from those who participated in a health screening to help identify areas of opportunity to improve the health of the population. To protect the privacy of participants, individual health data has been de-identified and the below corresponding analysis represents the characteristics of the population group as a whole.</p>
    </div>
    <div class="col-xs-2" >
    <button type="button" class="btn btn-primary logo-upload">Print</button>
    </div>

Open in new window


...and here's how it looks:

screenshot of desktop resolution
Not bad, but I would love to pull that button down so it was vertically aligned relative to the text. It's especially obvious when you go to the mobile version:

screenshot of mobile version
Bottom line: How can vertically align the button so it's vertically aligned with the text, regardless if the user is on a desktop or on their mobile device?
0
Hello,

if you view my carousel you will notice that it extends about 15 pixels below my images (gradient are the controls) how can I fix this?

carousel
0
Technology Partners: We Want Your Opinion!
Technology Partners: 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 have a button that will collapse the sidebar menu with a button. But some pages I want it to auto collapse onload. How would I do that?

<button class="navbar-toggle collapse in" data-toggle="collapse" id="menu-toggle-2"> <span class="glyphicon glyphicon-th-large" aria-hidden="true"></span></button>

Open in new window


This is the design I am using:
http://seegatesite.com/create-simple-cool-sidebar-menu-with-bootstrap-3/
0
I have an MVC 5 application using bootstrap tabs.  It's easy to load the tabs using jquery method ('tab'.load('url')), but when I do a submit action on a razor view, it returns to a full page view.  How can I get the posted data to return to the tab holding the form that posted it?
0
I have a standard bootstrap sidebar menu that automatically will collapse when the screen is smaller.

I have 2 questions.

1. How do I put a button on my page that when clicked will collapse the side bar?

2. When the screen is adjusted I want to be able to control when bootstrap automatically collapse the side bar. I want it to collapse at a defined width. Currently it appears to collapse automatically at 782px. I want it to collapse at 800px. How do I change this in bootstrap?

Here is the menu I have:

        <nav class="navbar-default navbar-side" role="navigation">
            <div class="sidebar-collapse">
                <ul class="nav" id="main-menu">
                    <li>
                        <a href="/index.php" ><i class="fa fa-desktop"></i>Main Menu</a>
                    </li>
                    <li>
                        <a href="/profile"><i class="fa fa-user"></i>My Profile</a>
                    </li>
                    <li>
                        <a href="/logout"><i class="fa fa-sign-out"></i>Logout</a>
                    </li>


                </ul>
            </div>
        </nav>

Open in new window

0
I have a navigation menu and the following is one of the items.  The idea is that this menu item is a dropdown with (per the below code) 3 items in it. Each one of those items is also a dropdown, each with several items in them.

I've gone through several iterations of this and clearly am doing something wrong. The code below does not even expand the second level sub-menu items.


<ul class="nav navbar-nav nav_1">
<li>
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Teams<span class="caret"></span></a>				
<div class="dropdown-menu">
<ul>
<li class="dropdown-submenu"><a href="#">Region 1<span class="caret"></span></a>
	<ul class="dropdown-menu">
	<li><a href = "teampage.aspx?ID=1">Team 1</a></li>
	<li><a href = "teampage.aspx?ID=17">Team 17</a></li>
	<li><a href = "teampage.aspx?ID=23">Team 23</a></li>
	<li><a href = "teampage.aspx?ID=50">Team 50</a></li>
	</ul>
</li>
<li class="dropdown-submenu"><a href="#">Region 2<span class="caret"></span></a>
	<ul class="dropdown-menu">
	<li><a href = "teampage.aspx?ID=52">Team 52</a></li>
	<li><a href = "teampage.aspx?ID=53">Team 53</a></li>
	<li><a href = "teampage.aspx?ID=54">Team 54</a></li>
	</ul>
</li>
<li class="dropdown-submenu"><a href="#">Region 3<span class="caret"></span></a>
	<ul class="dropdown-menu">
	<li><a href = "teampage.aspx?ID=56">Team 56</a></li>
	<li><a href = "teampage.aspx?ID=63">Team 63</a></li>
	<li><a href = "teampage.aspx?ID=58">Team 58</a></li>
	</ul>
</li>
</li>
</ul>

Open in new window


I was able to get those 2nd levels to expand by adding
    <script>
$(document).ready(function(){
  $('.dropdown-submenu a.test').on("click", function(e){
    $(this).next('ul').toggle();
    e.stopPropagation();

  });
});
</script>

Open in new window


Then specifying it from the first set of items in the initial dropdown, like so:

<li class="dropdown-submenu"><a href="#" class="test">Region 1<span class="caret"></span></a>

Open in new window


Which all works great actually, except that if another item in the same level is clicked, the other does not collapse. (i.e. If I click "Region 1" it expands fine, but then if I click "Region 3" it expands over "Region 1" instead of expanding Region 3/collapsing Region 1)

Anyway, I'm hopeful someone can look at this and say, yeah dummy, this is out of order or that needs to go here. Any ideas?
0
I am running 3 ajax get calls which work perfectly until I try to update different <div> elements on the form.  Here is my code: ( the ajax calls occur on the SelectRow function:
    $(document).ready(function () {
        //debugger;
        var grid_selector = "#grid-table";
        var pager_selector = "#pager";

        $(grid_selector).jqGrid({
            url: '/Residents/GetResidents',
            async: true,
            datatype: "json",
            contentType: "application/json; charset-utf-8",
            mtype: 'GET',
            loadonce: true,
            width: 600,
            colNames: ['ID', 'First Name', 'Last Name',
                'Street Address', 'Home Phone', ''],
            colModel: [
                { name: 'id', width: 20, search: false, sortable: false, search: false },
                { name: 'firstName', width: 90, sortable: false, search: false },
                { name: 'lastName', width: 90 },
                { name: 'streetAddress', width: 200 },
                { name: 'homePhone', width: 75 },
                { name: 'officerWarning', width: 50, search: false, formatter: 'checkbox', align: 'center' }
            ],
            iconSet: "fontAwesome",
            ignoreCase: true,
            rowNum: 20,
            pager: pager_selector,
            pgbuttons: true,
            sortable: false,
            viewrecords: false,
            caption: "Residents",
            emptyrecords: 'No data for the applied filter',
     

Open in new window

0
I have essentially an unordered list with a background-image. You can see my page/code here:



I'm having a hard time making this slider responsive. I've tried everything I can think of/been able to find online but just cannot get it to work. Any ideas?
0

Bootstrap

990

Solutions

2

Articles & Videos

660

Contributors

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.