Img tag is not working for some reason.Can anyone suggest me anything?I'm using bootstrap
<div id="header" class="header">
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-6">
<h1>Responsive Web design</h1>
<p> Hello</p>
<button type="button" class="btn btn-lg btn-primary">Buy Mow</button>
<button type="button" class="btn btn-lg btm-success">View Details</button>
</div>
<div class="col-lg-6 col-md-6">
<img src=img/a.jpg" alt="1">
</div>
</div>
</div>
</div>
Are you sure is syntax ok?
<img src=img/a.jpg" alt="1">
Where is the " after src?
<img src="img/a.jpg" alt="1">
Be sure to close your quotation marks
<div class="col-lg-6 col-md-6">
<img src="img/a.jpg" alt="1">
</div>
Replace your code with this:
<div id="header" class="header">
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-6">
<h1>Responsive Web design</h1>
<p> Hello</p>
<button type="button" class="btn btn-lg btn-primary">Buy Mow</button>
<button type="button" class="btn btn-lg btm-success">View Details</button>
</div>
<div class="col-lg-6 col-md-6">
<img src="img/a.jpg" alt="1">
</div>
</div>
</div>
</div>
Related
I'm using clarity design and i have cards that contain different size of images. How can i make these cards maintain the same size?
HTML Code:
<div class="clr-row">
<div class="clr-col-md-4">
<div class="card">
<div class="card-img previewImg">
<img [src]="../pic1.png">
</div>
<div class="card-footer">
<button class="btn btn-outline">Cancel</button>
</div>
</div>
</div>
<div class="clr-col-md-4">
<div class="card">
<div class="card-img previewImg">
<img [src]="../pic2.png">
</div>
<div class="card-footer">
<button class="btn btn-outline">Cancel</button>
</div>
</div>
</div>
<div class="clr-col-md-4">
<div class="card">
<div class="card-img previewImg">
<img [src]="../pic3.png">
</div>
<div class="card-footer">
<button class="btn btn-outline">Cancel</button>
</div>
</div>
</div>
</div>
I have used bootstrap for my website, simply put there are two column enclosed in col-md-12, they are col-md-6,
They should not be collapsing because enough space is given, why is this happening?
<div class="container-fluid" style="margin: 0">
<div class="row">
<div class="col-md-12">
<div class="col-md-6 ">
<div class="col-sm-12">
<img class="centering newReq" src="add-512.png" height="132" width="142">
</div>
<div class="col-sm-12">
<button type="button" class="btn btn-warning centering btnAdjust">New Request</button>
</div>
</div>
<div class="col-md-6 ">
<div class="col-sm-12">
<img class="centering newReq" src="contact.png" height="132" width="142">
</div>
<div class="col-sm-12">
<button type="button" class="btn btn-warning centering btnAdjust">My request</button>
</div>
</div>
</div>
</div>
</div>
Just remove the col-md-12 because each row contains each column. Optionally try to use
img-responsive class instead of setting width and height for image.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container-fluid" style="margin: 0">
<div class="row">
<div class="col-md-6 ">
<div class="col-sm-12">
<img class="centering newReq img-responsive" src="https://via.placeholder.com/150" height="132" width="142">
</div>
<div class="col-sm-12">
<button type="button" class="btn btn-warning centering btnAdjust">New Request</button>
</div>
</div>
<div class="col-md-6 ">
<div class="col-sm-12">
<img class="centering newReq img-responsive" src="https://via.placeholder.com/150" height="132" width="142">
</div>
<div class="col-sm-12">
<button type="button" class="btn btn-warning centering btnAdjust">My request</button>
</div>
</div>
</div>
</div>
enter image description herehow to center all the elements center in the html body with responsive.i want all three elements in center of the body which are shown in the image.Am using bootstrap frame.
<div class="container-fluid">
<div class="col-md-4">
<img src="img/quote.png" class="img-responsive wow animated zoomIn">
</div>
<div class="col-md-6 text-center main-img">
<img src="img/main.jpg" class="homeimg img-responsive wow animated zoomIn">
</div>
<div class="col-md-2">
<button type="button" class="btn btn-success btn-lg" data-toggle="modal" data-target="#myModal" data-backdrop="static" data-keyboard="false">Go to Website</button>
</div>
</div>
enter image description here
Have a look at this - https://plnkr.co/edit/ABOpqjxWw2ZvGiMiy53O?p=preview
Since you're using bootstrap cols, adding an offset col-md-offset-4 will help do the job.
You can a div class row to align the grid to the center of the page
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
<img src="img/quote.png" class="img-responsive wow animated zoomIn">
</div>
<div class="col-md-6 text-center main-img">
<img src="img/main.jpg" class="homeimg img-responsive wow animated zoomIn">
</div>
<div class="col-md-2">
<button type="button" class="btn btn-success btn-lg" data-toggle="modal" data-target="#myModal" data-backdrop="static" data-keyboard="false">Go to Website</button>
</div>
</div>
</div>
You can try like this:
<div class="container-fluid">
<div class="container">
<div class="row">
<div class="col-md-4">
<img src="img/quote.png" class="img-responsive wow animated zoomIn">
</div>
<div class="col-md-6 text-center main-img">
<img src="img/main.jpg" class="homeimg img-responsive wow animated zoomIn">
</div>
<div class="col-md-2">
<button type="button" class="btn btn-success btn-lg" data-toggle="modal" data-target="#myModal" data-backdrop="static" data-keyboard="false">Go to Website</button>
</div>
</div>
</div>
</div>
Quick question on bootstrap and columns/rows. I have a cascade effect that has managers, then employees, then employee family members.
The problem is that I do not have a full understanding of bootstrap and how it uses columns/rows.
I get this result when running my code at the bottom here
But I need this result
I know this is not achieveable with my current code... Any suggestions?
Thanks in advance!
<div class="container">
<div class="row">
#{i++;}
<div class="col-md-4">
<button type="button" class="btn btn-default" data-toggle="collapse" data-target="##i">Manager Name</button>
<div id="#i" class="collapse">
<div class="row">
<div class="col-md-2">
</div>
<div class="col-md-10">
<h5>Employees</h5>
</div>
</div>
<div class="row">
<div class="col-md-2">
</div>
<div class="col-md-8">
j++;
<button type="button" class="btn btn-default" data-toggle="collapse" data-target="##j">Employee Name</button>
<br />
<div id="#j" class="collapse">
<div class="row">
<div class="col-md-4">
</div>
<div class="col-md-8">
<h5>Employee Fam Members</h5>
</div>
</div>
<div class="row">
<div class="col-md-4">
</div>
<div class="col-md-8">
#Html.ActionLink(Employee Fam Member Name, blah, blah)
</div>
</div>
<br />
</div>
<br />
</div>
<div class="col-md-2">
<br />
<br />
</div>
</div>
</div>
</div>
<div class="col-md-1">
Edit Button
</div>
<div class="col-md-7">
Delete Button
</div>
</div>
<br />
Rather than putting rows inside of columns, you'll have to make a bunch of rows on the same level instead. Otherwise the new rows would only be the width of the column it was placed in. Also, container-fluid to make it fully full width if you'd like.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-4">
<button type="button" class="btn btn-default" data-toggle="collapse" data-target="#i">Manager Name</button>
</div>
<div class="col-md-1">
Edit Button
</div>
<div class="col-md-7">
Delete Button
</div>
</div>
<div id="i" class="collapse">
<div class="row">
<div class="col-md-2">
</div>
<div class="col-md-10">
<h5>Employees</h5>
</div>
</div>
<div class="row">
<div class="col-md-2">
</div>
<div class="col-md-8">
<button type="button" class="btn btn-default" data-toggle="collapse" data-target="#j">Employee Name</button>
</div>
</div>
</div>
<div id="j" class="collapse">
<div class="row">
<div class="col-md-4">
</div>
<div class="col-md-8">
<h5>Employee Fam Members</h5>
</div>
</div>
<div class="row">
<div class="col-md-4">
</div>
<div class="col-md-8">
#Html.ActionLink(Employee Fam Member Name, blah, blah)
</div>
</div>
</div>
</div>
I don't feel well. All of a sudden, an unwanted white horizontal line has appeared in the bottom of my jumbotron. It's happened after...
Inserting a navbar form
Adding a form at the bottom of the body
Inserting a object then
inserting a button in the jumbotron
I've commented out all changes I've made, but to no avail.
<header class="jumbotron">
<!-- Main component for a primary marketing message or call to action -->
<div class="container">
<div class="row row-content">
<div class="col-xs-12 col-sm-8">
<h1>Ristorante con Fusion</h1>
<p style="padding:40px;"></p>
<p>We take inspiration from the World's best cuisines!</p>
</div>
<div class="col-xs-12 col-sm-2">
<p style="padding:20px;"></p>
<img src="img/logo.png" class="img-responsive">
</div>
<div class="col-xs-12 col-sm-2">
<br><br><br><br><br>
<button type="button" class="btn btn-warning btn-lg btn-block" onclick="window.location.href='#reservation'">Reserve table</button>
</div>
</div>
</div>
</header>
<header class="jumbotron" style="margin-bottom:0px">
<!-- Main component for a primary marketing message or call to action -->
<div class="container">
<div class="row row-content">
<div class="col-xs-12 col-sm-8">
<h1>Ristorante con Fusion</h1>
<p style="padding:40px;"></p>
<p>We take inspiration from the World's best cuisines!</p>
</div>
<div class="col-xs-12 col-sm-2">
<p style="padding:20px;"></p>
<img src="img/logo.png" class="img-responsive">
</div>
<div class="col-xs-12 col-sm-2">
<br><br><br><br><br>
<button type="button" class="btn btn-warning btn-lg btn-block" onclick="window.location.href='#reservation'">Reserve table</button>
</div>
</div>
</div>
Found it! You can relax everyone...
<div class="row row-content">
should have been
<div class="row row-header">