Tips for positioning buttons in a row below dynamic text using Bootstrap 3

Is there a way to align buttons under a variable piece of text in Bootstrap 3? Currently, when the code example is viewed in full screen, the three buttons do not align horizontally.

Current Behavior:

https://i.sstatic.net/lEQ7o.png

My goal is to have the three blue buttons aligned horizontally.

  • Additionally, I would like the buttons to be centered instead of left-aligned in Xs and Sm scaling. I prefer not to use <br> spacers for this purpose.

How can I achieve this? Any help and advice would be greatly appreciated.

Expected Result:

https://i.sstatic.net/HuMA9.png

Current Behavior: Code Example (Click "Expand Snippet" for full code)

<!DOCTYPE html>
<html lang="">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Title Page</title>

  <!-- Bootstrap CSS -->
  <link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">

  <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
            <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
            <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
</head>

<body>

  <div>
    <div class="col-md-4">
      <h3><b>penatibus</b></h3>
      <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi leo risus, porta ac consectetur ac,
        vestibulum at eros. Vestibulum id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
      <div>
        <a href="#" class="align-self-end btn btn-primary btn-lg active" role="button">View Details &gt;&gt;</a>
      </div>
    </div>
    <div class="col-md-4">
      <h3><b>sociis penatibus</b></h3>
      <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi leo risus, porta ac consectetur.</p>
      <div>
        <a href="#" class="align-self-end btn btn-primary btn-lg active" role="button">VIEW DETAILS &gt;&gt;</a>
      </div>
    </div>
    <div class="col-md-4">
      <h3><b>Morbi penatibus</b></h3>
      <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi leo risus, porta ac consectetur ac,
        vestibulum at eros. Vestibulum id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
      <div>
        <a href="#" class="align-self-end btn btn-primary btn-lg active" role="button">VIEW DETAILS &gt;&gt;</a>
      </div>
    </div>
  </div>

  </div>

  <!-- jQuery -->
  <script src="//code.jquery.com/jquery.js"></script>
  <!-- Bootstrap JavaScript -->
  <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>

</html>

javascripthtmlcsstwitter-bootstrap-3bootstrap-4

Answer №1

I modified the existing HTML structure by adding two custom classes.

  1. three-section class to the parent div.

  2. text-sm-center class to the button parent div.

Below are the steps for the solution:

Solution for Button alignment:

Set a minimum height for the paragraph based on the longest paragraph.

.three-section p {
    min-height: 160px;
  }

Solution for center-aligning the button in smaller screens (xs and sm):

Create a media query with the class name text-sm-center to be applied to the button's parent div. Adjust the paragraph height to auto to override the minimum height set earlier.

@media (max-width: 767px) {
  /* Align text to center */
  .text-sm-center {
    text-align: center;
  }
  .three-section p {
    min-height: inherit;
  }
}


.three-section p {
  min-height: 160px;
}

@media (max-width: 1260px) {
  .three-section p {
    min-height: 200px;
  }
}

@media (max-width: 962px) {
  .three-section p {
    min-height: inherit;
  }
  .text-sm-center {
    text-align: center;
  }
}
<!DOCTYPE html>
<html lang="">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Title Page</title>

  <!-- Bootstrap CSS -->
  <link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">

  <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
            <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
            <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
</head>

