I'm trying to create a simple bootstrap grid with some data results. The spacing the first header (web-based review) and reported text (e.g., 211 -> new line "total projects identified) is too much. It looks a bit awkward. Basically, I want to eliminate the extra line break/spaces. The spacing between "Interviews" and the image below is good, however when I tried playing around with "Web-based review" to make it look similar, everything went to hell.
For clarify, I've attached an image to show what I'd like.
Bottom line, I want to fix (1) the spacing between the "Web-based Review" header and the image below it and (2) the numbers in large text and the text below.
Desired Output: https://i.sstatic.net/CGyqo.jpg
Here's the codepen: https://codepen.io/tenebris_silentio/pen/YzqRQOv
var ultimateColors = [
['rgb(0, 25, 51)', 'rgb(0, 76, 153)']
];
var data = [{
values: [50, 50],
labels: ['<b>Coded</b>', '<b>Uncoded</b>'],
text: ["<b> Description</b>: Projects that have been coded", '<b>Description</b>: Projects that have not yet been coded'],
textinfo: 'percent',
domain: {column: 0},
name: 'Sources',
marker: {
colors: ultimateColors[0]
},
hoverinfo: 'label+percent+desc+text',
type: 'pie'
}];
var layout = {
title: '',
annotations: [
{
font: {
size: 17
},
showarrow: false,
text: '',
x: 0.5,
y: 0.5
},
],
height: 380,
width: 550,
showlegend: false,
grid: {rows: 1, columns: 1}
};
Plotly.newPlot('myDiv', data, layout);body {font-family: "Lato", sans-serif}
.mySlides {display: none}<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<script src='https://cdn.plot.ly/plotly-latest.min.js'></script>
<body>
<div class="row">
<div class="col-sm-5">
<h3>Web-based Review</h3> <img src="https://i.ibb.co/4JRWPNX/reviewpic.jpg" width="275" height="275" align="left">
<br><br> <p class="w3-justify"><p style="font-size:30px">211</p>total projects identified
</div>
<div class="col-sm-7">
<div id='myDiv'> </div>
</div>
<div class="col-sm-5">
<h3>Interviews</h3> <img src="https://i.ibb.co/Cbvz20q/interviewpic.jpg" width="275" height="275" align="left">
<br><br> <p class="w3-justify"><p style="font-size:30px">9</p>interviews completed<br><br><p style="font-size:30px">46</p> operational interviews identified
</div>
10 of 20 projects have been coded.
</div>
</body>For your heading the reason it's not closer to your image is there is a lot of white space above the computer. You should resize image with less white space, but if you cannot you can use transform: translateY() to get a similar effect.
For the numbers, a p tag comes with margin from most browser base styling and bootstrap's reboot css as well. You can adjust the structure and use span with classes and line breaks to make it better. Code included:
var ultimateColors = [
['rgb(0, 25, 51)', 'rgb(0, 76, 153)']
];
var data = [{
values: [50, 50],
labels: ['<b>Coded</b>', '<b>Uncoded</b>'],
text: ["<b> Description</b>: Projects that have been coded", '<b>Description</b>: Projects that have not yet been coded'],
textinfo: 'percent',
domain: {
column: 0
},
name: 'Sources',
marker: {
colors: ultimateColors[0]
},
hoverinfo: 'label+percent+desc+text',
type: 'pie'
}];
var layout = {
title: '',
annotations: [{
font: {
size: 17
},
showarrow: false,
text: '',
x: 0.5,
y: 0.5
},
],
height: 380,
width: 550,
showlegend: false,
grid: {
rows: 1,
columns: 1
}
};
Plotly.newPlot('myDiv', data, layout);body {
font-family: "Lato", sans-serif
}
.mySlides {
display: none
}
span.projectNumber {
font-size: 30px
}
/* I recommend instead of using below code to resize image with less white space */
h3.wbrHeader {
transform: translateY(50px);
}<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />
<script src='https://cdn.plot.ly/plotly-latest.min.js'></script>
<body>
<div class="row">
<div class="col-sm-5">
<h3 class="wbrHeader">Web-based Review</h3> <img src="https://i.ibb.co/4JRWPNX/reviewpic.jpg" width="275" height="275" align="left">
<br><br>
<p class="w3-justify">
<p><span class="projectNumber">211</span><br>total projects identified</p>
</div>
<div class="col-sm-7">
<div id='myDiv'> </div>
</div>
<div class="col-sm-5">
<h3>Interviews</h3> <img src="https://i.ibb.co/Cbvz20q/interviewpic.jpg" width="275" height="275" align="left">
<br><br>
<p class="w3-justify">
<p><span class="projectNumber">9</span><br>interviews completed</p><br><br>
<p><span class="projectNumber">46</span><br>operational interviews identified</p>
</div>
10 of 20 projects have been coded.
</div>
</body>