CODEWITHSUNDEEP
javascripthtmlcsstwitter-bootstrap
Bekzod
Bekzod

Reputation: 342

How to realize little trick with bootstrap container class?

This is PSD(what i wanna do):enter image description here This is HTML:enter image description here

.bg{
  background:red;
  height:60px;
}
.container{
  max-width:360px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="col-md-5 bg">
  
  </div>
  
</div>
Bg class is the logo section. Help

Upvotes: 0

Views: 58

Answers (3)

Bhuwan
Bhuwan

Reputation: 16855

You can try :before pseudo selector like below

.bg {
  background: red;
  height: 60px;
  border-radius: 0 30px 30px 0;
}

.container {
  max-width: 360px;
}

.bg:before {
  content: "";
  position: absolute;
  background: red;
  top: 0;
  bottom: 0;
  left: -1000px;
  right: 100%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="col-5 bg">

  </div>

</div>

Upvotes: 1

Temani Afif
Temani Afif

Reputation: 272590

You need to adjust your structure. You have to use container-fluid (to go full width) and use row inside container like this:

.bg {
  background: red;
  height: 60px;
  border-radius:0 50px 50px 0;
}
.content {
 border:1px solid;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <div class="row">
    <div class="col-5 bg">

    </div>
    <div class="col-6 content">
        the remaining content goes here
    </div>
  </div>
</div>

Upvotes: 2

user8579791
user8579791

Reputation:

Remove container class to get end to end result and better you use row class 

.bg{
  background:red;
  height:60px;
}
.container{
  max-width:360px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class="col-md-5 bg">
  
  </div>
  
</div>

Upvotes: 0

Related Questions