When you apply margins in CSS and HTML, it can cause elements to break out of the row alignment

I'm struggling with my html code that contains elements arranged in rows:

<div class = "row">
<div class="col-sm-3 cont-box">
<h1>Title1<h1>
</div>
<div class="col-sm9 cont-box">  
<img src="onepic.jpeg" class="img-responsive" alt="dum1">
</div>
</div>

Whenever I apply margins to the cont-box class, the two elements are displayed below each other instead of next to each other. It seems like a line break is automatically added. How can I fix this issue?

As a beginner in CSS and html, any guidance or advice would be greatly appreciated.

htmlcss

Answer №1

When you apply a margin to the bootstrap grid and its width exceeds the 12 column limit, it will automatically move down.

To achieve this effect, insert div elements inside both col-sm-3 and col-sm-9 classes, and then add margins to them.

 <div class = "row">
    <div class="col-sm-3">
      <div class="cont-box">
      <h1>Title1<h1>
     </div>
    </div>
    <div class="col-sm-9">  
     <div class="cont-box">
      <img src="onepic.jpeg" class="img-responsive" alt="dum1">
    </div>
   </div>
</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

A step-by-step guide on uploading a CSV file in Angular 13 and troubleshooting the error with the application name "my

I am currently learning angular. I've generated a csv file for uploading using the code above, but when I try to display it, the screen remains blank with no content shown. The page is empty and nothing is displaying Could it be that it's not ...

javascripthtmlcssangular

Comparing DOM Creation in PHP and JavaScript

My website currently does not have any ajax requests, and here is a simplified version of my code: class all_posts { public function index($id){ $statement = $db->prepare("SELECT * FROM mytable WHERE id = :id"); $statement->exe ...

javascriptphphtmlajaxperformance

How can I make the navbar in Angular stay fixed in place?

After using the ng generate @angular/material:material-nav --name=home command to create a navbar, I am trying to make it fixed at the top while scrolling. I attempted using position: fixed; on my mat-sidenav-content but it didn't work. Does anyone ha ...

cssangularnavbar

Creating two columns with separate scrollbars in Responsive Bootstrap is a useful feature for organizing content in a visually

Is there a way to create 2 columns with scrollbars using Bootstrap when a button is clicked? Here's what I'm trying to achieve: My webpage consists of a row-fluid div that contains the main-column div with main-content and extra-content. There&a ...

jquerycsstwitter-bootstrapresponsive-designsass

The issue of Django/Python static files not loading is causing disruption

mysite/settings.py """ Configuration settings for the Django project called mysite. This file was generated by 'django-admin startproject' using Django 1.9.5. For more details about this file, visit https://docs.djangoproject.com/en/1.9/topics ...

pythoncssdjango

What is the best way to reveal and automatically scroll to a hidden div located at the bottom of a webpage?

Whenever the image is clicked, I want to display a hidden div with effects like automatically scrolling down to the bottom This is what my code looks like: $(document).ready(function() { $('#test').click(function() { $(&apos ...

javascriptjqueryhtmlcsscodeigniter

Is it possible to combine ng-switch and ng-if directives in Angular?

I attempted to combine the angular ng-switch and ng-if directives, but it doesn't seem to be functioning properly. Here is what I tried: <div data-ng-if = "x === 'someValue'" data-ng-switch on = "booleanValue"> <div data-ng-swit ...

javascripthtmleclipseangularjsangularjs-directive

I customized the navbar in Bootstrap by centering it with custom CSS, but whenever I click on it, it suddenly shifts to one side. I'm puzzled as to why this is happening and

I attempted to center my navbar-toggler element, but was only successful in centering the navbar-contend using Bootstrap. I then took it a step further by trying to center the navbar-toggler icon with custom CSS, however, it now shifts to the left when cli ...

htmlcssbootstrap-5

"Adjusting the margin for dropdowns in a Bootstrap navbar

Is there a way to customize the alignment of the bootstrap navbar drop-down? Currently, the drop down menu always starts from the right corner. I would like to set a specific starting point for the drop-down. You can view an example in this Fiddle. When ...

htmlcsstwitter-bootstrap

Programmatically simulate a text cursor activation as if the user has physically clicked on the input

I have been attempting to input a value into a text field using JavaScript, similar to the Gmail email input tag. However, I encountered an issue with some fancy animations that are tied to certain events which I am unsure how to trigger, illustrated in th ...

javascripthtmlcssinputclick

Incorrect Calculation of CSS Grid Container Width in Firefox

When using this CSS Grid code, there is a difference in behavior between Chrome and IE compared to Firefox. https://codepen.io/inkOrange/pen/XGzeMo This layout is intended to scroll horizontally when the content overflows beyond the fixed container size o ...

htmlcssfirefoxcss-grid

Tabulator and its convenient scrollable column feature allows for easy navigation

In case my tabulator column is exceeding its length, is there a way to enable scroll functionality for that specific column? Although the resizable rows feature permits users to resize and view all the content, can a scrollbar be implemented exclusively ...

javascriptjqueryhtmlbootstrap-4tabulator

What is the best way to navigate through an XML document within the DOM of an HTML

I am facing an issue with HTML code. My goal is to navigate through an XML document directly from within the HTML code. Here is the XML code: <?xml version = "1.0"?> <planner> <year value = "2000"> <date month = "7" day = " ...

javascripthtmlxmldom

Leveraging the Bootstrap 3 audio player, although displaying a standard HTML5 output

When trying to use the Bootstrap 3 player to display an audio player, I'm encountering an issue where the page only shows a default black HTML5 audio player output. Here is my current directory structure: miuse/ application/ bootstrap/ ...

phphtmlcodeigniteraudiotwitter-bootstrap-3

Immersive video platform combining HTML5 and Flash technologies

Is there a way to produce videos like the ones seen on this website: ? Are there any other websites or tutorials available that offer similar video creation techniques? ...

htmlflashvideohtml5-videoflash-video

Adjustable width columns in Flexbox design

I need assistance with creating a responsive three-column grid layout using Flex in CSS. I have achieved a fairly responsive design by following the CSS provided in the fiddle link below. However, I am facing an issue where the second column (the blue one) ...

htmlcssflexbox

Click once to change the element, but it will remain changed and will not revert back no matter how many times you

After the first click displaying "X" and then changing to "O" in my tic-tac-toe JavaScript game, subsequent clicks only show "O", failing to switch back to "X". I am currently working on creating a tic-tac-toe game using JavaScript. Upon the first click, ...

javascripthtml

"Controlling Selected Options in Bootstrap Dual Listbox: A Guide to Limiting Choices

I am utilizing the Bootstrap Dual Listbox plugin to assist users in selecting specific options. I have successfully integrated this plugin into my project. However, I encountered an issue when attempting to impose a limit on the number of options a user ...

jquerycsstwitter-bootstraplistbox

The CSS rule for the Checkbox Input column is consistently implemented on the element located in the top row

Does anyone have experience working with a table containing checkboxes like the one demonstrated here? I am encountering an issue where toggling the checked property of any input on any row always affects the element in the first row. Upon further investi ...

htmlcsscss-selectorshtml-table

Enhance your picture links with a:hover box-shadow styling

I've been struggling to add a box shadow on hover to a Facebook icon image. I assumed it would be straightforward, but as always, I was wrong. I'm working with a child theme in WordPress because I recently started, thinking it would be an easy wa ...

hovermouseovercss