<body>

  <div class="three-section">
    <div class="col-md-4">
      <h3><b>penatibus</b></h3>
      <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi leo risus, porta ac consectetur ac,
        vestibulum at eros. Vestibulum id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
      <div class="text-sm-center">
        <a href="#" class="align-self-end btn btn-primary btn-lg active" role="button">View Details &gt;&gt;</a>
      </div>
    </div>
    <div class="col-md-4">
      <h3><b>sociis penatibus</b></h3>
      <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi leo risus, porta ac consectetur.</p>
      <div class="text-sm-center">
        <a href="#" class="align-self-end btn btn-primary btn-lg active" role="button">VIEW DETAILS &gt;&gt;</a>
      </div>
    </div>
    <div class="col-md-4">
      <h3><b>Morbi penatibus</b></h3>
      <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi leo risus, porta ac consectetur ac,
        vestibulum at eros. Vestibulum id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
      <div class="text-sm-center">
        <a href="#" class="align-self-end btn btn-primary btn-lg active" role="button">VIEW DETAILS &gt;&gt;</a>
      </div>
    </div>
  </div>

  <!-- jQuery -->
  <script src="//code.jquery.com/jquery.js"></script>
  <!-- Bootstrap JavaScript -->
  <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

Answer №2

Set a minimum height for the corresponding p element.

Here's a solution to try:

p{min-height:160px;}
<!DOCTYPE html>
<html lang="">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Title Page</title>

  <!-- Bootstrap CSS -->
  <link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">

  <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
            <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
            <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
</head>

<body>

  <div>
    <div class="col-md-4">
      <h3><b>penatibus</b></h3>
      <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi leo risus, porta ac consectetur ac,
        vestibulum at eros. Vestibulum id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
      <div>
        <a href="#" class="align-self-end btn btn-primary btn-lg active" role="button">View Details >></a>
      </div>
    </div>
    <div class="col-md-4">
      <h3><b>sociis penatibus</b></h3>
      <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi leo risus, porta ac consectetur.</p>
      <div>
        <a href="#" class="align-self-end btn btn-primary btn-lg active" role="button">VIEW DETAILS >></a>
      </div>
    </div>
    <div class="col-md-4">
      <h3><b>Morbi penatibus</b></h3>
      <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi leo risus, porta ac consectetur ac,
        vestibulum at eros. Vestibulum id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
      <div>
        <a href="#" class="align-self-end btn btn-primary btn-lg active" role="button">VIEW DETAILS >></a>
      </div>
    </div>
  </div>

  </div>

  <!-- jQuery -->
  <script src="//code.jquery.com/jquery.js"></script>
  <!-- Bootstrap JavaScript -->
  <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>

</html>

Answer №3

.col-md-4
{
   display: flex;
   flex-direction: column;
   height:20em;
}

.col-md-4 > p
{
    flex:1 0 auto;
}
<!DOCTYPE html>
<html lang="">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE-edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Title Page</title>

  <!-- Bootstrap CSS -->
  <link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">

  <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js does not work if you view the page via file:/// -->
  <!--[if lt IE 9]>
            <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
            <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
</head>

<body>

  <div>
    <div class="col-md-4">
      <h3><b>penatibus</b></h3>
      <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi leo risus, porta ac consectetur ac,
        vestibulum at eros. Vestibulum id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
      <div>
        <a href="#" class="align-self-end btn btn-primary btn-lg active" role="button">View Details &gt;&gt;</a>
      </div>
    </div>
    <div class="col-md-4">
      <h3><b>sociis penatibus</b></h3>
      <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi leo risus, porta ac consectetur.</p>
      <div>
        <a href="#" class="align-self-end btn btn-primary btn-lg active" role="button">VIEW DETAILS &gt;&gt;</a>
      </div>
    </div>
    <div class="col-md-4">
      <h3><b>Morbi penatibus</b></h3>
      <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi leo risus, porta ac consectetur ac,
        vestibulum at eros. Vestibulum id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
      <div>
        <a href="#" class="align-self-end btn btn-primary btn-lg active" role="button">VIEW DETAILS &gt;&gt;</a>
      </div>
    </div>
  </div>

  </div>

  <!-- jQuery -->
  <script src="//code.jquery.com/jquery.js"></script>
  <!-- Bootstrap JavaScript -->
  <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>

</html>

Answer №4

I experimented with a few solutions to address your issue. I made some adjustments to the classes and CSS.

