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

Ways to assign the value of an alert to an element

Within this piece of code, my intention is to retrieve the alert value and apply it to an element. Description: The AJAX code I have written checks for values in a database, fetches new values from the database, and then displays these fetched values in a ...

javascriptjqueryhtmlajax

Issues arise when setting a delay for CSS transitions to occur due to the

I'm trying to create a scroll bar that only appears when hovered over, similar to how it works on Facebook where the scroll bar shows up slowly instead of all at once. I've tried using CSS transition delay, but it doesn't seem to be working ...

htmlcss

Is there a way to place two input fields from different forms side by side on the same line?

Here are two forms extracted from an html page: <form method="get" action="search/s" id="number"> <div style="text-align: center;"> <input type="text" id="regNo" name="regNo" size="30" maxLength="50" > or ...

javascripthtmlcssuser-interfaceweb

Tips for breaking out of an infinite loop while loading HTML containing a carousel into a blank <div> within another HTML file using jQuery's $(document).ready() function

Currently, I am studying HTML, CSS, Bootstrap 4, jQuery3, and JavaScript (ES6+), and to enhance my skills, I have devised an exercise for practice and consolidation. I have created 4 HTML files, all featuring responsive design based on Bootstrap 4: inde ...

jqueryhtmlcssajaxbootstrap-4

What is the best method to verify image dimensions and size for three distinct target platforms, all of which have different image dimensions but the same size, within

I'm currently working on a feature that involves an image uploader for various platforms, each with its own set of recommended image dimensions. For example: platform 1 - dimension 920 x 300, platform 2 - 210 x 200, and platform 3 - 790 x 270. When th ...

htmlvue.jsvuejs2vuetify.js

Utilizing CSS-in-JS to eliminate arrow buttons from a TextField

I'm currently developing a webpage using React and Material-UI. One of the components I have is a TextField element, and I need to remove the arrow buttons that typically appear on number input fields. If I were utilizing CSS, I could easily achieve t ...

javascriptcssreactjsmaterial-uireact-with-styles

Font Awesome symbols using the class "fa-brands" are not functioning as expected

I have included a font awesome library in the header using the following code: <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> However, when I try to display an ic ...

htmlcssfont-awesome

What is the best way to add a border around an image along with a button using VueJS?

I am struggling to link a button and an image in VueJS to display a border around the picture. While I can successfully display the border on the button, I am unsure how to extend it to the image as well. Vue.component('my-button', 'my-img& ...

javascripthtmlcssvue.jsvuejs2

Error in Express application due to uncaught SyntaxError

I am attempting to live stream data using websockets to Chartjs, however I keep encountering the following error. main.js:1 Uncaught SyntaxError: Unexpected token < What could be causing this issue? The code for my server and HTML is as follows: ...

javascripthtmlnode.jsexpresschart.js

The concept of recursion in AngularJS directives

I developed a unique custom directive. angular.module('menu',[]) .directive('MenuDirective',function(){ return{ restrict:'E', replace:'true', scope:{ m ...

javascripthtmlangularjs

Utilize jQuery to dynamically add a CSS class to a button

When using jQuery to create dynamic buttons, is there a way to add a CSS class to the button during creation without needing an extra line of JavaScript to add the class afterwards? Below is a example code snippet: $.each(data, function (index, value) { ...

jqueryhtmlcss

Strange Behavior of SVG 'fill: url(#....)' in Firefox

I am struggling with an SVG graphic that I have created. Here is the code: <svg width='36' height='30'> <defs> <linearGradient id="normal-gradient" x1="0%" y1="0%" x2="0%" y2="100%"> <stop offset="0%" s ...

cssfirefoxsvggradientfill

Does the use of CSS positioning impact the performance of browser rendering?

Given two DIVs, A and B, where A contains B, and the following CSS styles: A { margin-left: -2000px; } B { margin-left: 2000px; } With these CSS styles applied, the position of B remains unchanged compared to its original position without any CSS. I am c ...

cssperformancerendering

Interactive SVG viewport dimension

Check out my "hamburger button" made in SVG, shown below. body { margin: 0; text-align: center; } svg#ham-btn { margin: 2rem; border: 1px solid black; fill: #383838; } <svg id="ham-btn" width="107.5px" height="80px" viewBox="0 0 80 80" pre ...

htmlcsssvg

What is the best way to align HTML inputs within a grid, whether it be done automatically or manually using JavaScript?

Arrange 20 HTML inputs with various data types into grid-columns as the user inputs data. Ensure that the grid container has div elements correctly positioned for output. ...

javascripthtmlcss

What is the process for extracting specific text from a web page source using Python with Selenium?

The following is the HTML source code: <div class="dropdown-popup"> <a href="/integrations/sources/" class="dropdown-item">Sources</a> <a href="/integrations/destinations/" cla ...

htmlpython-3.xseleniumselenium-webdrivercss-selectors

How can I remove the unsightly scrollbar caused by overflow: auto?

I've encountered a problem while working on my website. The inner div #content wasn't expanding to the full size of the page, causing the text to overflow messily over the background image and making it difficult to read. I initially used overflo ...

htmlcssoverflow

Tips for overlaying text on an image in html with the ability to zoom in/out and adjust resolution

My challenge is aligning text over an image so that they move together when zooming in or out. However, I am facing difficulties as the text and image seem to move in different directions. I have attempted using media queries and adjusting the positions of ...

htmlcssangularbootstrap-4

initiate changes to the application's style from a component nested within the app

I'm looking to update the background color of the entire page, including the app-nav-bar, when I'm inside a child component. When I navigate away from that component, I want the default style to be restored. Any suggestions on how to achieve this ...

cssvue.jsvue-componentvuetify.js

Access WordNet using JavaScript

Currently developing a web application that involves NLP tasks. In my past projects, I have used the JWNL library in Java which has always served me well. I am curious to know if you have any advice on the most effective approach for querying the WordNet ...

javascripthtmlnlpwordnet