Go Premium for a chance to win a PS4. Enter to Win

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

Any idea what I am doing wrong to keep this form from correctly applying the "horizontal form" characteristics and why what should be to the right of it is below it?

Thanks in advance!
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE
LVL 5
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

How can I add background color to my inline list group:

<ul class="list-inline">
     <li class="list-inline-item">Item 1</li>
     <li class="list-inline-item">Item 2</li>
</ul>
0
Since I started changing the page structure here (http://www.gopherstateevents.com/results/fitness_events/results.asp?event_type=5&event_id=658) my data table does not work.  Also, my inline list is not in line.  Any help resolving these two issues would be much appreciated.
0
I would like to replace this calendar (http://www.gopherstateevents.com/calendar/calendar.asp) with one that is a little more contemporary.  I use classic asp/sql server.  I am using bootstrap. for layout.

Thanks!
0
When should cols use which parameter (xs, sm, md)?

Thank you!!
0
Can someone tell me why this page is so "compressed"?

Thank you!
0
I added a Mobirise landing page to me existing site at http://www.gopherstateevents.com/  I want to replicate that nave bar at the top on pages like http://www.gopherstateevents.com/misc/login.asp but I am having a hard time cleaning up my old code (bootstrap, etc.) so that the top nav bar will work.  Any ideas would be much appreciated!
0
I am trying to install the following for a new application:
Angular5
Bootstrap4
Firebase and Firestore
Firebase Hosting (probably)
Firebase Auth

I can get everything installed but there are dependency issues.  I think Node.js 9.0.0 does not work with NPM 5.5.1 and the Angular/cli.  Node.js 9 comes with NPM 5.5.1 so I'm not sure what the problem is.  I tried to update my package.json file with v. 5.5.1 from 5.0.0 but that causes even more issues.  I know this is all new but has anyone found a way to work around it?  Different versions?
0
I am trying to integrate my coldfusion pages into  a 'responsive'  navigational bar (eg bootstrap template from W3schools). Below is the result of my efforts in trying to use one of these templates.   The  page code I created is below and also a link to the server so you can see the result.

The result suggests that the template I am using does not fully support coldfusion OR I am not using the correct approach in building in the coldfusion pointers to the nav template.

I am asking the following questions

-  Am I doing something stupid in the example I have included - if so, can you give me a pointer as to what the solution is
-  What are your recommendations for building a responsive Nav bar which will support coldfusion.


Many thanks,

james





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

<body>
<div class="container background">
  <div class="row">

    <h1>ABAC INSCRIPTION 2019</h1>
<nav class="navbar navbar-inverse">
    <div class="container-fluid ">
      <ul class="nav navbar-nav">
        
        <li><a href="#tab2" data-toggle="tab">Programme 

Open in new window

0
I have a bootstrap login popup. Upon login into the system throught the bootstrap popup I need to redirtect the client to either myAccount page or myCart page.

		$('#login-form').bootstrapValidator({
			message: 'This value is required',
			submitButton: '$login-form button[type="submit"]',
			live: 'enabled',
			
        	
        	 feedbackIcons: {
	            valid: 'glyphicon glyphicon-ok',
	            invalid: 'glyphicon glyphicon-remove',
	            validating: 'glyphicon glyphicon-refresh'
	        },
	        
	        fields: {

            username: {
            	group: 'col-sm-2',
                message: 'The username is not valid',
                validators: {
                    notEmpty: {
                        message: 'The username is required and can\'t be empty'
                    },
                    stringLength: {
                        min: 2,
                        max: 30,
                        message: 'The username must be more than 2 and less than 30 characters long'
                    }
                   
                }
            },

            loginPassword: {
            	group: 'col-sm-2',
                validators: {
                    notEmpty: {
                        message: 'The password is required and can\'t be empty'
                    }
                   
                }
            }
            }
        }).on('success.form.bv', function(e) {
     // alert(100)
        // Prevent form 

Open in new window

0
Free Tool: IP Lookup
LVL 11
Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

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.

I would like to change the header on www.gopherstateevents.com that is a little more contemporary with 3-5 pix rotating through periodically.   I am hesitant to change too much because my SEO is great, but the look is not good.

Thanks!
0
When you create a MVC project in Visual Studio 2015, a default _Layout.cshtml page is created. The markup includes the following DIV (I changed the div a bit):
    <div class= "navbar navbar-collapse collapse navbar-fixed-top">
        <ul class="nav navbar-nav">
            <li>@Html.ActionLink("Home", "Index", "Home")</li>
            <li>@Html.ActionLink("Users", "Users", "Home")</li>
            <li>@Html.ActionLink("General", "General", "Home")</li>
            <li>@Html.ActionLink("Customer Portal", "CustomerPortal", "Home")</li>
        </ul>
    </div>

Open in new window


I want to reduce the height of the div and all its elements to about 25 px,, and move the rest of the body content up to fill in the space created.
0
I am using bootstrap, and I want to create a footer template to include in all my pages, so If I modify the footer, I will only need to modify one page (template, image, etc,,,) and ALL webpages will be updated
My intent is to start with something simple like, links, etc (on my footer), and keep adding links, pictures or text to it, and just be able to modify one file, and all the other webpages would be updated.

I am open to any ideas or suggestions from scratch

Tnx in advance
0
This site look fine on the desktop, however, when I looked at it on my phone it looked terrible.  I do have bootstrap and I have reworked the code numerous times, but I just can't get this top banner (especially the title) to be responsive.  I also cannot get the text to come away from the edges.  I've tried padding & margins in several different ways, but it's just not happening.  

http://insurance.illinois.gov/defaultEnrollment.html

...I made some alterations and it is working better now on mobile, but how do I get header tags to be responsive?
0
I am having a little trouble here that you can probably help with.  http://www.magickitchen.com/delivery-holiday.html  I set up three other tables to describe Holiday shipping, scroll towards the bottom.  All is good until the last table, where the columns are different sizes. I've triple checked that it's inside the div, and the table has the proper class.

What the heck?
0
I have an existing html page with bootstrap 3 snippet to open modal popup as below

link to open modal pop up

<a href="#" class="fa fa-search FA_Ico mT5" aria-hidden="true" title="SearchOrg" data-toggle="modal" data-target="#SearchAccountModal"></a>

Open in new window


modal pop up

<div class="modal fade modal-xl" id="SearchAccountModal" tabindex="-1" role="dialog">
	//additional code 
</div>

Open in new window


when I click  the above link , modal pop up opens fine....no problem.

Now my question is : What would be the angularjs way to open the same modal pop up ?

I'm using angularjs 1.3
0
I have a bootstrap page with a responsive navbar. However, when I click on any of the navbar menu items, the content of the page pointed to is presented in a new window- without the navabar. I need the content of each navar item to be presented below the navbar - not in a seperate page.

I am attaching the page code below - in which I have tried to achive the above with one menu item ACTIVITY LIBRE. The specfic line (33) is :

<li><a href="activity_libre.cfm" target="screener">ACTIVITY LIBRE</a></li>

From the above you will see I am using the target="screener" approach.

I am beginning to suspect that this is not the way to achieve this when using bootstrap ?

Thanks for any help

james



<head>
  <title>Bootstrap 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/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

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

Open in new window

0
Please go to http://dev2.magickitchen.com/menu/MKMS/98033.html  - this page uses the same template as this one: http://dev2.magickitchen.com/menu/MKMS/98043.html  and 50 others. All the other pages look correct, with the heating instructions on the right side.

Only http://dev2.magickitchen.com/menu/MKMS/98033.html is wrong, and it's wrong in all categories. I've looked over the product in the database, and can't see any other problems. Any ideas? Thanks.
0
I'm guessing this mobile menu isn't working because of SSL. But the bootstrap CDM I'm linking to is https.

Any ideas? The URL is consolidatedutilities.com.
0
Free Tool: Port Scanner
LVL 11
Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

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.

When I email a list of results via email we currently only have the HTML which is not very nice formatting.
When I display it as a webpage we use bootstrap so the formatting looks nice.

Is there a way to send the HTML table via email and make it look nice?  like the one we have online using bootstrap classes?

Alternatively do you know of any nice HTML5 template I can use to email tables with repeated regions?  (Many records)
I am trying to improve the look/feel of the email.
0
Hi,

I have a tab menu that I need to navigate.  

I'm not sure how to do this.

Please help me with the below code.

<script>
    $(document).ready(function () {
        $("nav").find("li").on("click", "a", function () {
            $('.navbar-collapse.in').collapse('hide');
        });
    });
</script>

 <ul class="nav nav-tabs nav-tab-default" role="tablist">
                    <li class="active"><a href="#Tab1" data-toggle="Tab1" style="color:White";>Tab1</a></li>
                    <li><a href="#Tab2" data-toggle="tab">Tab2</a></li> 
                    <li><a href="#Tab3" data-toggle="tab">Tab3</a></li>
                    <li><a href="#Tab4" data-toggle="tab">Tab4</a></li>
       </ul>

             <div role="tabpanel" class="tab-pane active" id="Tab1">
                        <ul class="col-md-12">
                           <li> 111111 </li>
                       </ul>
               </div>

              <div role="tabpanel" class="tab-pane" id="Tab2">
                        <ul class="col-md-12">
                        <li> 2222222 </li>
                       </ul>
               </div>

              <div role="tabpanel" class="tab-pane" id="Tab3">
                        <ul class="col-md-12">
                        <li> 333333 </li>
                       </ul>
               </div>

              <div role="tabpanel" class="tab-pane" id="Tab4">
                        <ul class="col-md-12">
                        <li> 44444 </li>
    

Open in new window

0
Hi,

I am working on a site using bootstrap v4 beta. Previously if I wanted to hide an element on bigger screens I would do this in the CSS file and do something like:

@media (min-width: 576px) {

 #mobileonlysection{ 
  display:none; (or maybe visibility:hidden;)

 }

}

Open in new window


However, that's working not so great at the moment. Is it the case that this is no longer supported by bootstrap and I should be using the line

 
<section id="mobileonlysection">
		 <div class="container d-md-none"> <!-- displays none on medium and up--> 
		 	  <div class="row>....etc

Open in new window


The does seem to work but it leaves a white line between elements relating to the padding or margin from mobileonlysection in the medium screens and up. Made me wonder if there is a better way to do this? Is there?

Thanks,

Adam
0
I have an issue with creating "multiple select"-dropdowns with bootstrap-select.
Mostly that the menu get 3dtranslated upwards the more I move my webedit-tool-window upwards.
which of course is very annoying..

I tried to resimulate this behaviour in jsfiddle.. however, here I wont even get it to show to begin with..
Some help to make it show, and then perhaps we can move forward to the real problem?

https://jsfiddle.net/37a4s2sn/2/

// Walkman69
0
I essentially have 2 forms on one page. Each has some input controls and a button. I want to validate the controls relative to the button, but when using basic bootstrap validation techniques, both buttons validate the entire page.

How do I break up the forms and only validate the controls relative to the 2 buttons?

For example...

 <div class="col-lg-12">
    <h2><u>Daily Schedule</u></h2>
    

    <div class="col-md-3">
    <label for="heard2">Enabled?</label>
    <div class="form-group">
    <asp:DropDownList ID="ddlDaily" runat="server" class="form-control"></asp:DropDownList>
    </div>
    </div>
    
                    <div class='col-md-3'>
                     <label for="heard">Start Date/Time <i>(will repeat daily)</i></label>
                    <div class="form-group">
                        <div class='input-group date' id='myDatepicker'>
                            <asp:TextBox ID="tbDDT" runat="server" class="form-control"></asp:TextBox>
                            <span class="input-group-addon">
                               <span class="glyphicon glyphicon-calendar"></span>
                            </span>
                        </div>
                    </div>
                    </div>
   
    
    </div>
    <div class="col-md-3">&nbsp;&nbsp;&nbsp;<asp:Button ID="Button1" runat="server" Text="Submit" OnClick="Button1_Click" class="btn btn-primary" /><br /><br /><br /></div>

Open in new window


How would I only validate the fields above when clicking the button above, ignoring anything else that might be on this page?
0
Hi,

I've been building a website from a tutorial I'd followed. The tutorial was initially for bs v4 alpha but since bs beta was launched I've made changes so it now seems to work for v4 beta.

The tutorial, as I understood it, was creating a website for larger screens and using the code
 @media(max-width:768px)

Open in new window

to specify any changes to the divs or sections IDs to be applied on screens smaller than 768  - i.e. phones and smaller tablets.

However, I've tried to make some more changes to my divs using the
@media(max-width:768px

Open in new window

command line but they appear not to be working when I minimize my browser to phone size. I wonder if this is because, as I read, small size resolution - i.e. for phones is the default, so the max width query is perhaps being over-written?

If I am using bootstrap v4 beta do I have to redo the site so the @media(max-width:768px is effectively the default and I'd need to make changes using (min-width: 576px / 768px) so things look different on the medium larger screens? ALternatively is there a way at the beginning to tell bootstrap that the 'default' is 768px and upwards....Hope this makes sense...Bit confused...Thanks
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.