.row-eq-height {
      display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
.col-eq-height{display:flex;flex-flow: column;}
.mt-auto{margin-top:auto;}
<!DOCTYPE html>
<html lang="">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Title Page</title>

  <!-- Bootstrap CSS -->
  <link href="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">

  <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
            <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
            <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
</head>

<body>

  <div class="row row-eq-height">
    <div class="col-md-4 col-eq-height">
      <h3><b>penatibus</b></h3>
      <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi leo risus, porta ac consectetur ac,
        vestibulum at eros. Vestibulum id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
      <div class="mt-auto">
        <a href="#" class="align-self-end btn btn-primary btn-lg active" role="button">View Details &gt;&gt;</a>
      </div>
    </div>
    <div class="col-md-4 col-eq-height">
      <h3><b>sociis penatibus</b></h3>
      <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi leo risus, porta ac consectetur.</p>
      <div class="mt-auto">
        <a href="#" class="align-self-end btn btn-primary btn-lg active" role="button">VIEW DETAILS &gt;&gt;</a>
      </div>
    </div>
    <div class="col-md-4 col-eq-height">
      <h3><b>Morbi penatibus</b></h3>
      <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi leo risus, porta ac consectetur ac,
        vestibulum at eros. Vestibulum id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
      <div class="mt-auto">
        <a href="#" class="align-self-end btn btn-primary btn-lg active" role="button">VIEW DETAILS &gt;&gt;</a>
      </div>
    </div>
  </div>

  </div>

  <!-- jQuery -->
  <script src="//code.jquery.com/jquery.js"></script>
  <!-- Bootstrap JavaScript -->
  <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>

</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Endless looping of numerous consecutive animations

Is it possible to apply two animations to an element using only CSS and without the need for JavaScript? These animations should run sequentially an infinite number of times. @keyframes show { from, to { z-index: 100; } } @keyframes wait { ...

csscss-animations

Utilizing Node.js for Gmail API: Extracting Inline/Embedded Images

When working with email data, one approach is to use the gmail.users.messages.get() method. After fetching the email data, there are two functions used to handle the payload. function getBody(message) { var encodedBody = ''; try{ i ...

javascriptnode.jsgmailgmail-api

Is it possible to run both the frontend and backend on the same port when using vanilla JavaScript for the frontend and Node.js for the backend?

Is it possible to run frontend and backend on the same port in Rest APIs if using vanilla JS for the frontend and Node.js for the backend? I've come across information on how to do this with React, but nothing specific to vanilla JS. Any insights on t ...

javascripthtmlnode.jsexpresshttpserver

handlebars.js template to check the condition based on the last item in an array

I am currently utilizing handlebars.js as my templating engine and am interested in creating a conditional segment that will only display if it happens to be the final item within an array located in the templates configuration object. { columns: [{< ...

javascriptarrayshelperhandlebars.jstemplating

The safari browser is not displaying the menu

I have recently been working on a new website and created a fresh menu for it. While the menu functions perfectly on browsers like Chrome and Firefox, I encountered an error when testing it on Safari. On Safari, the menu appears to be completely hidden. ...

csssafariviewporthidden

Using the same component multiple times within a parent component in Angular 2

I have a CarsComponent where I repeatedly use the ChartComponent in its template, as shown in the code snippet below: cars.component.html: <div class="row" *ngIf="selectedItemId"> <div class="col-12 mb-2&quo ...

javascriptangulartypescriptnebular

Eliminate the tiny space between the top of the webpage and the navigation bar

I've made several attempts to eliminate the gap between the navigation and the top by setting margin: 0; and border-box in various places to no avail. Strangely, I couldn't get the navigation bar to stick, so I had to resort to making the header ...

htmlcss

Modifying the Trim Function in AngularJS

Using AngularJS version 1.5.6, I encountered a bug in my large application due to the default behavior of trimming input for text type inputs. Wanting to change this behavior globally without manually updating every textarea and text input element, I am se ...

javascriptangularjsinputangularjs-directivetextarea

The best way to close a swipeable drawer from a different class

I'm feeling a bit puzzled by the explanation of SwipeableDrawer on the Material-ui website. Here's the setup I have: there's a Component called 'Sidebar' that opens a SwipeableDrawer when a user clicks a button on the appbar or swi ...

javascriptreactjsmaterial-uireact-propsreact-state

Creating a hierarchical JSON structure to populate a Handlebars template (HTML) for an iterative component, allowing for the display of three levels of interconnected

Currently, I am working on developing a mega menu component that involves three levels of content. Level 1 (L1): This level is displayed horizontally in a traditional navbar. When hovered over, it expands to reveal the mega menu. Level 2 (L2): These item ...

javascripthtmljsonhandlebars.js

Error will be thrown if the initialDueDate parameter is deemed invalid in Javascript

Can someone help me improve the calculateNextDueDate function which takes an initialDueDate and an interval to return the next due date? I want to add argument validation to this function. Any suggestions would be greatly appreciated. Thank you! const I ...

javascriptnode.jsdatemomentjs

The process of creating a React build varies greatly from the initial development phase

Thank you for offering to help me! After building my React web app, it looks very different from development mode. I use serve -s build to monitor the app build. However, even on my online DigitalOcean server, it doesn't appear the same as in develop ...

javascriptcssreactjsbuildstyled-components

What is the best way to transform a JSON array in text format into a JSON object array using NodeJS or JavaScript?

I have a RESTful API built with Node.JS and ExpressJS. I want to retrieve a JSON array from the FrontEnd and pass it into my API. api.post('/save_pg13_app_list', function (req, res) { var app_list = { list_object: req.body.li ...

javascriptarraysnode.jsjson

Customizing the jQuery Datepicker to only allow a predefined set of dates

I am looking for assistance regarding the jQuery datepicker. I have an array of dates and I need to disable all dates except for the ones in this specific array. Currently, the code I have does the opposite of what I need. I generate the array of dates in ...

javascriptphpjquerydatedatepicker

Removing a outside div element based on a dropdown change in ASP.NET jQuery

this is the structure of my unique div <div class="row-fluid"> <div class="span12"> <div style="overflow: auto; width: 90%;" class="goleft"> <div style="display: inline-block; width: 200px;"> ...

jqueryhtmlasp.netcanvas

Tips for resolving dependency conflicts in a JavaScript project starter template

Currently, I'm utilizing the Airframe React template and the procedure seems quite simple: Extract the files and execute npm install in the project directory. However, an issue arises when running npm install as follows: npm WARN config global `--glob ...

javascriptnode.jsreactjsnpmdependencies

A React-based frontend solution designed exclusively for managing data structures and databases

Challenges with Product Management In my React App, the shop features products sourced solely from a JSON file as an external API, all managed on the frontend. Recently, I encountered a product with limited availability - only 20 pieces in stock. I am uns ...

javascriptreactjsdatabasefirebasefrontend

Tips for getting a browser to clear the cache specifically for the .html files on your website

After making updates to a client's website, I'm encountering an issue where the browser is displaying a cached version of the site. The website consists of static .html files. Although clearing my browser's cache resolves the issue for me, I ...

htmlcachingbrowser

Exploring the functionality of the Aria role attribute within Angular 2

It's strange that the ARIA role attribute doesn't seem to be functioning as expected for me in Angular 2. I attempted to assign a div role of "listbox" and set the children as role "option", but it still doesn't work. Could someone assist m ...

htmlangularwai-ariaangular4-forms

What steps are necessary to activate javascript in HTML for WebView?

I recently discovered that when my HTML/JavaScript site is visited via an Android webview, JavaScript is disabled by default. This causes a pricing list on my page to not display properly because it requires a JavaScript class to be added for it to open. I ...

javascriptandroidjqueryhtmlwebview