I just started learning bootstrap and I have an issue of cols not displaying inline even when they are in the same row.
Code:
<div class="container">
<div class="row">
<div class="col-sx-6">
<h2>Lorem Ipsum Dolor</h2>
<p>
Sit amet something else.
</p>
</div>
<div class="col-sx-6">
<img src="http://www.irealb.com/wp-content/uploads/2012/08/half-iphone-player.png" width="250px" alt="Iphone">
</div>
</div>
</div>
Expected Result: http://i.imgur.com/KygHf0g.png
Actual Result: http://i.imgur.com/2bR6fXg.png
JSfiddle: http://jsfiddle.net/ojhLm1vt/
I include Bootstrap the following manner:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" media="screen">
It's col-xs-*, not col-sx-*.
FIDDLE
<div class="container">
<div class="row">
<div class="col-xs-6">
<h2>Lorem Ipsum Dolor</h2>
<p>
Sit amet something else.
</p>
</div>
<div class="col-xs-6">
<img src="http://www.irealb.com/wp-content/uploads/2012/08/half-iphone-player.png" width="250px" alt="Iphone">
</div>
</div>
</div>
Related
How to display 3 lines inline side by side in bootstrap? I have a serious problem in the height and the width! If I use css only it displays. However when I want to use bootstrap I am getting stuck.
Here the code using CSS with only one line! The same process for the remaining two lines:
<div style="display:inline-block ;height:2px; width:100px;border-radius:10px; background-color: blue;"
How to do it using bootstrap? Should I use a parent class to get the height and the width?
You was thinking of something like this?
<div class="col-lg-3 text-center bg-secondary" style="height:200px;width:auto"></div>
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="p-5 bg-danger"></div>
<p class="text-center">Lorem ipsum dolor sit</p>
</div>
<div class="col-md-4">
<div class="p-5 bg-danger"></div>
<p class="text-center">Lorem ipsum dolor sit</p>
</div>
<div class="col-md-4">
<div class="p-5 bg-danger"></div>
<p class="text-center">Lorem ipsum dolor sit</p>
</div>
</div>
</div>
I am trying to make it so the text on the left stays in the position it is in but the red block becomes full-width on the right side.
This is the code below which is using Bootstrap 3.
<!-- Bootstrap-3 -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Body -->
<div class="hero">
<div class="container">
<div class="row row-split">
<div class="col-sm-7">
<div class="col-sm-12">
<h2 class="hero__title primary-font dullblue">Some really cool text.</h2>
</div>
<div class="col-sm-12">
<div class="hero__paragraph secondary-font">
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. sit amet consectetur adipisicing elit.</p>
</div>
</div>
<div class="col-sm-12">
<button class="hero__button secondary-font">Shop Now</button>
</div>
</div>
<div class="col-sm-5 hero__background">
</div>
</div>
</div>
</div>
I need to code a layout like this with Bootstrap 3.x
But I don't know how to create a section (in this case, the main and the article) with multiple columns size, without a markup error related to close the elements.
The following code is correct syntactically, but it doesn't respect the layout (the col-md-4 is in a new row)
<body>
<header>
<!-- menu -->
</header>
<div class="container">
<main>
<article>
<div class="row">
<div class="col-md-12">
<h1>Hello, world!</h1>
</div>
</div>
<div class="row">
<div class="col-md-8">
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Etc., etc.</p>
</div>
</div>
</article>
</main>
<div class="row">
<aside class="col-md-4">
<p>Lorem ipsum</p>
</aside>
</div>
<div class="row">
<footer class="col-md-12">
<p>Lorem ipsum</p>
</footer>
</div><!-- container -->
</body>
</html>
What do you suggest?
Thanks
"Green" column, .col-md-4 should be a sibling of "orange" column .col-md-8. They need to have the same .row parent. In other words, they should be next to each other, that way the sections won't break. Here is how I would do it:
<header>
<div class="container">
<div class="row">
<div class="col-md-12">header</div>
</div>
</div>
</header>
<main>
<div class="container">
<div class="row">
<div class="col-md-12">orange section</div>
</div>
<div class="row">
<div class="col-md-12">orange section</div>
<div class="col-md-12">green section</div>
</div>
</div>
</main>
<footer>
<div class="container">
<div class="row">
<div class="col-md-12">footer</div>
</div>
</div>
</footer>
I'm new to bootstrap and I am having some trouble getting two jumbotrons to sit on one row (without space in between.) No matter how small I make their respective columns, they stay on separate rows.
Here is my HTML:
<div class="col no-gutters">
<div class="col-md-6">
<div class="jumbotron jumbotron-fluid" style="background-color: #e3f2fd;">
<div class="container">
<h1 class="display-4">Title</h1>
<p class="lead">Description. Lorem ipsum dolor sit amet.</p>
</div>
</div>
</div>
<div class="col-md-6">
<div class="jumbotron jumbotron-fluid" style="background-color: #e3f2fd;">
<div class="container">
<h1 class="display-4">Active</h1>
<br>
</div>
</div>
</div>
</div>
I have not messed with the default bootstrap CSS. Thank you in advance!!!
The class of the containing div should to be row, not col:
<div class="row no-gutters">
Bootstrap's Grid system has column spacing (padding) by default. There are a few ways to address this issue to adapt to your requirements.
One approach could be to add a new CSS selector, and then modify your HTML accordingly.
CSS:
/* Add this */
.no-padding {
padding-right:0;
padding-left:0;
}
HTML:
<div class="col">
<div class="col-md-6 no-padding"> <!-- add no-padding -->
<div class="jumbotron jumbotron-fluid" style="background-color: #e3f2fd;">
<div class="container">
<h1 class="display-4">Title</h1>
<p class="lead">Description. Lorem ipsum dolor sit amet.</p>
</div>
</div>
</div>
<div class="col-md-6 no-padding"> <!-- add no-padding -->
<div class="jumbotron jumbotron-fluid" style="background-color: #e3f2fd;">
<div class="container">
<h1 class="display-4">Active</h1>
<br>
</div>
</div>
</div>
</div>
I am trying to set 2 div elements next to each other by using bootstrap
code:
<div class='col-12'>
<div class='row'>
<div class='col-6'>
</div>
<div class='col-6'>
</div>
</div>
</div>
this works fine the only thing is that when the window width gets to small
the divs overlap. when it gets to small I want to set the divs beneath each other
and col-6 then has to be col-12
How can I achieve this?
You can use the sm breakpoint...
https://www.codeply.com/go/QGmvcPu7Ts
<div class='col-md-12'>
<div class='row'>
<div class='col-sm-6'>
</div>
<div class='col-sm-6'>
</div>
</div>
</div>
You should use have read the Bootstrap Grid System to make them align in every screen width.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<div class='col-12'>
<div class='row'>
<div class='col-md-6 col-sm-12 col-12'>
lOREM ePSUM lOREM ePSUM lOREM ePSUM lOREM ePSUM lOREM ePSUM lOREM ePSUM lOREM ePSUM lOREM ePSUM
</div>
<div class='col-md-6 col-sm-12 col-12'>
lOREM ePSUM lOREM ePSUM lOREM ePSUM lOREM ePSUM lOREM ePSUM lOREM ePSUM lOREM ePSUM lOREM ePSUM lOREM ePSUM
</div>
</div>
</div>
<div class='col-12'>
<div class='row'>
<div class='col-6 col-xs-12'>
</div>
<div class='col-6 col-xs-12'>
</div>
</div>
</div>