Is there a way to adjust the margin widths between specific columns without causing them to wrap onto a new line? I need to maintain a total of 12 columns

Check out this JSFiddle link for the code.

I am trying to adjust the vertical margin width between specific columns. I attempted to add a margin between my col-xs-4 and col-lg-4 by using mr-4.

<div class="container-fluid">
          <div class="row">
              <div class="col-4 col-xs-4 col-lg-4 mr-4">Logo</div>
              <div class="col-8 col-xs-8 col-lg-8">Title</div>
          </div>

However, this caused alignment issues in XS mode as the columns no longer fit properly, and in LG mode the columns wrap to the next line. I am aiming to achieve a similar layout to the following images in both responsive XS and LG views:

Mobile (XS)

Desktop (LG)

htmlcsstwitter-bootstrap-3bootstrap-4

Answer №1

Explained in more detail here, you have the option to apply a negative margin to the parent using mx-n*, and add positive padding to the children with px-*. For example:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />

<div class="container-fluid">
    <div class="row  mx-n2">
        <div class="px-2 col-4 col-xs-4 col-lg-4">
            <div class="p-3 border bg-light">Logo</div>
        </div>
        <div class="px-2 col-8 col-xs-8 col-lg-8">
            <div class="p-3 border bg-light">Title</div>
        </div>
    </div>
</div>

Check out the demo here

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

Selecting multiple classes to target specific children individually

Here are the steps you can follow: 1. Include two div elements on a page with identical class names. 2. Insert two elements within each div, such as paragraphs for illustrative purposes. 3. Change the text color of the first paragraph in each div to red. ...

jquerycss

Different content can be utilized with a single JavaScript code in a Django template by customizing and adapting the code

Working on a web application using Django has presented a challenge. I created an HTML template in Django and embedded JS code for that template as well. The goal is to use this JS code for various types of content displayed with the template, but it' ...

javascripthtmldjangolocal-storage

Integrating content from a separate PHP page into the main index PHP page

I can't seem to get the #container1 div on my index.php page to load with the content from another #container2 div on page1.php. It's frustrating because I've checked my file hierarchy and everything seems correct. This is how my files are ...

javascriptphpjqueryhtml

Is there a white outline on the Cordova Text Font?

Currently working on a Cordova app where I have encountered an issue with the text display. The problem lies in the white outline surrounding the text, which is not visually appealing. In my code, I have a div with the style attribute background-color: ye ...

csshtmlcordova

The alignment feature in the center is malfunctioning

I'm currently utilizing jQuery Mobile and have the following HTML along with CSS: .ui-grid-a { padding: 0; margin: 0; margin-top: 15px; height: 380px; } .ui-block-a, .ui-block-b { padding: 0; margin: 0; height: 33.3%; } .ui-block-a a, .ui-block ...

jqueryhtmlcssjquery-mobile

The validator on the W3 Schools website flagged an error for me

Has anyone encountered this particular validation error from W3 School before? I have a basic IMG element that is throwing an unusual error on line 43, column 112. I am completely baffled. Error Line 43, Column 112: Attribute target is not allowed on the ...

htmlw3c-validation

Regular expression to limit a string to a maximum of 5 consecutive numeric characters and a total of up to 8 numeric characters

I need help creating a regex pattern that limits a string to no more than 5 consecutive numeric characters and a total of 8 numeric characters. Here are some examples: 12345 => True Yograj => True Yograj1234 ...

javascripthtmlregexvalidationinput

Using Angular's ngFor directive to render 3 buttons in each row

I am attempting to show 3 buttons per div with the class "row". Using *ngFor to loop through the array to display buttons with the correct text. Here is a sample of my data: [{"NODE_ID":21.0,"NODE_DESC":"TERMINAL ASSEMBLY",&q ...

htmlangulartypescriptngfor

Safari causing misalignment in Bootstrap column layout

I am currently experiencing an issue with the alignment of Bootstrap columns in Safari. Despite being fine on Chrome and IE, the columns appear to be shifted to the right in Safari. https://i.sstatic.net/13Ci4.png https://i.sstatic.net/EiTie.png Below i ...

htmlbootstrap-4favicon

A dynamic homepage that transforms upon login, created without the use of any content management systems

I am embarking on creating a website with registration and login features without relying on any CMS, using only pure HTML/CSS and other necessary tools. My main confusion lies in how I can develop a homepage that can cater to any visitor by displaying rel ...

csshtml

Why isn't my CSS float behaving as I anticipated?

I'm currently working on a website and facing an issue. The CSS Float property is not behaving as expected. Here is my HTML Code: <div class="slider-menu"> <div class="slider-box"> <img src="agac.jpg"> & ...

htmlcss

Having trouble retrieving data with JavaScript's getElementById() function?

Alright, so here's the HTML code I currently have: <form method="post"> <ul> <li> <label for="username">Username</label> <input type="text" id="username" size="30" onblur="checkUser()" /> &l ...

phpjavascripthtml

Searching for a specific text within a column and displaying only the matching parts

My current dataframe has the following structure: RandomCol raw blah <div style="line-height:174%;text-align:left;font-size:9pt;"><font style="font-family:inherit;font-size:9pt;font-style:italic;font-weight:bold;">We ...

htmlrdataframe

Is it possible to launch a UIWebView from within another UIWebView?

I'm working on a view controller with a web view at the bottom that has clickable links. My goal is to make it so that when a user clicks on a link, a full-screen web view opens up with the content of the page they clicked on. Alternatively, I'd ...

htmliosxcodeuiwebview

How can I fix the alignment issue with my centered div?

My attempt to vertically align a centered inner DIV is not working as expected... What could be causing this issue? CSS Code: #page_bar { width: 100%; height: 30px; background-color: white } .page_bar { width: 800px; height: 30px; ...

htmlcssvertical-alignmentalignment

Why isn't it possible to send POST data to a JSON file using JQuery/AJAX?

I'm currently learning how to use JQuery/Ajax from a helpful tutorial on YouTube. To watch the video, simply click here. While I can successfully retrieve data from the order.json file, I encounter an error whenever trying to send POST requests. Bel ...

javascriptjqueryhtmljsonajax

Retrieve data from an online JSON file

I am still learning about working with json and would appreciate some guidance. The data file I need to access is located at this url - I would like to display it in the following format: <ul id="smenu"> <li></li> </ul> Cou ...

javascriptjqueryhtmlcssjson

Submitting HTML form data to a Java class via JavaScript, following validation with JavaScript within a JSP file

I am struggling with posting data obtained from an html form created in a jsp file using javascript and sending it to a java class after validating the form data. I was exploring alternatives to Ajax since I am not well-versed with those tools, but if you ...

javascriptajaxhtmljsp

How can this be written in a shorter amount of CSS code?

Seeking a more optimized solution, I am attempting to write CSS transitions for five different elements (medals/badges). Is there a way to achieve the same effect with less code? Below is the current code: #nav .badges { float:left; height: 173px; width: ...

css

How can I obtain live subprocess output updates?

I am attempting to execute the "tail - f" command on the server to receive real-time output displayed on this HTML page. However, I have not been successful in achieving this and only simple output commands are being displayed instantly. How can I utilize ...

pythonhtmllinuxflask