-1

I want to align the "monitoring engineering dashboad" text on the right side of the Image on top-left. Which is now below the image (Please see below image)

<div style="width:1200px; margin:0 auto;">
  <div class="row" style="margin:10px 0px 0px 0px;">
    <img alt="DDP" class="col-md-4" style="width:140px; height:60px;" src="logo.png" />
    <h1 class="col-md-8" style="width:700px;">Monitoring Engineering Dashboard</h1>
  </div>

Output of the HTML

Please suggest how the text "Monitoring Engineering Dashboard Could be align on left side of Image

Alireza
  • 2,319
  • 2
  • 23
  • 35
Saurabh thorat
  • 1
  • 1

2 Answers2

0

A h1 tag is an element whose display is defaults to block. This means that it will be put on its own line. Changing the display to inline or inline-block will resolve this issue. 

<div style="width:1200px; margin:0 auto;">
  <div class="row" style="margin:10px 0px 0px 0px;">
    <img alt="DDP" class="col-md-4" style="width:140px; height:60px;" src="logo.png" />
    <h1 class="col-md-8" style="width:700px;display:inline;">Monitoring Engineering Dashboard</h1>
  </div>
beardhatcode
  • 4,533
  • 1
  • 16
  • 29
0

See my jsfiddle demo.

By your use of col-sm-* and col-md-* classnames, I assume you're using Twitter Bootstrap CSS Grid.

I noticed a couple of issues with your work though. You had a style="width: 700px;" and "col-sm-8" class on your <h1>. You also tried using "col-md-4" class on your <img> instead of using it on a wrapping <div>.

I would refer you to the code in my fiddle, and the Bootstrap CSS Grid docs (scroll down and look at the code samples.)

HTML

<h2>Example 1</h2>
<p>2-column grid, using Bootstrap CSS Grid (12-column grid).  <strong>col-sm-4, col-sm-8</strong></p>
<hr>
<div class="container" style="margin:0 auto;">
    <div class="row">
        <div class="col-sm-4">
            <img alt="DDP"  style="width:140px; height:60px;" src="logo.png" />
        </div>
        <div class="col-sm-8">
            <h1>Monitoring Engineering Dashboard</h1>
        </div>
    </div>
</div>
<hr>

<h2>Example 2</h2>
<p>2-column grid.  Tip: Adjust your browser window to see in real-time the side-by-side layout activate, for col-md-* grid sizing.  This also means that if your browser window is anything under 991px, then the column layout will display the columns as stacked blocks (rows).  <strong>col-md-4, col-md-8</strong></p>
<hr>
<div class="container" style="margin:0 auto;">
    <div class="row">
        <div class="col-md-4">
            <img alt="DDP"  style="width:140px; height:60px;" src="logo.png" />
        </div>
        <div class="col-md-8">
            <h1>Monitoring Engineering Dashboard</h1>
        </div>
    </div>
</div>
<hr>

<h2>Example 3</h2>
<p>
2-column grid, flipped.  <strong>col-sm-8, col-sm-4</strong>
</p>
<hr>
<div class="container" style="margin:0 auto;">
    <div class="row">
        <div class="col-sm-8">
            <h1>Monitoring Engineering Dashboard</h1>
        </div>
        <div class="col-sm-4">
            <img alt="DDP"  style="width:140px; height:60px;" src="logo.png" />
        </div>
    </div>
</div>
<hr>
Ryan Briscall
  • 121
  • 5