Problem for horizontally aligning responsive layout using Bootstrap

Asked

Viewed 200 times

1

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

The other doubt is that the text is aligned next to it as in the Header the search form and the text LOGOUT were: Follow 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>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</body>
</html>
html css bootstrap

1 answer

0

To make your images responsive using the bootstrap pattern, you can use the "img-Fluid" class to get like this:

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

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

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

On the other point, you need to tell div that she’s a container, this way:

<div class="corpo container">

So, unlike the top div, this will be boxed, if you want fluid too, just add the container-Fluid, but anyway, to use the bootstrap structure, you need to tell which one you want to use.

More information see:

https://getbootstrap.com/docs/4.1/content/images/#Responsive-images

Browser other questions tagged html css bootstrap

You are not signed in. Login or sign up in order to post.