[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

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

Trying to add a right margin (to my first button) so as to present 2 buttons in a cleaner manner that have a pull-right bootstrap class on them ... the pull right seems to remove all margins is there a way around this?

<a href="rev_logout.php" 	class="btn btn-danger navbar-btn pull-right " 	role="button">Log Out</a>
	   <a href="inventory.php" 	class="btn btn-info navbar-btn pull-right" 		role="button">Home</a>

Open in new window

0
HTML5 and CSS3 Fundamentals
LVL 12
HTML5 and CSS3 Fundamentals

Build a website from the ground up by first learning the fundamentals of HTML5 and CSS3, the two popular programming languages used to present content online. HTML deals with fonts, colors, graphics, and hyperlinks, while CSS describes how HTML elements are to be displayed.

Hi Experts,

I am not able set  fixed width and height for a card image in bootstrap.  I want all in same height and width for all the images.  Please see the below image.

tosend.png
I had tried setting min-width:100% height:40vh and object-fit:cover but not able to resolve this issue.   Please find below the debugger window details

tosend.JPG
Please see the below code

 return (
          <div  key={i.id} className={`card paper ${this.props.selected == i.id ? ' selected': ''}`}
                 style={{width:dimension, height:dimension+50}} onClick={() => this.props.actions.viewItem(i)}>

              {!i?.source?.brand ? null :
               <img src={i.source.brand} className="card-img-top img-fluid "  alt={i.source}/>
              }
              <img src={thumbnail} alt={i.title} className="card-img-top img-fluid" style={{width:"100%!important", 'min-width':"100%",height:"15rem", 'object-fit':'cover'}}/>
            <div className="card-body">
               <p class="card-text"> {i.title} {' '} <span style={{color: '#777'}} > {date} </span></p>
            </div>
         </div>);
         });

Open in new window


Please help me in resolving this issue.

With many thanks,
Bharath AK
0
I am trying to adjust the height of input type in bootstrap 4, which has following sample markup.

is there a quick way to do just the input types?

 <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
0
I am using bootstrap 4 in asp.net web site. how to apply bootstrap dropdown style to asp net controls. for example, asp:dropdown.

<asp:dropdown id="ddl" runat="server" /> .

also, when we use  bootstrap classes to create form and inputs , like below. how to add  vertical space between the inputs ?

<div class="form-control">
   <div class="row">
       <div class="col-6>
            <div class="form-group">
                   <asp:textbox id="txt" runat="server">
              </div>
              ,<div class="form-group">
                     <asp:dropdown .....
0
Hi,

I have a signup form in div tag today. And that is a model open at the bottom of the site.
We have full control of form in that today.
Now this form needs to be submitted to external url.
Now once user submits the form data to be posted in external url.
Once the data is successfully submitted then the external URL will redirect to thankyou page or error page which is configured.
We pass thank you page or error page full url in hidden field.

Please help me how to submit the form in div (model) and the re-direction to success page should open in the same div tag only.

I used iFrame for that. But it is not working well. Please advice.

I have form in subscribeform.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <form action="http://www.externalurl.com">
        <input id="SucccessURL" type="http://www.mysite.com/thankyou" />
        <input id="ErrorURL" type="http://www.mysite.com/erroronSubscribe" />
        First name:<br>
        <input type="text" name="firstname" value="Mickey">
        <br>
        Last name:<br>
        <input type="text" name="lastname" value="Mouse">
        <br><br>
        <input type="submit" value="Submit">
    </form>
</body>
</html>

Open in new window



<div class="modal fade" id="news-sign-up" tabindex="-1" role="dialog" aria-labelledby="myModallabel" aria-hidden="true">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-body">

                <a class="close" data-dismiss="modal" aria-hidden="true">Close</a>
                <h2>Subscribe</h2>
                <iframe width="100%" height="100%" src="http://localhost:2014/subscribeform.html"></iframe>
            </div>
            <!-- /.modal-content -->
        </div>     
        <!-- /.modal-dialog -->
    </div>
</div>
@Html.Partial("~/Views/Contact/Partial/InvalidCaptcha.cshtml")

Open in new window

0
I'm trying to open a modal and then set the innerHTML of a span, but can't seem to get it working.

