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

Explore three stylish ways to showcase dynamic JavaScript content using CSS

Objective: For Value 1, the CSS class should be badge-primary For Value 2, the CSS class should be badge-secondary For all other values, use the CSS class badge-danger This functionality is implemented in the handleChange function. Issue: Current ...

javascriptcssreactjs

- Bullet point: Table heading alignment variation

When it comes to centering a <th> element inside an <li>, different browsers have different approaches. In Internet Explorer, Edge, and Safari, the <th> is center-justified. However, in Chrome, Firefox, and Opera, it's left-justifie ...

csshtmlcross-browser

Anti-aliasing with @font-face in Internet Explorer versions 7 through 9

Having some trouble getting @font-face to display correctly in IE, and I haven't found a solution yet. I've looked into this resource: but unfortunately it didn't work on my Windows 7 IE. Does anyone have a better suggestion? ...

cssfont-face

The device-width value in the viewport width setting is causing issues

My angular app desperately needs a mobile responsive design as it currently looks dreadful on mobile devices. I've tried adding <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=yes">, but ...

htmlcss

When a CSS fluid layout includes a containing div with margin or padding, it may lead to

On my jsfiddle , the outermost wrapper div has a width of 100%. I am trying to create an inner div (tb_margin or tb_padding) where the content starts 40px from the left. I have attempted to use both margin and padding for this left spacing, but in both cas ...

htmlcssboxlayout

Loading identical code in two different div elements

I am in the process of designing a comprehensive resource database featuring a side-scrolling container. Once a user clicks on a thumbnail within the container, the contents of a corresponding div will fade in and display specific category content. Each di ...

javascriptjqueryhtmlcss

What could be causing the header of the datatable to be out of alignment with the rest of

I'm facing an issue with my datatable where the header is misaligned with the content. Can someone please assist me in adjusting the header and content so that they are parallel? It doesn't look right at the moment. <div style="margin-top:1 ...

javascriptjqueryhtmlcss

Switch out the arrow icon in the dropdown menu with an SVG graphic

Looking for a way to customize the dropdown caret in a semantic-ui-react component? Here's how it currently appears: <Dropdown className="hello-dropdown" placeholder="Comapany" onChange={this.someFunction} options={som ...

javascripthtmlcssreactjssvg

Angular single page application with a sleek, user-friendly navigation bar for easy browsing

I have been attempting to solve the issue at hand without much success. As a newcomer to web development, I have been working on creating a basic app using angularjs and bootstrap. My pages are fairly sparse, consisting only of a few inputs and buttons t ...

javascripthtmlcssangularjstwitter-bootstrap

I'm encountering an error with the *ngIf directive in my Angular reactive form - any ideas on

Despite my reputation, I have a question that is causing me some confusion. I am trying to create a reactive form using an example on Stackblitz. While everything seems fine in Stackblitz and the code works correctly there, I encounter an error in VS Code ...

htmlangularangular-reactive-forms

Is there a way to eliminate overflow on a section of my CSS page without sacrificing the 100vh height?

My professor requested a section in my project to have its height adjusted to the viewport, however this has created a large gap between that section and the rest of my content. How can I remove the overflow and close the gap? <main> <sect ...

htmlcss

Exploring the functionality of transitioning between pages in AngularJS with a single click within a text box

Here is my JavaScript code: var todoModule = angular.module('ToDoModule', ['ngRoute','ngTable']) .config(function($routeProvider) { $routeProvider // route ToDo page .when('/', { ...

angularjstwitter-bootstrap

How can I stop MUI Button from automatically becoming fullWidth?

One of the challenges I encountered was styling a Button component from MUI: export const ButtonStyle = styled((props) => <Button {...props} />)(({ theme }) => ({ marginTop: 8, marginBottom: 8, width: 'auto', borderRad ...

cssreactjsmaterial-ui

Lost in a sea of confusion with ember-cli-postcss and autoprefixer

I'm currently working on an ember build that incorporates autoprefixer. My issue arises from the fact that the output location for 'assets/application-name.css' has shifted from its normal path to 'app/styles/app.css', and I would ...

cssember.jsember-clipostcssautoprefixer

Implementing JavaScript Code in TypeScript

Every JavaScript code should also be valid in TypeScript, but when attempting to run the following code snippet below, an error is triggered. Could someone convert this JavaScript code into TypeScript? Error: 20:9 - TS2531 Error: Object is possibly 'z ...

javascripthtmlangulartypescriptbootstrap-4

Something seems off with Chrome

I am facing a unique issue that I need help with. Unfortunately, the code is too long to post here but essentially it involves creating a menu for a website. The menu works perfectly and looks great on all browsers except for Chrome. This is unusual as Ch ...

htmlcssgoogle-chromefrontend

Sticky sidebar panel featuring a stationary content block

I have a sidebar that is set to position:fixed; and overflow:auto;, causing the scrolling to occur within the fixed element. When the sidebar is activated, the element remains static on the page without any movement. My goal: I am looking to keep the .su ...

javascriptjqueryhtmlcss

Prevent the routing on page reload in AngularJS

My route provider setup looks like this: app.config(function ($routeProvider, $locationProvider){ $locationProvider.hashPrefix(''); $routeProvider .when('/', { templateUrl: 'login.html', controller: 'loginCtrl&a ...

htmlangularjsangular-routingroute-provider

What is the best way to adjust a fixed-width table to completely fill the width of a smartphone browser?

In an ancient web application, the design was primarily constructed using rigid tables: <div class="main"> <table width="520" border="0" cellspacing="0" cellpadding="0"> <tr> <td>...</td> </ ...

htmlcss

What is the best way to notify the user about the input in the textbox?

Imagine you have a button and an input field. How could you notify the user of what is in the input field when the button is pressed? Please provide a simple explanation of your code. ...

javascriptjqueryhtml