Tips for aligning controls in a column using Bootstrap

My coding issue:

<div class="col-lg-4">
  <label>Expiration ID</label>
  <div class="row ">
    <div class="col-lg-5">
      <input type="text" class="form-control input-sm" id="TextIDExpire" />
    </div>
    <div class="col-sm-4">
      <button class="btn btn-default form-control " id="BtnBrowsePhoto"> Browse <i class="glyphicon glyphicon-folder-open"></i> </button>
    </div>
    <div class="col-lg-3">
      <button class="btn bg-yellow form-control" id=" btnviewphoto"> View <i class="glyphicon glyphicon-eye-open"></i> </button>
    </div>
  </div>
</div>

Desired result is shown in this image link, but I'm encountering excessive white spaces between the controls. Seeking assistance to resolve this issue.

htmlcsstwitter-bootstrap

Answer №1

Looking to center an image? It's actually quite simple with Bootstrap! Bootstrap provides two classes, .center-block and text-center. If your image is a block element, such as when you add the img-responsive class to your img, then use the former. If you're familiar with inspecting elements in the web console and checking applied styles, you probably already know this.

If you prefer not to use a class, that's no problem. Here are the CSS rules Bootstrap uses, which you can either apply directly to your element or create a custom class matching the Bootstrap style.

// If dealing with a block element, apply this to the element itself
.center-block {
   margin-left: auto;
   margin-right: auto;
   display: block;
}

// If dealing with an inline element, apply this to the parent
.text-center {
   text-align: center;
}

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

I continue to encounter a problem where GitHub refuses to navigate links, despite them being properly configured

While working on GitHub, I encountered an issue when trying to set up a website on GitHub domains - the links were not functioning properly. Here is an example of what I was dealing with: <!DOCTYPE html> <form action="homepage.html" meth ...

htmlgithub

What is the best way to eliminate the space between two paragraphs?

Check out my awesome image! I need some help with formatting HTML data into text. Can anyone advise me on how to eliminate the space between two paragraphs? func processGetDescriptionResponse(json: JSON) { let status = json.dictionaryObject!["statu ...

htmliosiphonejsonswift

What is the best way to extract a table from a website that has stored the table data separately from the HTML?

Attempting to extract table data from the following URL: In a previous scraping attempt, the Python packages utilized were: from bs4 import BeautifulSoup import requests import mysql.connector import pandas as pd from sqlalchemy import create_engine Howe ...

pythonhtmlpandasbeautifulsouppython-requests

Sort div elements based on checkbox filters

I have a set of checkboxes that I want to use for filtering purposes. <div class="filter"> <div class="checkbox"> <label><input type="checkbox" rel="canada"/>Canada</label> </div> <div class="chec ...

javascripthtmlcheckbox

What is the best way to determine when an IndexedDB instance has finished closing?

In the world of IndexedDB, the close method operates asynchronously. This means that while close finishes quickly and returns immediately, the actual connection closure happens in a separate thread. So, how can one effectively wait until the close operatio ...

javascripthtmlindexeddb

What is the best way to increase the padding in a Colorbox modal window?

Is there a way to increase the padding in a Colorbox modal window? I want some extra space between the edges of the modal window and the actual content. I experimented with the innerWidth and innerHeight properties, but unfortunately, I didn't notice ...

jquerycsscolorbox

Displaying truncated title text

Would it be feasible to display clipped text (overflow: hidden) in a way that is fully readable when hovered over? An attempt like this: div:hover { overflow: visible; background-color: yellow; } results in the text overlapping, making it impossible ...

htmlcsshoveroverflow

Having trouble seeing the output on the webpage after entering the information

I can't seem to figure out why the result is not displaying on the HTML page, so for now I have it set up as an alert. <h1>Factorial Problem</h1> <form name="frm1"> Enter any number :<input type="text" name="fact1"& ...

javascripthtml

How can I ensure that my style.scss file effectively interacts with my stylesheet by including imports for "variables", "globals", and "header"?

Currently, I am in the process of learning how to utilize Sass and JavaScript through VS Code. Within my project structure, I have an "app" folder where my js folder resides containing script.js, as well as a scss folder holding _globals.scss, _header.scss ...

htmlstylesnav

Is it necessary to have height:0 and width:0 when display:none is already applied?

Is it necessary to include height:0 and width:0 when applying display:none to a class? I've noticed these properties being used in certain instances, could they potentially resolve any issues with compatibility in older browsers? ...

css

Creating a popup window using HTML

I am attempting to create a pop-up window using HTML, but I'm struggling to get it to appear in the desired way. My goal is this: to have a pop-up show up when the profile image is clicked on. Here's the HTML <span class="profile"><im ...

jqueryhtmlcss

Inquiries regarding the formatting of HTML tables

image description hereI'm facing an issue with displaying a table in HTML. I've been struggling for three days to find a solution, asked multiple questions without success. Any help would be greatly appreciated. I am trying to use the table tag a ...

htmlcssfrontendthymeleaf

Eliminate all blank spaces at the top and bottom of Span by squishing it

Imagine I have this code snippet: <span class="labels" style="background-color: #FFFFFF;border: 1px solid #000000;font-family: Verdana;font-size: 11px; ">74.58 ft.</span> I am looking for a way to compress the span element so that only the te ...

javascriptjquerycss

Leveraging Jquery to add an element or text in front of the initial instance of a different element

Here is a sample of my xml code: <entry> <br> <abc></abc> <xyz></xyz> <example></example> <example></example> <example></example> </entry> <entry> <br> <abc>&l ...

javascriptjqueryhtml

Using jQuery to create a div that animates when scrolling

Recently, I came across this interesting code snippet: $(document).ready(function(){ $(window).scroll(function(){ if($("#1").offset().top < $(window).scrollTop()); $("#1").animate({"color":"#efbe5c","font-size":"52pt", "top":"0", "position":"fix ...

jquerycss

Move the cursor to the bottom of a div that can be edited

I have been struggling to position the cursor at the end of the next or previous editable content tag if the current one is empty. However, when I try to set focus, it always ends up at the beginning of the text instead of the end. I've tried various ...

javascriptjqueryhtmlcontenteditable

What is the best way to locate an element in the HTML content that contains the class 'sponsored-post'?

This code snippet is flawed as it assigns 'none' to the variable article, even though the variable articles contains all the listing results. articles = soup.select('.listingResult') for article in articles: # <div class=&qu ...

pythonhtmlbeautifulsoup

move position when clicked-javascript animation

Is there a way to create a button that changes a div's position with a 2-second transition on the first click and then returns it back on the second click? I tried implementing this code, but unfortunately, it doesn't bring the div back. va ...

javascripthtmlcss

What is the best way to implement a sliding animation for a toggle button?

Currently, I am working on a toggle bar element that is functioning correctly in terms of styling the toggled button. However, I would like to add more animation to enhance the user experience. The concept is to have the active button slide to the newly s ...

cssvue.jssasscss-animations

PHP's Encoding Woes Are Back in Action

I'm encountering encoding challenges on my website, and it's becoming quite frustrating. Allow me to elaborate My meta tag specifies utf8 as the charset. The scripts I'm using also have utf8 defined (<script type="text/javascript src=". ...

phphtmlajaxpostgresqlutf-8