The modal is

        Modal::begin([
            //'header'=>'<h4>Add a New Company</h4>',
            //'headerOptions' => ['id' => 'modalHeader'],
            'id'=>'modalPopup',
            'class'=>'modalPopup',
            'size'=>'modal-lg',
            'header' => '<span id="modalHeaderTitle"></span>',
            'headerOptions' => ['id' => 'modalHeader'],
            'closeButton' => [
                'label'=>'Close',
                'id'=>'closeButton',
                'class'=>'btn btn-warning pull-right',
            ],
            'clientOptions' => [
                'backdrop' => 'static', //true,
                'keyboard' => false, // true,
            ]
        ]);
        echo '  <div id="modal-system-messages" style="opacity: 1; display: none"></div>';
        echo "<div id='modalContent'></div>";
        Modal::end();

Open in new window


And then my js for the calling button is

$(function(){
    $('.showModal').click(
        function (){
            //Open the modal window
			$('#modalPopup').modal('show')
				.find('#modalContent')
				.load($(this).attr('value'));
			// Set the modal title span
			// alert($(this).attr('title'));
			$('#modalPopup #modalHeader #modalHeaderTitle').innerhtml = '<h4>' + $(this).attr('title') + '</h4>';
        }
    );
});

Open in new window


I have validated that alert($(this).attr('title')); is returning the proper value but the .innerHTML line does nothing.

Thank you for your help.
0
Hi,
I'm trying to make an image to fit the full height of a div in the body of the page. I'm using master pages.

This is the code in the master page:

<html>
<head runat="server">
    <title></title>
   <meta name="viewport" content="width=device-width, initial-scale=1"/>
   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>


</head>
  


<body>
    <form id="form1" runat="server">
        <nav class="navbar navbar-expand-lg  navbar-light bg-primary  fixed-top">
            <a class="navbar-brand" href="#">Navbar</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="navbar">
                <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
                    <li class="nav-item active">
                        <a class="nav-link" href="#">Item 1 <span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Item 2</a>
                    </li>
           

Open in new window

0
Here's a screenshot that shows my dilemma:



Notice how my "reviews | shipping & returns | checkout | login" menu is overlapping the company's logo?

Why?

And how can I fix that?

Here's my code:

<!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 http-equiv="x-ua-compatible" content="ie=edge">
	<title>Hardwood Timber &amp; Transportation Services | Camden, Tennessee | Admin Page</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<link href="css/bootstrap.min.css" rel="stylesheet">
	<!--<link rel="stylesheet" href="css/style.css">-->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
	<style>
	@media (max-width: 766px) {
		
		.company_logo {
			float: none !important;
			margin:auto;
			display:block;
			margin-top:15px;
		}

		.shopping_cart {
			margin:auto;
			display:block;
			margin-bottom:10px;
			background-image:url('images/shopping_cart.png'); 
			background-repeat:no-repeat; 
			width:267px; 
			height:106px;
		}
		
		.company_logo {
			margin-bottom:25px;
		}

		.content {
			max-width:625px; 
			border:1px solid #4f77b3;
			-moz-border-radius: 14px 14px 14px 14px; 
			border-radius: 14px 14px 14px 14px; 
			box-shadow:7px 7px 

Open in new window

0
I need to create a background image on a page that's using Bootstrap. The div that has this image within it is also going to have some dynamic text that will let the user know how many items they have in their Cart.

Not sure how to pull this off...

Here's the way my page looks right now:



The way that it needs to look is this:



Here's my index page:

<body>
<div class="container-fluid" style="overflow:hidden; background-color:#ffffff;">
	<div class="row-fluid">
		<div class="col-md-6 col-sm-6 col-xs-12 company_logo">
			<img src="img/logo.jpg" class="img-responsive company_logo">
		</div>
		<div class="col-md-6 col-sm-6 col-xs-12 shopping_cart">
			hello
		</div>

Open in new window


...and here's my css:

/*
at 575px, you're now in the "col-xs" zone
@media(max-width:767px){} -> XS
@media(min-width:768px){} -> SM
@media(min-width:992px){} -. MD
@media(min-width:1200px){} -> LG
*/

@media(max-width:576px) {

		.company_logo  {
			margin-left:auto;
			margin-right:auto;
			display:block;
			text-align:center;
			background-color:#cccccc;
		}
		
		.shopping_cart {
			float:none !important;
			margin-left:auto;
			margin-right:auto;
			text-align:center;
			background-color:#cccccc;
			background-image:url("../img/shopping_cart.png");
			background-repeat:no-repeat;
			width:237px;
			height:106px;
		}

		.content {
			max-width:625px; 
			border:1px solid #4f77b3;
			-moz-border-radius: 14px 14px 14px 14px; 
			

Open in new window

0
what is major difference between

<div class="d-flex flex-row
<div d-flex flex-column

vs regular

<div class="col" and <div class="row"

construct. do we use the flex-row and flex-column construct, similar to bootstrap 3 , or these are for totally different purpose.
0
Learn SQL Server Core 2016
LVL 12
Learn SQL Server Core 2016

This course will introduce you to SQL Server Core 2016, as well as teach you about SSMS, data tools, installation, server configuration, using Management Studio, and writing and executing queries.

I have an html page, with header, main content , footer and left hand side menu.
I have used a container class ( shown below in the example). I understand the max-width of the container changes with the size of the device and thus giving it's responsive nature.
but is it possible, to stop this behavior at some minimum width.

right now , if I view my page (sample html below), in a smaller laptop screen, the main content area is stacked below the leftMenu div. I would like to show the leftMenu and main content , side by side all the time, and when screen is too small have a horizontal scroll bars.
how can i achieve this?

<html>
    <div id="header class="container">
    </div>
     <div id="content" class="container">
         <div id="leftMenu">  </div>
         <div id="main content">  </div>
      </div>
      <div id="footer" class="container"></div>
</html>

Open in new window

1
what would css classes look like for the header, mainmenu classes  , if I want to equal space between the li elements in following construct.

also , if mainmenu div appears at the bottom of the header, and is centered, of the header div.

I'm using bootstrap , so I have wrapped everything inside the container class, but I don't want to use navigation classes from bootstrap.

<div class="container">
   <div class="header">
      <div class="mainMenu">
        <ul>
            <li><a>Home</a></li>
            <li><a>About</a></li>
            <li><a>Help</a></li>
         </ul>
      </div>
    </div> ----end of header

     <div>
       ---content----------------------
   </div>
</div>

Open in new window

1
I am new to bootstrap. I have a page set up with a bootstrap grid and form controls  (example below) .
I have two sets of user input controls, applicable in two different scenarios.


if only set of first input controls is applicatble to a user, I would like to hide the second col, and
expand first column to take the full width inside the container?

how can i achieve this  


<div class="container">
  <div class="row">
    <div class="col-sm-6">    
       .... <-- first set of input controls -->
    </div>
    <div class="col-sm-6">
      ... <-- second  set of input controls -->
    </div>  
  </div>
</div>
0
example contrived for this question. I have a dropdown select control as such in my HTML page. I want to give it a slicker look.
for example, at the end of the dropdown, there is an downward arrow.
if i want to change the size, or use a different icon for the downward arrow. How can I do that?

or do i use bootstrap , to create such control. but still I don't know how would i change such icon?


<!DOCTYPE html>
<html>
<body>

<div class="newdropdown">
<select>
    <option value="abc">abc</option>
    <option value="ijk">ijk</option>
    <option value="pqr">pqr</option>
    <option value="xyz">xyz</option>
    </select>
</div>
</body>
</html>
0
I'm utilizing bootstrap 4 to create navigation and dropdown menu for my website.

how can I customize, or override default  color, size of dropdown and navigation menu?
0
<nav style="background-color:#ffffff;" id="quick-tool-nav" class="navbar navbar-expand-lg navbar-light ">
                              <a style="color: black; margin-right: 50%" class="navbar-brand" href="#">Quick Tools</a>
                              <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#rbtNavbar" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
                                <span class="navbar-toggler-icon"></span>
                              </button>

 <!-- Tabs -->
						<div class="collapse navbar-collapse active" id="rbtNavbar">
							<ul class="nav navbar-nav">

								<!-- 1st Tab Button -->
								<li class="active">
									<a data-toggle="tab" href="#simple_1">
										<i class="fa fa-heart-o"></i>
										<span>Notes</span>
									</a>
								</li>
                                <li >
									<a data-toggle="tab" href="#simple_2">
										<i class="fa fa-heart-o"></i>
										<span>Activity</span>
									</a>
								</li>
                                   <li >
									<a data-toggle="tab" href="#simple_3">
										<i class="fa fa-heart-o"></i>
										<span>Email</span>
									</a>
								</li>
                                

								

							</ul> <!-- /.nav.navbar-nav -->
						</div> <!-- /Tabs -->
                    </nav>

Open in new window



anyone see why my nav looks like this ?

nav
0
Hi,

I have a regular css bootstrap Modal looking like this:

 <!-- modal default -->
                <div id="myModal2" aria-hidden="true" aria-labelledby="myModalLabel" class="modal fade" role="dialog" tabindex="-1">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button aria-label="Close" class="close" data-dismiss="modal" type="button"><span aria-hidden="true">&times;</span></button>
                                <h4 id="myModalLabel" class="modal-title">Modal title</h4>
                            </div>
                            <div class="modal-body">
                                <p>Aliquam erat volutpat. Proin lacus erat, aliquam id efficitur sit amet, mattis vel urna. Pellentesque malesuada turpis vitae vestibulum facilisis. Aliquam vehicula felis vel justo consectetur, quis volutpat tellus consequat. Aliquam tellus lacus, eleifend at leo vitae, imperdiet cursus ex. Sed sodales augue euismod felis auctor auctor. Suspendisse sodales fermentum dolor sed mattis. Ut ipsum nunc, volutpat non velit a, tristique tempor mauris. Duis ac finibus lectus. Cras blandit eros ac diam luctus mattis. Nam dignissim mattis blandit. Nulla facilisi. Nullam non massa ac mauris efficitur congue aliquet ut orci.</p>
                                <p>Maecenas volutpat, massa rhoncus eleifend sagittis, sem nulla mollis ante, non porta 

Open in new window

0
Twp questions on this page: https://www.gopherstateevents.com/results/cc_rslts/cc_rslts.asp

1) Why is there so much space above and below the horizontal list beginning with "Awards" and how can I minimize that?
2) If I used a data table for the Individual Results, would that increase, decrease, or have no impact on load time?

Thank you!
0
After successfully inserting a record using the try,,catch.., I 'd like to use a bootstrap call to display the message as shown below.
     try
                {
                    // Do something
                    AppThis.InsertUpdateProduct();
             
            // I'd like to display the message calling a bootstrap alert  saying "Successfully added!"
                     
                }
                catch (Exception ex)
                {
                    // Log 
                    string strErrNum = ex.Message.ToString();

                    // Display message to users

                }

Open in new window

0
JavaScript Best Practices
LVL 12
JavaScript Best Practices

Save hours in development time and avoid common mistakes by learning the best practices to use for JavaScript.

I created a search engine and is displaying results from the  database and beneath the results is a bootstrap modal for which am displaying some selected results in there
Problem is that i want to for each results fetched eg row 1 of id 1 should displayed the contents for id 1 and not any other but here in this if  3 results is found, it displays the 3rd  results for all which shouldn't be the case.
Beneath is an images that shows the above...Any help to solve this is highly appreciated.




<?php
$button = $_GET [ 'submit' ];
$search = $_GET [ 'search' ];
if( !$button )
          echo "you didn't submit a keyword";
else {
    if( strlen( $search ) <= 1 )
            echo "Search term too short";
            else { echo "You searched for <b> $search </b> <hr size='1' > </ br > ";
            $conn = mysqli_connect( "localhost","root","",'register') ;
            $search_exploded = explode ( " ", $search );
            $x = 0;
            foreach( $search_exploded as $search_each ) {
                  $x++; $construct = "";
                  if( $x == 1 )
					  
                      	$construct .="keyword LIKE '%$search_each%' OR qualifications1 LIKE '%$search_each%' OR dept LIKE '%$search_each%' ";
                           else
					   	$construct .="AND keyword LIKE '%$search_each%' OR AND qualifications1 LIKE '%$search_each%' OR AND dept LIKE '%$search_each%' ";
				
          }
          $construct = " SELECT * FROM users WHERE $construct ";
          $run

Open in new window

0
I am using bootstrap grid and responsive table.  I need to show four tables in a row. So my code looks like this..

<div class="row">
      <div class="col-sm-3">

        
      <div class="responsive-table">
        <table class="table table--bordered table--nostripes table--wrap table--compressed table--nowrap--col--1">

          <thead>
          <tr>
            <th colspan="2" class="text-center">How Bad</th>
          </tr>
          </thead>

          <tbody>
          <tr>
            <td style="border:none">Priority:</td>
            <td style="border:none">NA</td>
          </tr>
          <tr>
            <td style="border: none">DE-priority:</td>
            <td style="border: none">3</td>
          </tr>
          <tr>
            <td style="border: none">BadCodeFlag:</td>
            <td style="border: none">N</td>
          </tr>
          <tr>
            <td style="border: none">Regression:</td>
            <td style="border: none">Y</td>
          </tr>
          <tr>
            <td style="border: none">Is-customer-visible:</td>
            <td style="border: none">Y</td>
          </tr>
          <tr>
            <td style="border: none">Not-customer-visible-reason:</td>
            <td style="border: none">Defect ignored - The IGNORE/PREFCS flags are in the RNE-More Info:<a
              href="http://swtg.cisco.com/display/BST/When+a+Bug+is+Not+Visible+to+Customers">Visibility Conditions </a>
            </td>
          </tr>
          </tbody>

Open in new window

0
Hi experts!

I was working on the bootstrap modal. I was able to insert a datatable into the modal and everything displays properly via ajax sync. The datatable also has a input field for quantity (I inserted <input> as text) and I wished to do another ajax sync and took the input from user and updated the database (mysql). For some reason I had a js script to do that but I couldn't get it to work. I found a way to get around was that when I worked on the 1st ajax sync (insert data into datatable in the modal) I needed to add a <script src="xxxx/xxx.js"/> into the ajax section. I could then make my 2nd ajax sync work. was this a good way to update the database or there is a better way?  (Is there a way for me not to add that <script src="xxx/xx.js"/> into the ajax code but rather include in my original js script?) Let me know Thanks!
0
Hi All,
Advance thanks!
Using C#, mvc , bootstrap.
I need a help to set multiple line attribute on text box.

@Html.TextBoxFor(m => m.Other, new { id = "txtOther", @class = "textBoxmulti" })


.textBoxmulti {
            border: 1px solid #e2e2e2;
            background: #fff;
            color: #333;
            font-size: 1.0em;
            margin: 5px 0 6px 0;
            padding: 5px;
            width: 800px;
            height: 40px;
      }


Model
======
            [Display(Name = "Other Changes")]
            [DataType(DataType.MultilineText)]
            public string Other { get; set; }

Still not accepting new line.

Kind regards,
Pooja
0
Hi experts, I am trying to design an app that works with mobile devices and desktop computers.  I am designing the app with bootstrap and php, and everything works fine ON A DESKTOP COMPUTER (saving and retrieving cookies), but IT IS NOT working on mobile devices like android. Any suggestions on how to do it ? I am going to describe the situation

* The user Logs in , I verify the user name and password from a SQL database
* I want to save and retrieve the password in ALL webpages that the user browse into my domain
   This is so the user won't be needed to log in every time a page is loaded or reloaded (ex. to enter a NEW work order, the credentials would be already saved)

This system works in a PC mode because of the cookies BUT NOT on Android or apple devices, Any suggestions ? I just want to save credentials like a cookie, but I want to work in any environment (PC, apple or any mobile device connected to the internet)

I am open to suggestion that would work like saving cookies or something similar.

Tnx for your help
0
Here's the code using bootstrap framework

What I'd like to do if I hover on "Application", the 2 listitems will automatically display even without clicking. I need a css or script to accomplish it.
 
<ul class="navbar-nav">
                    <li class="nav-item">
                        <a href="#" class="nav-link">Application</a>
                        <ul class="dropdown-menu">
                            <li>
                                Supported
                            </li>
                            <li>
                                Unsupported

                            </li>
                        </ul>

                    </li>.....

Open in new window

I would like to hover the
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.

Top Experts In
Bootstrap
<
Monthly
>