Utilize the bootstrap grid to align content into 4 columns evenly

I have the following code snippet:

<div class="panel-body">   
    <div class="col-sm-6">
        <label class="head6">Business Name : </label><span class="head9">'.$name.'</span>
    </div>
    <div class="col-sm-6">
        <label class="head6">Website URL : </label><span class="head9">'.$url.'</span>
    </div>
    <div class="col-sm-6">
        <label class="head6">Tagline : </label><span class="head9">'.$tagline.'</span>
    </div>
    <div class="col-sm-6">
        <label class="head6">Description : </label><span class="head9">'.$descrip+'</span>
    </div>
    <div class="col-sm-6">
        <label class="head6">Business Email : </label><span class="head9">'.$bemail.'</span>
    </div>
    <div class="col-sm-6">
        <label class="head6">Address : </label><span class="head9">'.$address+'</span>
    </div>
    <div class="col-sm-6">
        <label class="head6">City : </label><span class="head9">'.$city+'</span>
    </div>
</div>

When rendered, it looks similar to this https://i.stack.imgur.com/FfVJg.png.

I am looking to align the variables to the right and maintain responsiveness using grid system when browser is resized.

htmlcsstwitter-bootstrapgridmultiple-columns

Answer №1

Give this a shot:

Try incorporating the Bootstrap predefined pull-right selector to all instances of <span class="head9">, like so: 

<span class="head9 pull-right">

Check out this Fiddle for reference

Alternatively, you can update your HTML code as follows:

<div class="col-sm-6">
  <div class="halfL">
    <label class="head6">Business Email :</label>
  </div>
  <div class="halfR">
    <span class="head9">'.$bemail.'</span>
  </div>
</div>

Don't forget to adjust your CSS with the following styling changes:

.halfL{
  width:50%;
  float:left;
}
.halfR{
  width:50%;
  float:right;
}

Answer №2

                <div class="col-sm-6 col-md-3">
                    <label class="head6">Company Name : </label><span class="head9">'.$name.'</span>
                </div>

                <div class="col-sm-6 col-md-3">
                    <label class="head6">Website Link : </label><span class="head9">'.$url.'</span>
                </div>

                <div class="col-sm-6 col-md-3">
                    <label class="head6">Slogan : </label><span class="head9">'.$tagline.'</span>
                </div>

                <div class="col-sm-6 col-md-3">
                    <label class="head6">Details : </label><span class="head9">'.$descrip.'</span>
                </div>

                <div class="col-sm-6 col-md-3">
                    <label class="head6">Business Email Address : </label><span class="head9">'.$bemail.'</span>
                </div>

                <div class="col-sm-6 col-md-3">
                    <label class="head6">Location Address : </label><span class="head9">'.$address+'</span>
                </div>

                <div class="col-sm-6 col-md-3">
                    <label class="head6">City/Town : </label><span class="head9">'.$city+'</span>
                </div>

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

Leveraging Vue properties within CSS styling

I am looking to utilize Vue data/prop variables within the <style> tag located at the bottom of my component. For example, suppose I have a component structured like this: <template> <div class="cl"></div> </template> < ...

javascripthtmlcssvue.js

Creating a WordPress Infographic: How to Design a "Wide" Graphic

I have a question for those who are experienced with infographics. I'm in the process of getting an infographic designed for my blog and I've noticed that some websites have a feature that allows the infographic to expand to full width when you c ...

phpcsswordpress

Capturing Ajax Success in Rails

After extensive googling, I have been unable to find my mistake. As a beginner with JS, this may be an easy fix for someone with more experience. Working with Rails 4. I am working on a modal that contains a form and I want to perform certain actions afte ...

javascriptruby-on-railsajaxtwitter-bootstrapruby-on-rails-4

Animate the service item with jQuery using slide toggle effect

Currently, I am working on a jQuery slide toggle functionality that involves clicking an item in one ul to toggle down the corresponding item in another ul. However, I am encountering difficulties in linking the click event to the correct id and toggling t ...

javascriptjqueryhtmlcss

Ways to activate paging feature in the Extension JS Basic Grid

I am currently working with an Extension Js grid and using Json to bind the data. I am trying to enable paging in the grid with a page size of '10', but unfortunately, my paging functionality is not working as expected. Below is the code snippet ...

asp.netjsonextjsgrid

The submit button remains unresponsive, yet upon removing its JavaScript code, it functions smoothly

