CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3
auser
auser

Reputation: 7577

Element alignment in bootstrap

I have a page with a header, textarea and a button as shown in this jsfiddle page (link to jsfiddle)

<!DOCTYPE html><html lang="en"><head>
    <meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name="theme-color" content="#000000"><title>example.com</title></head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root">
    <div class="container fill">
        <nav class="navbar navbar-default">
            <div class="container-fluid">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
                            aria-expanded="false" aria-controls="navbar"><span
                            class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span
                            class="icon-bar"></span><span class="icon-bar"></span></button>
                    <a href="/" class="navbar-brand">example</a></div>
            </div>
        </nav>
        <div>
            <div class="container fill">
                <div><textarea>a</textarea>
                    <div class="btn-group">
                        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"
                                aria-haspopup="true" aria-expanded="false">Action<span class="caret"></span></button>
                        <ul class="dropdown-menu">
                            <li><a href="javascript:void(0)">Save</a></li>
                            <li><a href="#">Copy</a></li>
                            <li class="divider" role="separator"></li>
                            <li><a href="#">Delete</a></li>
                        </ul>
                    </div>
                </div>
                <div class="content">
                    <div><p>a</p>
                    </div>
                </div></div></div></div></div>
</body>
</html>

How do I make the elements line up as shown in the following image

enter image description here

Also, what's the best approach for debugging such issues? What tools can I use to work out why a page is displaying in an unexpected manner or why the browser is laid out elements the way it has?

Upvotes: 1

Views: 51

Answers (1)

Troyer
Troyer

Reputation: 7013

You are missing to include the Bootstrap 3 framework css links and js, you can use the CDN provided on official bootstrap 3.3 docs:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

You fiddle updated: https://jsfiddle.net/e7gdk04v/8/

To archieve your layout you can use the Bootstrap 3 grid system, inside your class="container" div create a new div with class="row" and use the grid, for example on the textarea div wrapper add class="col-12" and make the text area 100% width.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <title>example.com</title>
     <script
			  src="https://code.jquery.com/jquery-3.3.1.min.js"
			  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
			  crossorigin="anonymous"></script>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root">
    <div class="container fill">
        <nav class="navbar navbar-default">
            <div class="container-fluid">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
                            aria-expanded="false" aria-controls="navbar"><span
                            class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span
                            class="icon-bar"></span><span class="icon-bar"></span></button>
                    <a href="/" class="navbar-brand">example</a></div>
            </div>
        </nav>
        <div>
            <div class="container fill">
                 <div class="row">
                 
                <div class="col-12"><textarea style="width: 100%">a</textarea>
                    <div class="btn-group">
                        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"
                                aria-haspopup="true" aria-expanded="false">Action<span class="caret"></span></button>
                        <ul class="dropdown-menu">
                            <li><a href="javascript:void(0)">Save</a></li>
                            <li><a href="#">Copy</a></li>
                            <li class="divider" role="separator"></li>
                            <li><a href="#">Delete</a></li>
                        </ul>
                    </div>
                </div>
                <div class="content">
                    <div><p>a</p>
                    </div>
                </div>
                
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

Upvotes: 2

Related Questions