Problem to horizontally align responsive layout using Bootstrap

Question

Problem to horizontally align responsive layout using Bootstrap

Navigation

#1 by (0 votes)

1

Now with the header it worked. I need to create a second ROW (line) It will be 4 | 4 | 4 and should have one image, and the other 2 parts of text. But I have 2 doubts. The first one is, I do not know what I do to make the image smaller than the original size (for example: a 1920x1080 image takes up 200x200px space) and be responsive.

The other question is that the text is aligned next to it as in the Header the search form and the LOGOUT text are: Here is the code below:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"/>
    <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/>
    <style>
    </style>
</head>

<body>

    <div class="container-fluid">
        <div class="row">
            <nav class="navbar navbar-inverse navbar-fixed-top" id="barranav">
                <div class="col-sm-4 col-xs-4">
                    <img src="http://placecage.com/50/50"class="img-responsive" alt="Responsive image">
                </div>
                <!--<a href="" class="navbar-brand">TEST</a> interesante -->
                <div class="col-sm-4 col-xs-4" style="text-align:center;">
                    <form class="navbar-form" role="search">
                        <div class="input-group">
                            <input type="text" class="form-control" placeholder="Search" name="q">
                            <div class="input-group-btn">
                                <button class="btn btn-default" type="submit">
                                    <i class="glyphicon glyphicon-search"></i>
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="pull-right">
                    <div class="col-sm-4 col-xs-4" style="color:aliceblue;">LOGOUT</div>
                </div>
            </nav>
        </div>
    </div>
    <div class="corpo">
        <div class="row">
            <div class="col-md-4">
                <img src="panda2.jpg" class="img-fluid" alt="Responsive Image">
            </div>
            <div class="col-md-4"> TEXTO DIV 5 a 8</div>
            <div class="col-md-4"> TEXTO DIV 9 A 12 </div>
        </div>
    </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</body>
</html>

html css bootstrap

asked by anonymous 17.01.2018 / 02:28

1 answer

Images added with tinymce do not respect div Configure Laravel Virtual Host on ubuntu

score 0 · Answer 1

To make your images responsive using the bootstrap pattern, you can use the img-fluid class as follows:

<img src="..." class="img-fluid" alt="Responsive image">

And to modify the size you can force via css, like this:

img {width: 200px; height: 200px;}

On the other point, you need to tell the div that it is a container, like this:

<div class="corpo container">

If you want to use the bootstrap structure, you will need to tell what you want to use.

More information see:

link