I have a big problem with my page and I can't find a solution anywhere. Could anyone help me?
When I try to add a well with elements inside my page sometimes need scrolling.
There is my code. Thank you.
<div class="container-fluid">
<div class="container">
<div class="row">
<div class="col-xs-12 text-center">
<h1> Some text</h1>
<div class="well">
<div class="container">
<div class="col-md-3 col-sm-4 col-xs-12">
<img class="img-responsive" src="image" style="width:100%">
</div>
<div class="col-md-8 col-sm-8 col-xs-12">
<p class="tittle">Tittle</p>
<p class="font"> Nullam consectetur nunc massa. Praesent arcu libero, porttitor ut lacus nec, elementum sagittis est. Donec finibus ex eget nibh blandit, a gravida justo tincidunt. Integer efficitur risus et blandit molestie. Sed hendrerit accumsan faucibus.
Quisque urna ligula, ultrices et scelerisque sed, blandit sed ligula. Etiam odio sem, semper non ex sit amet, euismod pharetra dolor. Donec tristique quis neque vel tincidunt. Sed tincidunt, metus sed varius blandit </p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Related
I'm printing a loop dynamically in a col-3. Each column contains 4 HTML elements.
An Image
A Title
Some text content
A button
Is it possible to make each elements top, line up with each other regardless of how many lines the element on top is?
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-3">
<h2 class="pb-4">Title1</h2>
<p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</p>
</div>
<div class="col-3">
<h2 class="pb-4">Title2</h2>
<p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</p>
</div>
<div class="col-3">
<h2 class="pb-4">Title3</h2>
<p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</p>
</div>
<div class="col-3">
<h2 class="pb-4">Title <br> 4</h2>
<p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</p>
</div>
</div>
</div>
Personally, I would split the content into various rows, and put the columns inside those rows:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container pt-5">
<div class="row">
<div class="col-12">
<div class="row" id="titles_row">
<div class="col-3">
<h2 class="pb-4">Title1</h2>
</div>
<div class="col-3">
<h2 class="pb-4">Title2</h2>
</div>
<div class="col-3">
<h2 class="pb-4">Title3</h2>
</div>
<div class="col-3">
<h2 class="pb-4">Title <br> 4</h2>
</div>
</div>
<div class="row" id="texts_row">
<div class="col-3">
<p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</p>
</div>
<div class="col-3">
<p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</p>
</div>
<div class="col-3">
<p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</p>
</div>
<div class="col-3">
<p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</p>
</div>
</div>
</div>
</div>
</div>
One option is to separate your <h3> and <p> into separate rows. That allows them to all be aligned horizontally.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-3">
<h2 class="pb-4">Title1</h2>
</div>
<div class="col-3">
<h2 class="pb-4">Title2</h2>
</div>
<div class="col-3">
<h2 class="pb-4">Title3</h2>
</div>
<div class="col-3">
<h2 class="pb-4">Title <br> 4</h2>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-3">
<p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</p>
</div>
<div class="col-3">
<p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</p>
</div>
<div class="col-3">
<p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</p>
</div>
<div class="col-3">
<p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</p>
</div>
</div>
</div>
</div>
I'm trying to position a horizontal line on a section for a site I'm building and can't get it in the correct place. This is a Photoshop version of how it should look -
This is my coded version -
I'm using the hr tag to create it as this seems the most straightforward way - here's the code -
hr {
display: block;
width: 250px;
margin-top: 0.5em;
margin-bottom: 0.5em;
margin-left: auto;
margin-right: auto;
border-style: inset;
border-width: 1px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/gumby/2.6.4/css/gumby.min.css" rel="stylesheet"/>
<section id="welcome">
<div class="container">
<div class="row">
<div class="twelve columns">
<h4>WELCOME TO FEATURE MEDIA</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel ex nisl. Vestibulum vitae ultricies nisl. Praesent sodales, leo at pellentesque pellentesque, nunc erat dapibus nunc, ut congue libero lorem in orci. Suspendisse potenti. Quisque facilisis mauris in vestibulum tempor. Suspendisse nec venenatis nisi. Phasellus sodales viverra ante quis efficitur. Pellentesque quis orci mi. Phasellus tempus, sapien ut luctus pellentesque, lacus risus accumsan lorem, in porta urna tellus ac nibh. Nunc varius elit non diam vehicula aliquet. In eget urna id orci molestie pulvinar. Integer quis risus eu erat iaculis aliquet ut at eros. Etiam feugiat, ante vel molestie finibus, lacus urna pharetra leo, ut lobortis massa lectus quis lorem. Vestibulum rhoncus turpis sagittis sapien vulputate sagittis. Nunc ac velit sollicitudin, consequat arcu ac, tincidunt risus.</p>
</div>
</div>
<hr>
<div class="row">
<div class="four columns">
<div id="video">
<h3>VIDEO</h3>
<img src="images/VIDEO.jpg" alt="Video" style="width:300px;height:150px;">
</div>
</div>
<div class="four columns">
<div id="blog">
<h3>BLOG</h3>
<img src="images/blog.jpg" alt="blog" style="width:300px;height:150px;">
</div>
</div>
<div class="four columns">
<div id="faq">
<h3>FAQ</h3>
<img src="images/faq.jpg" alt="FAQ" style="width:300px;height:150px;">
</div>
</div><hr>
</div>
</div>
</section>
The hr is already given a style in the framework, so if you give it a class like this, it will override the default.
The major reason why it is not exactly positioned vertically between the text and image part, is that the text row and image row has not the same top/bottom margin/padding, so I increased the margin-top/bottom a little, and the second hr, the one after the images, were placed within the row, so I moved it outside.
To get it exact in between, you have elaborate with the row's padding/margin.
Stack snippet
hr.hr250center {
display: block;
width: 250px;
margin-top: 2em;
margin-bottom: 2.5em;
margin-left: auto;
margin-right: auto;
border-style: inset;
border-width: 1px;
border-color: red; /* here you set color */
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css" rel="stylesheet"/>
<section id="welcome">
<div class="container">
<div class="row">
<div class="twelve columns">
<h4>WELCOME TO FEATURE MEDIA</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel ex nisl. Vestibulum vitae ultricies nisl. Praesent sodales, leo at pellentesque pellentesque, nunc erat dapibus nunc, ut congue libero lorem in orci. Suspendisse potenti. Quisque
facilisis mauris in vestibulum tempor. Suspendisse nec venenatis nisi. Phasellus sodales viverra ante quis efficitur. Pellentesque quis orci mi. Phasellus tempus, sapien ut luctus pellentesque, lacus risus accumsan lorem, in porta urna tellus
ac nibh. Nunc varius elit non diam vehicula aliquet. In eget urna id orci molestie pulvinar. Integer quis risus eu erat iaculis aliquet ut at eros. Etiam feugiat, ante vel molestie finibus, lacus urna pharetra leo, ut lobortis massa lectus quis
lorem. Vestibulum rhoncus turpis sagittis sapien vulputate sagittis. Nunc ac velit sollicitudin, consequat arcu ac, tincidunt risus.</p>
</div>
</div>
<hr class="hr250center">
<div class="row">
<div class="four columns">
<div id="video">
<h3>VIDEO</h3>
<img src="http://placehold.it/100/f00" alt="Video" style="width:300px;height:150px;">
</div>
</div>
<div class="four columns">
<div id="blog">
<h3>BLOG</h3>
<img src="http://placehold.it/100/f00" alt="blog" style="width:300px;height:150px;">
</div>
</div>
<div class="four columns">
<div id="faq">
<h3>FAQ</h3>
<img src="http://placehold.it/100/f00" alt="FAQ" style="width:300px;height:150px;">
</div>
</div>
</div>
<hr class="hr250center">
</div>
</section>
You can use the option: 'padding-top' or 'padding-bottom'
<section id="welcome">
<div class="container">
<div class="row" style="padding-bottom: 50px;">
<div class="twelve columns">
<h4>WELCOME TO FEATURE MEDIA</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel ex nisl. Vestibulum vitae ultricies nisl. Praesent sodales, leo at pellentesque pellentesque, nunc erat dapibus nunc, ut congue libero lorem in orci. Suspendisse potenti. Quisque facilisis mauris in vestibulum tempor. Suspendisse nec venenatis nisi. Phasellus sodales viverra ante quis efficitur. Pellentesque quis orci mi. Phasellus tempus, sapien ut luctus pellentesque, lacus risus accumsan lorem, in porta urna tellus ac nibh. Nunc varius elit non diam vehicula aliquet. In eget urna id orci molestie pulvinar. Integer quis risus eu erat iaculis aliquet ut at eros. Etiam feugiat, ante vel molestie finibus, lacus urna pharetra leo, ut lobortis massa lectus quis lorem. Vestibulum rhoncus turpis sagittis sapien vulputate sagittis. Nunc ac velit sollicitudin, consequat arcu ac, tincidunt risus.</p>
</div>
</div>
<hr>
<div class="row" style="padding-top: 50px; padding-bottom: 50px;">
<div class="four columns">
<div id="video">
<h3>VIDEO</h3>
<img src="images/VIDEO.jpg" alt="Video" style="width:300px;height:150px;">
</div>
</div>
<div class="four columns">
<div id="blog">
<h3>BLOG</h3>
<img src="images/blog.jpg" alt="blog" style="width:300px;height:150px;">
</div>
</div>
<div class="four columns">
<div id="faq">
<h3>FAQ</h3>
<img src="images/faq.jpg" alt="FAQ" style="width:300px;height:150px;">
</div>
</div>
</div> <hr>
</div>
</section>
I'm trying to create the layout below in Bootstrap 3.
I can achieve layout shown under 'sm', and with flexbox I want to swap div 1 and 2 for xs screens. The problem is when I make the containing div a flexbox, it pushes down div 3 on the sm layout, so that it is underneath div 2.
<!--[2 Column]-->
<div class="row flex-container">
<!--[DIV 2]-->
<div class="col-xs-12 col-sm-4 flex-item">
<p class="portfolio-content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et turpis mi. Maecenas ultrices orci mi, eu pellentesque nunc laoreet consequat. Nulla viverra nunc elit. Nam accumsan auctor pulvinar. Duis dignissim quam id lorem molestie, et accumsan turpis dapibus. Vivamus vitae ligula a augue luctus dignissim. Integer condimentum mauris eget arcu sodales, id hendrerit lorem laoreet. Suspendisse quis dolor molestie ante consequat finibus. Mauris mollis efficitur velit, at facilisis arcu sodales fermentum. Donec sed elit sed eros dapibus consequat vel quis ante. Morbi accumsan feugiat magna in accumsan. Suspendisse eu tincidunt odio. Aenean ut dignissim nisi, ac condimentum neque. Nulla vitae sollicitudin sapien.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et turpis mi. Maecenas ultrices orci mi, eu pellentesque nunc laoreet consequat. Nulla viverra nunc elit. Nam accumsan auctor pulvinar. Duis dignissim quam id lorem molestie, et accumsan turpis dapibus. Vivamus vitae ligula a augue luctus dignissim. Integer condimentum mauris eget arcu sodales, id hendrerit lorem laoreet. Suspendisse quis dolor molestie ante consequat finibus. Mauris mollis efficitur velit, at facilisis arcu sodales fermentum. Donec sed elit sed eros dapibus consequat vel quis ante. Morbi accumsan feugiat magna in accumsan. Suspendisse eu tincidunt odio. Aenean ut dignissim nisi, ac condimentum neque. Nulla vitae sollicitudin sapien.
</p>
</div>
<!--[/DIV 2]-->
<!--[DIV 1]-->
<div class="col-xs-12 col-sm-8 flex-item">
<!-- main image-->
<img class="img mb-20" src="img/6.jpg"/>
</div>
<!--[/DIV 1]-->
<!--[DIV 3]-->
<div class="col-xs-12 col-sm-8 flex-item">
<img class="img" src="img/1.jpg"/>
<img class="img" src="img/2.jpg"/>
<img class="img" src="img/3.jpg"/>
</div>
<!--[/DIV 3]-->
</div>
<!--/[2 Column]-->
And the CSS
.flex-container {
display: flex;
flex-wrap: wrap;
}
If I remove 'flex-container' from my containing div class, it then goes back to being as I would like it to be in the picture above. Is there a way to solve this so that I can have my correct layout for sm, even with flexbox?
I originally tried to solve this using Masonry, but a Stackoverflow user suggested flexbox instead (which I'd not used before) so hopefully I'm on the right track. If not.. any pointers would be grand!
Here is a JS Fiddle with the media query and flexbox ordering included.
Use the Boostrap grid columns like this..
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-md-4 pull-right">
<div class="well">
<h4>1</h4>
</div>
</div>
<div class="col-xs-12 col-md-8">
<div class="well tall">
<h4>2</h4>
</div>
</div>
<div class="col-xs-12 col-md-4 pull-right">
<div class="well">
3
</div>
</div>
</div>
</div>
Demo: http://www.codeply.com/go/94pLz9xLab
Im new to bootstrap and have not used their grid system before. I am trying to use the full 12 grid and have one div 1-5 and one 8-12 so each div col-lg-5.
Im trying not to override there CSS much to keep it clean, I seem to have a problem with float:left. As far as i can tell from the documentation I am using the system correctly, but its not working, the second div drops to the next line.
MY CODE
<div class="row">
<div class="col-xs-6 col-lg-5 well well-lg">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor
mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada
magna mollis euismod. Donec sed odio dui. </p>
</div>
<div class="col-xs-6 col-lg-5 col-lg-offset-7 well well-lg">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor
mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada
magna mollis euismod. Donec sed odio dui. </p>
</div>
</div>
Your mistake is that you have two different .col-lg-5 divs in one row, and you added .col-lg-offset-7 class to the second one (5 + 5 + 7 = 17). However, the offset class should be .col-lg-offset-2 not to exceed the 12 columns grid system.
<div class="row">
<div class="col-xs-6 col-lg-5 well well-lg">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor
mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada
magna mollis euismod. Donec sed odio dui. </p>
</div>
<div class="col-xs-6 col-lg-5 col-lg-offset-2 well well-lg">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor
mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada
magna mollis euismod. Donec sed odio dui. </p>
</div>
</div>
Here are the other examples for you to understand how the grid system works:
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>
I'm attempting to achieve the layout below using col-lg-4.
I just need to know how I can make the third column span all three rows and without creating enormous gaps of whitespace between the rows. Here's what it's currently looking like:
Is this possible to do in Bootstrap (without using the Bootstrap 2 span classes)?
Here's the code (generalized)
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row-fluid">
<div class="col-lg-4">
Praesent laoreet purus in elementum.
</div>
<div class="col-lg-4">
Praesent laoreet purus in elementum.
</div>
<div class="col-lg-4">
<!-- THIS NEEDS TO ROW SPAN -->
<p>Praesent posuere egestas sagittis. Sed feugiat nibh urna, egestas elementum ipsum facilisis et. Nullam elit nisi, tincidunt a turpis ac, fringilla pellentesque nibh. Suspendisse pulvinar orci sit amet metus laoreet, sed tincidunt quam semper. Vestibulum
ac nunc a justo vulputate venenatis vel sit amet augue. Vestibulum eu hendrerit sem. Aenean nec tempus ipsum. Integer nec lectus varius, venenatis orci vitae, efficitur mi. Curabitur at consectetur leo, sit amet consectetur nisi. Nam nec eros
facilisis, aliquam sem molestie, auctor elit. Vivamus quis hendrerit justo, vel molestie ligula.</p>
<p>Morbi leo magna, sollicitudin a sem ac, finibus facilisis ex. Nam ut enim commodo, venenatis augue nec, consectetur velit. Sed lobortis vitae lacus at pulvinar. Aliquam vel enim tristique, lacinia nibh ut, porta dui. Fusce efficitur volutpat lectus
maximus iaculis. Proin purus odio, auctor id sollicitudin nec, lacinia vel ligula. Sed luctus ipsum non sem tincidunt mollis.</p>
<p>Pellentesque congue mauris non tempor tincidunt. Phasellus pretium at lorem ut auctor. Donec rhoncus, nibh vitae aliquam tristique, leo quam elementum nisl, at porttitor massa diam venenatis diam. Suspendisse potenti. Sed gravida, mauris nec rhoncus
feugiat, augue velit facilisis mauris, et dapibus nisl augue non nunc. Nunc pretium quam eget tincidunt sollicitudin. Etiam maximus metus eget accumsan efficitur. Fusce a lorem vitae libero blandit condimentum.</p>
</div>
<div class="col-lg-4">
Praesent laoreet purus in elementum.
</div>
<div class="col-lg-4">
Praesent laoreet purus in elementum.
</div>
<div class="col-lg-4">
Praesent laoreet purus in elementum.
</div>
</div>
</div>
You need to use nested col-s, in this case, use col-lg-8 + col-lg-4
and inside col-lg-8 you create nested cols using row
added col-xs-* for demo.
[class*="col-"] {
border: red dashed 1px
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row">
<div class="col-xs-8 col-lg-8">
<div class="row">
<div class="col-xs-6 col-lg-6">
Praesent laoreet purus in elementum.
</div>
<div class="col-xs-6 col-lg-6">
Praesent laoreet purus in elementum.
</div>
</div>
<div class="row">
<div class="col-xs-6 col-lg-6">
Praesent laoreet purus in elementum.
</div>
<div class="col-xs-6 col-lg-6">
Praesent laoreet purus in elementum.
</div>
</div>
<div class="row">
<div class="col-xs-6 col-lg-6">
Praesent laoreet purus in elementum.
</div>
<div class="col-xs-6 col-lg-6">
Praesent laoreet purus in elementum.
</div>
</div>
</div>
<div class="col-xs-4 col-lg-4">
Praesent laoreet purus in elementum.Praesent laoreet purus in elementum.Praesent laoreet purus in elementum. Praesent
</div>
</div>
</div>