Making text alignments with bootstrap - html

Question

Struggling to understand bootstrap, I'm trying to make a header that looks like the image below and stays like that for all screens sizes, however I don't seem to get the results using the code below, help?
.intro {
top:20%;
left:32%;
color: black;
font-weight: bold;
font-size: 18px;
hr {
margin-left:0rem;
width:80px;
}
h1 {
color: green !important;
margin-left: 10rem;
font-weight: bold;
font-size:42px;
line-height: 1rem !important;
}
h3 {
line-height:5rem !important;
padding-bottom: 1rem;
color: black;
font-weight: bold;
font-size: 115px;
}
}
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row intro">
<div class="col-md-12">
<div class="row">
<h1 class="what">This is Text</h1>
</div>
<div class="row no-gutters">
<div class="col-xs-12 col-xs-offset-1">
<h1>this is more</h1>
</div>
</div>
<div class="row">
<div class="col-lg-1">
<h3 style="float:left">BIGGER </h3>
</div>
<div class="col-lg-1">
<h1>&nbsp?</h1>
</div>
</div>
<div class="row">
<div class="col-xs-5">
<hr/>
</div>
</div>
</div>
</div>

Answer 1

Please replace this code with you old code.
I think it's help for you?
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row intro">
<div class="col-md-12">
<div class="row">
<div class="col-lg-6">
<h1 class="what">This is Text</h1>
</div>
</div>
<div class="row no-gutters">
<div class="col-xs-12 col-xs-offset-1">
<h1>this is more</h1>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<h3>BIGGER <span>?</span></h3>
</div>
</div>
</div>
</div>
</div>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<style>
.intro {
top: 20%;
left: 32%;
color: black;
font-weight: bold;
font-size: 18px;
}
h1 {
color: green !important;
font-weight: bold;
font-size: 42px;
line-height: 1rem !important;
}
h3 {
padding-bottom: 1rem;
color: black;
font-weight: bold;
font-size: 115px;
position: relative;
margin: 0;
line-height: 1;
}
h3 span {
font-size: .5em;
display: inline-block;
transform: translateY(-75%);
line-height: 1;
}
h3:after {
content: '';
position: absolute;
border-bottom: 6px solid black;
bottom: 0;
left: 30%;
right: 0;
}
</style>

Answer 2

I saw your code and I can see unwanted tag because I am not able to see the opening tag of hr and some edits in style sheet.
CSS:
.intro {
top:20%;
left:32%;
color: black;
font-weight: bold;
font-size: 18px;
}
hr {
margin-left:0rem;
width:80px;
}
h1 {
color: green !important;
margin-left: 10rem;
font-weight: bold;
font-size:42px;
line-height: 1rem !important;
}
h3 {
line-height:5rem !important;
padding-bottom: 1rem;
color: black;
font-weight: bold;
font-size: 115px;
}
HTML:
<div class="row intro">
<div class="col-md-12">
<div class="row">
<h1 class="what">This is Text</h1>
</div>
<div class="row no-gutters">
<div class="col-xs-12 col-xs-offset-1">
<h1>this is more</h1>
</div>
</div>
<div class="row">
<div class="col-lg-1">
<h3 style="float:left">BIGGER </h3>
</div>
<div class="col-lg-1">
<h1>&nbsp?</h1>
</div>
</div>
<div class="row">
<div class="col-xs-5">
</div>
</div>
</div>
</div>

Answer 3

Be sure to load your styles after bootstrap. Changed your h3 a little, added the ? in a span and am using a pseudo element for the underline.
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<style>
.intro {
top: 20%;
left: 32%;
color: black;
font-weight: bold;
font-size: 18px;
}
h1 {
color: green !important;
font-weight: bold;
font-size: 42px;
line-height: 1rem !important;
}
h3 {
padding-bottom: 1rem;
color: black;
font-weight: bold;
font-size: 115px;
position: relative;
margin: 0;
line-height: 1;
}
h3 span {
font-size: .5em;
display: inline-block;
transform: translateY(-75%);
line-height: 1;
}
h3:after {
content: '';
position: absolute;
border-bottom: 6px solid black;
bottom: 0;
left: 30%;
right: 0;
}
</style>
<div class="container">
<div class="row intro">
<div class="col-md-12">
<div class="row">
<div class="col-lg-6">
<h1 class="what">This is Text</h1>
</div>
</div>
<div class="row no-gutters">
<div class="col-xs-12 col-xs-offset-1">
<h1>this is more</h1>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<h3>BIGGER <span>?</span></h3>
</div>
</div>
</div>
</div>
</div>

Answer 4

This should do what u want in terms of bootstrap. If you want to change the spacing size and color of the text then use CSS but this way will keep everything the same cross browser
<html>
<head>
<title> C.E.O.
</title>
<link rel="stylesheet" type="text/css" href="stack.css" />
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrap.cdn.com/3.2.0/js/bootstrap.min.js"></script>
</head>
<body>
<!-- Background image builder -->
<div class="container">
<div class="row">
<div class="col-md-12">
<h1 class="head" style="text-align:center;"> This is text </h1>
<h1 class="head2" style="text-align:center;"> This is too </h1>
<h3 class="subhead" style="text-align:center; font-size: 90px;"> BIGGER? </h3>
</div>
</div>
</div>
</body>
</html>