Bootstrap

991

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

Look at http://olaffrenecleaningservice.com/

When you shrink the screen down to mobile size you get something like this:

screenshot
I want to put the "free estimate" graphic on its own line and the name of the company on its own line.

I'm seeing some CSS elements that I'm not familiar with ("inherit"). In any case, how can I put these two elements on their own "row" when the screen gets to mobile size?
0
Announcing the Most Valuable Experts of 2016
LVL 6
Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

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
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 have a SharePoint 2016 Server hosted in Azure.  Does anyone have any knowledge or links about adding bootstrap support here?
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
0
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
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
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 using Bootstrap 3 in my Angular 4 app to create a form. In the form, I need to render checkboxes on the basis of data returned from a web service call. So, I need to iterate over the data and render a checkbox for every value received.

The display for these checkboxes is bit messed up as in the screenshot below -
Current state
Is there a way to display these checkboxes in 3 columns. Something like this (looks much cleaner) Target state
My current code is as below


<div class="container-fluid">
  <div class="row">
    <div class="col-xs-12">
      <form [formGroup]="myForm">

        <div class="row">
          ...
        </div>
        <div class="row">
          ...
        </div>
        <div class="row">
          <div class="col-xs-8">
            <div class="form-group">
              <label for="options" class="col-xs-4">Options</label>
              <div class="checkbox"  formGroupName="options" *ngFor="let option of options">
               <div class="col-xs-4">
                <input id="{{option}}" formControlName="{{option}}" type="checkbox" 
                         [checked]=false> {{option}}
               </div>
              </div>
            </div>
          </div>
          <div class="col-xs-4">
            <div class="form-group">
              <label for="name" class="col-xs-4">Name</label>
              <div class="col-xs-8">
                <input type="text" id="name" formControlName="name" 

Open in new window

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
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 attempting to apply form validation using bootstrap validator plug-in but I don't see results. Here is the code:

<div>
	<div class="modal-header">
		<h4 class="modal-title">Add Employee</h4>
	</div>
	<div class="modal-body">
		<table class="table table-responsive table-hover table-condensed">
			<div class="form-group margin-bottom">
				<label for="name" class="col-sm-2 control-label">Name</label>
				<div class="col-sm-10">
					<input type="text" class="form-control" data-error="Please enter name field." id="name" ng-model="employee.name" required />
                                       <div class="help-block with-errors"></div>
				</div>
			</div>
			<div class="form-group margin-bottom">
				<label for="age" class="col-sm-2 control-label">Age</label>
				<div class="col-sm-10">
					<input type="text" class="form-control" id="age" ng-model="employee.age">
				</div>
			</div>
			<div class="form-group margin-bottom">
				<label for="gender" class="col-sm-2 control-label">Gender</label>
				<div class="col-sm-10">
					<select class="form-control" type="text" name="gender" id="gender" ng-model="employee.gender">                    
						<option>male</option>
						<option>female</option>
					</select>
				</div>
			</div>
			<div class="form-group margin-bottom">
				<label for="company" class="col-sm-2 control-label">Company</label>
				<div class="col-sm-10">
					<input type="text" class="form-control" id="company" ng-model="employee.company">
				

Open in new window

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
Free Tool: Site Down Detector
LVL 8
Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

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

Bootstrap

991

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.