This is the content of my index.html file. It contains JavaScript code. However, there seems to be a problem with the JavaScript validation as the Submit button does not perform any action when clicked. Surprisingly, when I remove the JavaScript code, the ...

javascripthtml

Creating a two-dimensional canvas within a div element using the console

I have some code that currently generates an image in the console when I hit F12. However, I would like to display this image inside a more user-friendly area such as a div on the webpage. I attempted to create a <div class = "mylog"> to place the i ...

javascriptjqueryhtmlcanvas

Avoiding double tapping to zoom on Chrome Android while using the desktop version of a website

Is there a way to disable zooming when double clicking in Google Chrome with the desktop site enabled? I attempted to use <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> without success. I al ...

javascriptandroidhtmlgoogle-chromeevents

Ways to invoke a JavaScript function within a child window that is already open

I am working on a project where I have a main html file. In this file, I want the user to click on something that will trigger a new window or tab to open. This new window/tab should display the dynamically generated content of a hidden div in the main htm ...

javascripthtml

Transform the CSS to a Mat-Form-Field containing a search box within it

I am currently working with Angular, Angular Material, and SCSS for my project. Here is the front-end code snippet that I am using: <mat-form-field class="custom-form-field" style="padding-top: 5px;padding-bottom: 0px; line-height: 0px; ...

cssangularangular-material

Fade out with CSS after fading in

After setting an animation property on an HTML element to display it, I want the same animation in reverse when a button is clicked to hide it. How can I achieve this effect? "Working Animation": .modal { animation: myAnim 1s ease 0s 1 normal fo ...

htmlcss

Is there a way to modify the text color of the navigation bar in Bootstrap?

How can I customize the text color of the navigation links in my Bootstrap navbar? I want to specifically change the color of the nav-links to purple while keeping the main title on the left unchanged. Here is the code snippet: <!DOCTYPE html> < ...

htmlbootstrap-4

Web Page Content Scrambling/Character Exchange

I've encountered a perplexing issue that seems to strike randomly, yet I've managed to replicate the problem on three different desktops. Oddly enough, some other desktops never experience this issue and I'm at a loss as to what could be cau ...

javascriptphphtmlgoogle-chrome

A Step-by-Step Guide on Adding Content After the Bootstrap Slider Using Absolute Position

Check out my project here: I'm currently working on a bootstrap carousel that has absolute positioning and a z-index of -1. However, I'm facing an issue where I can't figure out how to place a div right after the carousel. I've tried s ...

jqueryhtmlcsstwitter-bootstrapcarousel

"Enhance your web development skills by mastering jQuery alongside the

It's curious that jQuery doesn't support the use of the "+" sign. You can see how it functions with "1" and "3", but not with "2+". Just hover your mouse over each div to experience it. <div id="div-2+"></div> JSFiddle $('a. ...

javascriptjqueryhtmljquery-selectors

Applying binary information to an image

Let's say I have an <img/>. The img is initially set with src='http://somelocation/getmypic'. Later on, there might be a need to change the content of the image based on some ajax call that returns binary data. However, this decision c ...

javascripthtmlajaxasp.net-mvcimage

RAZOR - Strip image elements from variable with HTML content

In the code snippet below, I am using a helper to display content: @Html.Raw(Model.PageData.PageContent) My goal is to filter out any image tags that may be present. I have explored methods like .substring(), but they require specific indices or string n ...

javascripthtmlcssasp.net-mvcrazor

Displaying a modal following the closure of another modal in Bootstrap 3

In one of the modals on my webpage, there are two close buttons. The first button simply closes the modal (.btn-typoedit), while the second button (.btn-newcontact) not only closes the current modal but also opens another one immediately (#change-contact). ...

jquerytwitter-bootstraptwitter-bootstrap-3bootstrap-modal

I noticed that my jquery code is injecting extra white space into my HTML5 video

Ensuring my HTML5 background video stays centred, full-screen, and aligned properly has been made possible with this jQuery snippet. $(document).ready(function() { var $win = $(window), $video = $('#full-video'), $videoWrapper = $video. ...

javascriptjqueryhtmlhtml5-videowhitespace

Next.js Image staying at the forefront

Currently, I am utilizing Tailwind CSS to style my Next.js website and incorporating the Next.js Image element for an image on the page. My goal is to display a modal over the existing page without completely blacking out the background; instead, I want i ...

htmlnext.jsjsxtailwind-cssnextjs-image